Home Setting bootstrap dropdown width less than 240px
Reply: 1

Setting bootstrap dropdown width less than 240px

Ali Saberi
1#
Ali Saberi Published in 2017-12-07 18:36:25Z

I am using ngx-boostrap (AngularJS for Bootstrap) for drop-downs.

I an trying to have the max-width of lets say 120px for my dropdown, but I never gets small than 240px. Is there any reason behind it

This photo is the design

and this photo is what I am building

The html, js codes are as exactly as what is put in ngx-bootstrap, nothing fancy. For css, I am putting max-width=120px on everything inside the dropdown-menu and itself and I can not make that smaller.

What is any remedy?

Robert C
2#
Robert C Reply to 2017-12-07 22:11:22Z

You're on the right track! If you inspect .dropdown-menu you'll see it has the following value:

min-width: 160px

Since your max-width is less than that nothings going to happen; min-width is bigger and it's going to win. Easiest solution is going to be to reset that value in your override:

.dropdown-menu {
  min-width: 0px;
  max-width: 120px;
}

Just keep in mind that any contents inside of .dropdown-menu that exceed this width will flow out of the container box.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.321637 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO