Question

0

635

Views

How 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>

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-07T01:17:23.548Z

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>

Answer 2 · 2022-07-07T01:17:23.556Z

.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>

0

635

How to show Bootstrap 5 dropdown arrows when there's a long button label?

2 answers

0

0

Find remote jobs

Andres GPT