JavaScript

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"
                        autocomplete="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.

Answer

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 comment, 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.

Inline “display: none;” is being automatically added when page is rendered – where might I look for the cause?

Advertisement

Answer