bug? orphaned CSS elements

This is just how chrome display its elements when you inspect… it’s not actually “there”.

Actually I sorted it out… it was an artifact of the theme, and it was actually a CSS ::after clause that put in an additional character. In FireFox it rendered as a “pencil” icon, but Chrome didn’t get it. I updated the custom.css file of the theme to remove the content.

I am having another issue however… not sure if this is bootstrap or again related to the theme, but I’m trying to sort it out best I can. I’m trying to use panels and the title/header has a very large margin on the bottom side of the title text. I’ve tried directly setting the bottom margin to 0 again using custom.css edits, but still it won’t work.

https://amal.net/caps/2015-08-26_12-40-54.png

Also, the panel is supposed to accordion collapse when clicked, but it doesn’t work… the # anchor shows in the URL address bar in the browser but the browser just skips to the title but does not expand it… this is code that is copied directly from another non-wordpress based website which is working perfectly;

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingInstalled" style="background-color: #1c5c92; color: #ffffff;">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseInstalled" aria-expanded="true" aria-controls="collapseInstalled">How/where are x-series tags installed? Aftercare? What to expect?</a>
      </h4>
    </div>
    <div id="collapseInstalled" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInstalled">
      <div class="panel-body">
            Our x-series transponders are typically installed into the webbing between the metacarpal bones of the index finger and thumb, resting parallel to the index metacarpal. The reason for this has to do with the extremely short read range of x-series tags and the typical use case being some form of access control where the tag must be presented to a fixed reader of some kind. Achieving a safe installation definitely requires a steady hand and experience performing aseptic procedures. Dangerous Things prefers our customers locate one of our professional body piercing or body modification partners to complete the installation of this product. If no partners are available in your area, you should be able to follow this guide to finding a professional in your area who is willing to assist you.

For aftercare information and what to expect, please read our <a href="/x-faq" target="_blank">X-Series FAQ</a> page.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingFAQ" style="background-color: #1c5c92; color: #ffffff;">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFAQ" aria-expanded="false" aria-controls="collapseFAQ">
          Can I get an MRI? What about airport security? Playing sports? etc.
        </a>
      </h4>
    </div>
    <div id="collapseFAQ" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFAQ">
      <div class="panel-body">
            You have questions! That's understandable. The short answer is; it's all good. If you're looking for more specific answers, we have an <strong><a href="/x-faq">extensive FAQ page</a></strong> that deals with many of the most commonly asked questions regarding installation of our x-series transponders.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingRange" style="background-color: #1c5c92; color: #ffffff;">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseRange" aria-expanded="false" aria-controls="collapseRange">
            Practical read range/performance expectation
        </a>
      </h4>
    </div>
    <div id="collapseRange" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingRange">
      <div class="panel-body">
            Passive RFID and NFC tags are magnetically coupled devices that pass power and data over a shared magnetic field. This means their effective read range and performance depends on how well both of the antenna coils in the tag and reader couple with each other. This typically means the shape, size, and orientation of both antennas must be complimentary. Unfortunately, most reader devices, including mobile phones, typically have antennas designed with thin flexible PCB traces made into blocky rectangular shapes that lay along a flat plane. These antenna designs are great for coupling with and reading large flat label tags or card style tags and access cards which also have this antenna design, but they have a hard time coupling to the very small cylindrically shaped antenna coil inside our x-series tags. Most mobile phones and reader devices have a “sweet spot” or two that must be located and used each time to get consistent results. Other devices, such as the Samsung Ezon electronic deadbolt lock, sometimes use wire wound coil antenna loops inside, which work much more reliably with small glass tags like our x-series tags. You should not expect your USB reader or mobile device to achieve the same read range with our x-series tags that you normally get with a label tag or card style tag. Here are some example videos detailing typical read performance and how to find that "sweet spot";

<center><iframe width="560" height="315" src="https://www.youtube.com/embed/6WXCkQEM2OE" frameborder="0" allowfullscreen></iframe></center>

<center><iframe width="560" height="315" src="https://www.youtube.com/embed/3abDBuNFNNE" frameborder="0" allowfullscreen></iframe></center>
      </div>
    </div>
  </div>
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingApp" style="background-color: #1c5c92; color: #ffffff;">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseApp" aria-expanded="false" aria-controls="collapseApp">
          Securing your xNT - first steps after installation
        </a>
      </h4>
    </div>
    <div id="collapseApp" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingApp">
      <div class="panel-body">
            The xNT uses the NTAG216 chip, which was designed by NXP for use in more typical NFC applications such as smart posters, labels, and other disposable applications where the memory contents will be set and then locked so it cannot be changed. This is done using built-in "lock bytes" which are OTP (one time programmable). That means that once the lock bytes are turned on to protect memory blocks, they can never be unlocked. This means the tag will forever be locked as read-only, which is not ideal for a tag like the xNT. That said, Dangerous Things does not make any assumptions regarding how our users wish to use our products, so we do not modify these lock bytes during manufacturing. This means an xNT could be written and locked, either by accident (many NFC apps offer locking options) or by a malicious person or reader.

In addition to lock bytes, the NTAG216 offers a 32bit password protection function. Regardless of what some NFC smartphone apps indicate, it is not possible to remove or disable the password. It is only possible to set the password to the default value of FF FF FF FF. The problem with this is, if the password is set to the default then anyone could change it and then change the protection options for your tag and than change the password to something that is unknown to you. Because it is also possible to protect memory blocks from unauthenticated reads, this could make the tag completely useless by not allowing any memory blocks to even be read.

Finally, many of the critical configuration bytes used by the NTAG216 chip are stored in the last few memory blocks of the tag. This means that it may be possible for an NFC application that does not properly detect or honor the xNT's memory schema to accidentally attempt to write NDEF record data (the data you're trying to store on the tag) overtop of the configuration bytes. For example, if the data you are attempting to write is longer than the user memory blocks available, the remainder of the data will be written to configuration bytes, which contain settings that are potentially dangerous to modify such as the config lock byte. The configuration lock byte is not possible to disable, so accidentally writing to that byte unintentionally could result in your configuration being irreversibly locked.

To help our customers protect their tag from accidental or intentional malicious attack, we have developed <a href="https://play.google.com/store/apps/details?id=com.dangerousthings.nfc" target="_blank">Dangerous NFC</a> for Android. Our DNFC app allows customers to secure their tag by doing the following things;
<ul>
<li>Disable lock bytes so they cannot be used to lock any memory blocks as read-only</li>
<li>Update the password block with a custom, non-default password value</li>
<li>Update the memory protection option to write-only protection</li>
<li>Update the memory protection range to protect the configuration bytes</li>
</ul>
This approach allows the entire user memory space to be written to/updated, while at the same time protecting the configuration bytes and password values at the bottom end of the xNT memory space. This means an application cannot accidentally write data unintentionally to any configuration bytes. It also means the password of the xNT cannot be updated without first authenticating. This means you need the current password in order to update the password. Without updating the dynamic memory protection range, it would technically be possible to just write a new password without first knowing the old password.

Ultimately, once secured by the <a href="https://play.google.com/store/apps/details?id=com.dangerousthings.nfc" target="_blank">Dangerous NFC</a> app, you are free to use any NFC app to write data to the tag and not need to be afraid of accidentally locking the tag, or changing the configuration bytes, or someone maliciously locking your tag or changing your password.

<center><a href="https://play.google.com/store/apps/details?id=com.dangerousthings.nfc" target="_blank"><img src="https://assets.dangerousthings.com/dnfc-screenshot_splash-168x300.png" border="0"></a> <a href="https://play.google.com/store/apps/details?id=com.dangerousthings.nfc" target="_blank"><img src="https://assets.dangerousthings.com/dnfc-screenshot_password-168x300.png"></a></center>
      </div>
    </div>
  </div>
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingReturns" style="background-color: #1c5c92; color: #ffffff;">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseReturns" aria-expanded="false" aria-controls="collapseReturns">
          Tag testing process, return policy, lifetime warranty
        </a>
      </h4>
    </div>
    <div id="collapseReturns" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingReturns">
      <div class="panel-body">
            Our x-series tags which come pre-loaded inside their injection systems cannot be tested while inside the metal needle of the injection assembly. Because of this, we perform a full test on every single tag before it is loaded into the injector assembly and sterilized.

            All sales of our x-series products are final, and no returns will be accepted. We keep a tight "chain of custody" on all products through manufacture, sterilization, and shipment. We would not want to re-sell a tag that has been returned, and you probably wouldn’t want to buy one either… so before you purchase, do your research and be sure you know you’re getting the correct product.

            If you do purchase one of our products and experience a failure, we offer a full lifetime warranty on all of our products. You simply return the product for testing and analysis, and if it is malfunctioning, we will ship you a replacement free of charge.
      </div>
    </div>
  </div>
</div>

Sorry, I know the support forum is not “free developer” forum, but I figured I’d post my issues and see if you can give me any clues.

Thanks,
Amal ??

Oh just an obvious update – I’ve tried other themes and they all appear to have this issue. I’ve tried changing various settings in the Bootstrap for Twitter settings section. I’m not using LESS compiler, just the CSS options.

Thanks,
Amal

Oh interesting update… I tried turning off the CSS plugin and instead using a theme that has bootstrap integrated (Nudie – https://www.nudiewp.com) and the exact same code behaved as expected… both display and collapse functions work; https://amal.net/caps/2015-08-26_12-48-55.png

So, at least through some simple testing I’ve been able to determine the cause is somehow the plugin.

Just confirming, after doing a few tests with other themes, the panel title issue and collapse problem have something to do with the WordPress Twitter Bootstrap CSS plugin.

Thanks Paul G… this plugin is great, just a few tweaks to sort out is all ??

bump bump… just wondering if you’re receiving me…