I have a bootstrap dropdown with different options. As different options are selected, its width is changed (due to different text length). This causes the items next to it to move. How do I prevent them from moving?
Currently, the code looks like this:
<div class="entry">
<span>1</span> <!--This is the label that I want to fix -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Not Selected</button>
<div class="dropdown-menu">
<a class="dropdown-item">Not Selected</a>
<a class="dropdown-item">short</a>
<a class="dropdown-item">This is long text</a>
</div>
</div>
</div>
Here is my jsbin with all the code.
The number labels (1-5) move around whenever the size of the button changes, making everything look disorganized and unappealing. How do I either prevent it from moving or have a fixed width for the dropdown that is guaranteed to fit all the text?
Add a width to your button class, as follows, this will stop it from changing depending on the value that is selected.
.btn-success {
width:250px;
max-width:100%;
}