Yeo Meng Tat Yeo Meng Tat - 4 months ago 6
CSS Question

Boostrap dropdown adjustment

I'm trying to adjust the

glyphicon-user icon
and
btn-primary
in dropdown to be displayed properly when the window is resized. However, when I resize the window, my button alignment seems to be out of the window where I can't view the end of the button. Answers anyone?

<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<strong>User</strong>
</a>
<ul id="user-dp" class="dropdown-menu">
<li>
<div class="row">
<!-- Login -->
<div class="col-lg-4">
<p class="text-center">
<span class="glyphicon glyphicon-user icon-size"></span>
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Test</strong></p>
<p class="text-left">
<a href="#" class="btn btn-primary btn-block btn-sm">Testing</a>
</p>
</div>
<div class="bottom text-center">
<a href="#" class="btn btn-danger btn-block">Test again</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>


style.css



.icon-size
{
margin-top:5%;
font-size: 87px;
}
#user-dp{
min-width: 300px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#user-dp .help-block{
font-size:12px
}
#user-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}

Answer

Jamdev's answer is close, but it's your #user-dp that sets the min-width. This will keep your box 300px wide no matter the window size. By adding the following CSS, you will reset the min-width to 0 whenever your window is under 768px wide.

@media (max-width: 768px) {
    #user-dp { 
        min-width:0; 
    } 
}

Demo: http://www.bootply.com/GetuidWvdM

Comments