I have a form element (a checkbox) that I have added to a UI form. When the page is rendered, the Chrome F12 debugger shows that display: none; has been added as a style; i.e.,

element.style {
   display: none;
}

... is seen in the Styles pane of the Chrome debugger for the <input> element on my form. (In fact, it is not even possible for me to uncheck this style in the Styles pane of the Chrome debugger - the checkmark stays frozen in place - even though I can easily uncheck other style entries.)

Here is (what I think is) the relevant HTML:

...
<div class="box">
    ...
    <form id="edit-dish" action="..." method="post">
        <div class="form">
            ...
            <p>
                <input  id="one-label-per-serving"
                        name="ingredient[one_label_per_serving]"
                        type="checkbox"
                        autoplete="off"
                        class="checkbox checkbox-inline validate[required]"
                        <?php if ( Arr::get($dish, 'one_label_per_serving', FALSE) ): ?>
                            checked="checked"
                        <?php endif; ?> />
                <span class="checkbox-label">One label per serving</span>
            </p>
            ...
        </div>
        ...
    </form>
...
</div>
...

The dots represent things I've left off that I hope & think are not relevant.

The <span> element is displayed just fine. But, the <input> checkbox has the display: none; added to its inline style immediately upon page load.

There is also a sidebar, header, and footer being automatically included by a template.

I have some confidence that one of the included Javascript libraries is causing the problem. Here are the loaded Javascript libraries (according to Chrome's debugger):

jquery.min.js
jquery-ui.min.js
jquery.tmpl.min.js
fileuploader.js
jquery.form.js
jquery.reveal.js
jquery.validationEngine-en.js
jquery.validationEngine.js
jquery.wysiwyg.js
master.v2.js // <-- this is the application's custom script

The master.v2.js is the application's custom script. Searching inside it, I find nowhere that it is setting display: none; for this element.

Does anyone have any suggestions about either what Javascript file might be setting display: none;, or how to go about debugging this?

Thanks.

I have a form element (a checkbox) that I have added to a UI form. When the page is rendered, the Chrome F12 debugger shows that display: none; has been added as a style; i.e.,

element.style {
   display: none;
}

... is seen in the Styles pane of the Chrome debugger for the <input> element on my form. (In fact, it is not even possible for me to uncheck this style in the Styles pane of the Chrome debugger - the checkmark stays frozen in place - even though I can easily uncheck other style entries.)

Here is (what I think is) the relevant HTML:

...
<div class="box">
    ...
    <form id="edit-dish" action="..." method="post">
        <div class="form">
            ...
            <p>
                <input  id="one-label-per-serving"
                        name="ingredient[one_label_per_serving]"
                        type="checkbox"
                        autoplete="off"
                        class="checkbox checkbox-inline validate[required]"
                        <?php if ( Arr::get($dish, 'one_label_per_serving', FALSE) ): ?>
                            checked="checked"
                        <?php endif; ?> />
                <span class="checkbox-label">One label per serving</span>
            </p>
            ...
        </div>
        ...
    </form>
...
</div>
...

The dots represent things I've left off that I hope & think are not relevant.

The <span> element is displayed just fine. But, the <input> checkbox has the display: none; added to its inline style immediately upon page load.

There is also a sidebar, header, and footer being automatically included by a template.

I have some confidence that one of the included Javascript libraries is causing the problem. Here are the loaded Javascript libraries (according to Chrome's debugger):

jquery.min.js
jquery-ui.min.js
jquery.tmpl.min.js
fileuploader.js
jquery.form.js
jquery.reveal.js
jquery.validationEngine-en.js
jquery.validationEngine.js
jquery.wysiwyg.js
master.v2.js // <-- this is the application's custom script

The master.v2.js is the application's custom script. Searching inside it, I find nowhere that it is setting display: none; for this element.

Does anyone have any suggestions about either what Javascript file might be setting display: none;, or how to go about debugging this?

Thanks.

• javascript
• jquery
• html
• css

• 2 Have you tried removing different classes to see if that leads to some clues? – Andrew Barber Commented Sep 3, 2014 at 18:29
• 7 You probably won't find a script explicitly setting display:none;, most likely this is the result of jQuery's hide() – omma2289 Commented Sep 3, 2014 at 18:32
• @AndrewBarber Yes. I have been playing around with that, and other things; I attempted different things for about an hour before posting this question. I am continuing to debug to try to determine what is happening. – Dan Nissenbaum Commented Sep 3, 2014 at 18:33
• 1 What's really strange is that the display: none; property is uncheckable. Have you tested that in another browse? It could possibly be something like a misfunction of some extension. – falsarella Commented Sep 3, 2014 at 18:38
• 3 @koala_dev The culprit was a toggle() function inside the application's Javascript file. The lesson is to search for toggle as well as hide and display: none;. – Dan Nissenbaum Commented Sep 3, 2014 at 18:46

3 Answers 3

The culprit was a call to toggle() that was matching the element in question inside the application's custom Javascript file.

As @koala_dev noted in a ment, it is important to search for hide() when searching for potential locations where display: none; might be added. But, it is also important to search for toggle().

I am answering my own question in case others in the future run into this issue.

I had this happening to me as well and it was caused by Adblocking extensions in Google Chrome.

In my case the culprit was the the use of fadeIn(100).fadeOut(100). I actually wanted to give a blinking animation on a click. I only needed to use

$("#id").fadeIn(100).fadeOut(100); // that's when the problem occurred.

Solution:

$("#id").fadeIn(100).fadeOut(100).fadeIn(100);

Didn't actually need the second fadeIn(100) though. But it solved my problem. Still confused how it could solve the issue.