bootstrap: style="display:none" get's automatically appended in the 'li'

Question

I have following piece of code in my jsp.

<li id="report" class="dropdown open"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Report <b class="caret"></b></a>
    <ul class="dropdown-menu">
              <li ><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li style=""><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
    </ul>
</li>

but when it's getting rendered in the browser, automatically the code becomes as following:

<li id="report" class="dropdown open"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Report <b class="caret"></b></a>
    <ul class="dropdown-menu">
              <li style="display: none;"><a href="#">Action</a></li>
              <li style="display: none;"><a href="#">Another action</a></li>
              <li style="display: none;"><a href="#">Something else here</a></li>
              <li class="divider" style="display: none;"></li>
              <li class="nav-header" style="display: none;">Nav header</li>
              <li style="display: none;"><a href="#">Separated link</a></li>
              <li style="display: none;"><a href="#">One more separated link</a></li>
    </ul>
</li>

I am unable to understand from where all the li's are getting this style="display:none" property, is it some bootstrap javascript which is doing it. I am debugging the code on chrome.

It's not from core Bootstrap JS. I would guess it's some custom jQuery code you have written. — Henri Hietala, Aug 01 '14 at 12:39
I can't reproduce this with bootstrap3 [`fiddle`](http://jsfiddle.net/zeNdC/) — A1rPun, Aug 01 '14 at 12:42
I can't reproduce this with bootstrap2 [`fiddle`](http://jsfiddle.net/SLy4A/) — A1rPun, Aug 01 '14 at 12:49
@HenriHietala is there any way I can know, exactly which query is executing on my corresponing li's. — learner420, Aug 01 '14 at 12:50
@A1rPun You can't reproduce this because you have using the html which I wrote in jsp, but the html which is getting rendered in the browser is something like this: http://jsfiddle.net/SLy4A/1/ — learner420, Aug 01 '14 at 12:53
@learner420 Try to comment out your scripts one by one and narrow it down to the right piece of code. — Henri Hietala, Aug 01 '14 at 12:53
@HenriHietala thanks Henri, have to go now from the office see you tomorow, thanks everyone.. — learner420, Aug 01 '14 at 13:00
@learner420 What I was trying to say is this is not behavior from bootstrap itself.. — A1rPun, Aug 01 '14 at 13:27

score 2 · Accepted Answer · answered Aug 04 '14 at 10:00

2

I was not able to track, which js was doing the changes to my lists, so what I did is, I put every li in a class called 'visible' and in my tag I put a style as follows:

<style>
.visible{

display:inline !important;
}
</style>

answered Aug 04 '14 at 10:00

learner420

190
1
6
21

score 1 · Answer 2 · answered May 08 '21 at 15:35

1

This problem happens in Magento (version 1.9 for me) and it's caused by an incompatibility between Protype JS library and jQuery. There is a fix here.

answered May 08 '21 at 15:35

HenryHayes

368
2
4
13

score 0 · Answer 3 · answered Aug 01 '14 at 12:37

0

It's perfectly normal: the style is added in order to hide the dropdown menu when related button isn't clicked. That control is performed by JavaScript (check bootstrap.js).

answered Aug 01 '14 at 12:37

vdenotaris

13,297
26
81
132

It must have been normal, if the bootstrap was changing the style of every li to display:none. But it need not to since all the li is contained inside a ul and the behaviour can be controlled from there. I can't post the images because I have less than 10 reputation sorry :( – learner420 Aug 01 '14 at 12:48
If you need some customization, you have to declare another script that does what you want. – vdenotaris Aug 01 '14 at 12:52

bootstrap: style="display:none" get's automatically appended in the 'li'

3 Answers3