How to set width for li element of a dropdown?

Question

I am trying to set custom width to the li element of bootstrap dropdown. I am tried various solutions on stack overflow but none of them worked in my case.

The HTML of the dropdown:

<span title="Settings" class="dropdown pull-right label label-primary" style="margin-top: 2px;margin-left: -2px;">
    <span class="glyphicon glyphicon-cog dropdown-toggle pointer" data-toggle="dropdown"></span>
    <ul class="dropdown-menu">
       <li class="cancel-proj-job" data-href="#">
          <a href="#">Cancel Project Job</a>
       </li>
    </ul>
</span>

Custom CSS:

.jOrgbody div#grid_col_mid .open>ul.dropdown-menu {
   font-size: 8px;
   padding: 0;
}

.jOrgbody div#grid_col_mid ul.dropdown-menu li {
   padding: 0;
}

.jOrgbody div#grid_col_mid ul.dropdown-menu li>a {
   padding: 0;
   display: inline-block;
}

Note: When I tried to apply fixed width to li. It didn't work.

could you please create Jsfiddle for your code? – Pirate Oct 20 '16 at 07:58 — Pirate, Oct 20 '16 at 07:58
@Pirate I will be try to create its jsfiddle – Farjad Hasan Oct 20 '16 at 08:00 — Farjad Hasan, Oct 20 '16 at 08:00

score 1 · Answer 1 · answered Oct 20 '16 at 08:11

The easiest way to do that is to do this is as i have done in following code:

<span title="Settings" class="dropdown pull-right label label-primary" style="margin-top: 2px;margin-left: -2px;">
<span class="glyphicon glyphicon-cog dropdown-toggle pointer" data-toggle="dropdown"></span>
<ul class="dropdown-menu">
   <li class="cancel-proj-job" data-href="#" style="width:300px;">
      <a href="#">Cancel Project Job</a>
   </li>
</ul>

change the "width:300px" to any length you want. Hope this helped.

edit: i have tried it in my browser with 100px and 300px nnd the result is as follows:

with width:100px; with width:300px;

@NuttyProgrammer can you add your updated code so i can see it because when i tried it in my browser it worked for me. — P.RAO, Oct 20 '16 at 09:14

score 0 · Answer 2 · answered Oct 21 '16 at 19:03

0

I found the answer by debugging its css. Basically, the bootstrap has min-width:160px set for class dropdown-menu. I overwrite this value and li element start getting the custom width.

answered Oct 21 '16 at 19:03

Farjad Hasan

3,354
6
23
38

How to set width for li element of a dropdown?

2 Answers2