0
630
VistasHow to show Bootstrap 5 dropdown arrows when there's a long button label?
I have a Bootstrap dropdown inside an element with fixed width like this. You can see that the button text pushes the dropdown arrow to the right thus the arrow disappears. If I replace the text with some shorter text, the arrow shows.
Any idea how I can trim the extra long text and still show the arrow? Ideally like this however long the text is:
.out {
max-width: 15rem;
display: flex;
flex-direction: column;
background-color: #f4f5f7;
padding: 1rem;
position: relative;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class='out'>
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Looooooooooooooooooooooong
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
You can simply apply flex layout to the button and text-overflow on an interior span element to fix this. The span and the arrow pseudo-element are then flex children.
You wouldn't have to use the ellipsis, but I think it improves the UX when the button text is truncated.
Actually, it can all be done with Bootstrap classes if you prefer. Here I've shown both solutions.
.out {
max-width: 15rem;
display: flex;
flex-direction: column;
background-color: #f4f5f7;
padding: 1rem;
}
.btn.btn-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.btn.btn-flex span {
text-overflow: ellipsis;
overflow: hidden;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="out">
<button class="btn btn-secondary btn-flex dropdown-toggle">
<span>Looooooooooooooooooooooong</span>
</button>
</div>
<div class="out">
<button class="btn btn-secondary dropdown-toggle
d-flex justify-content-between align-items-center">
<span class="text-truncate">Looooooooooooooooooooooong</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
·
Juan Pablo Isaza
Denunciar
0
.out {
background-color: #f4f5f7;
padding: 1rem;
position: relative;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class='out'>
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Looooooooooooooooooooooong
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta