What is the trick to displaying Bootstrap 5 dropdown arrows when the button label is lengthy?

Within a fixed-width element, I have a Bootstrap dropdown which causes the arrow to disappear when the button text is too long. Is there a way to trim the text while still displaying the arrow, similar to this image:

https://i.sstatic.net/jHp5R.png

.out {
  max-width: 15rem;
  display: flex;
  flex-direction: column;
  background-color: #f4f5f7;
  padding: 1rem;
  position: relative;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a0adadb6b1b6b0a3b282f7ecf3ecf1">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8f948b9489">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

javascripthtmlcssbootstrap-4bootstrap-5

Answer №1

To resolve this issue, you can apply a flex layout to the button and utilize text-overflow on an interior span element. This way, both the span and the arrow pseudo-element will act as flex children.

While using ellipsis isn't mandatory, it definitely enhances the user experience by truncating the button text.

If preferred, Bootstrap classes can also be used to achieve the same effect. I have demonstrated both solutions below:

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a3aeaeb5b2b5b3a0b181f4eff0eff2">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535405b445b46">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Miscalculation in PHP MySQL: Incorrect output when adding field 1 and multiplying field 2 by

In my MySQL table, there are 4 fields: product price cost, selling price, stock of products, and earnings per unit. For example: If the cost of our product is $100, we sell it for $120, and we have a stock of 10 units, the following code calculates the e ...

phpmysqldatabasehtml

Accessing a service instance within the $rootScope.$on function in Angular

I'm looking for a way to access the service instance variable inside the $rootScope in the following code. myapp.service('myservice',function($rootScope) { this.var = false; $rootScope.$on('channel',function(e,msg) { v ...

javascripthtmlangularjs

Deleting the main node in a JSON file containing multiple values

I am working with a JSON data stored in a variable. Here is the JSON Data: var employees = {"emp":{{"firstName":"John"},{"secondName":"John"}}}; My goal is to remove the emp node from the above JSON Data and have it as follows: {{"firstName":"John"},{" ...

javascriptjson

leveraging embedded jetty for developing a web-based interface

As a newcomer to web development and using embedded Jetty, I have created the source code below in Eclipse IDE. I need to programmatically start the Jetty server and cannot use the command line to do so. The web interface must be lightweight due to the li ...

javajavascripthtmlembedded-jetty

Utilize Javascript to perform operations on ndb.key()

When working with my application, I encounter keys that are created within a Python system and written to Google Datastore. To access the corresponding data, I require the IDs of these items, which are contained in the 'key' string. Unfortunate ...

javascriptpythongoogle-app-enginegoogle-cloud-datastoreapp-engine-ndb

Adjusting the z-index of the tinyMCE toolbar

I have been utilizing the tinyMCE editor plugin, which transforms textareas into iframes and displays a toolbar at the top of the content. It has been functioning flawlessly. However, there are times when there are videos placed above the content. In such ...

jquerycsstinymce

Issues with JavaScript causing slideshow to malfunction

I'm experiencing some issues with my image slider. It seems that during the initial loop, the slideshow keeps reverting back to 'image3'. However, after the first loop, everything appears to work correctly. I am looking for a solution to ens ...

javascripthtmlcss

Issues arise when a questionnaire is duplicated

Currently, I am working on a questionnaire that involves the cloning feature in jQuery using .clone(). The questions are answered using checkboxes with options for yes or no. These checkboxes are placed within a table and controlled by the following script ...

jqueryhtmllaravelcheckboxcheckboxlist

The Angular route seems to be unresponsive to a single click, but it starts functioning properly when clicked

I am utilizing a data service to handle all my asynchronous data operations. Whenever I click the ERASE button, a function is triggered to erase all data and return an object indicating the operation status (Success: true/false). If the value returned is ...

javascriptangularjsasynchronousroutesngroute

In the readmore.js script, position the "readmore" link within a div instead of outside of it

I have added annotations that vary in length, so I am looking to integrate the readmore.js plugin. To ensure uniform sizing for all annotations (even empty ones), I need to set a minimum height for the div container. <annotation> <div style="wi ...

javascriptjqueryhtmlcss

Adding and removing attributes with Jquery upon clicking a button

How can I make my listed items add an ID when clicked, or what am I doing incorrectly? $('.ex-menuLi #tt').attr('id', 'test'); $('.ex-menuLi').on('click', function(){ $(this).attr('id', &apos ...

javascriptjqueryhtmlcss

The payload is properly returned by the Reducer, however, the component is receiving it as

In my current project, I am developing an application that involves fetching data from a firebase database. This particular database does not require authentication, and I have already adjusted the access rules to allow for public access. One of the actio ...

javascriptreactjsfirebasereduxredux-thunk

how to display a font awesome icon within an option element using bootstrap

When iterating through options, I aim to display a check and times icon with each option. However, my code does not seem to be displaying the icons as expected: @foreach($findadminproducts as $a) <option value="{{ $a->id }}" >{{ $a-& ...

laravelbootstrap-4iconsstyles

Creating a default option in a Select tag with React when iterating over elements using the map method

After learning that each element in the dropdown must be given by the Option tag when using Select, I created an array of values for the dropdown: a = ['hai','hello','what'] To optimize my code, I wrote it in the following ...

javascriptreactjstypescript

In a perplexing twist, requests made to the Express app arrive with empty bodies despite data being sent, but this anomaly occurs

Welcome to the community of inquisitive individuals on Stack! I'm facing an interesting challenge while developing an Express app. Despite everything running smoothly with two routes, I've hit a roadblock with one route that seems to have empty i ...

javascriptnode.jsexpressroutesrequest

Steps for updating a property of an object using a function

I am working on a function that resets the deepest value of an object with variable depth to 0. I need this function to update the object's property outside of its scope. var data = { '1': { '10000': { ...

javascriptnode.jsrecursionpass-by-reference

Revolutionize Your App with React Native's Interactive Bottom Sheet Option

Hello there! I am trying to create a FlatList with multiple items, each of which should trigger a bottom-sheet when clicked. I want to make this dynamic but I'm encountering an error. TypeError: undefined is not an object (evaluating `_this[_reactNat ...

javascriptreactjsreact-nativebottom-sheet

processing an array using ajax form submission

Trying to manage an array that is returned from a PHP file after submitting form data. The value of the data after form submission is = ARRAY but I am unable to use this array in any way. Any suggestions on how to handle this array? Javascript: $(&apo ...

phpjavascriptjquery

Unexpected appearance of blank space to the right of my parallax design

Ever since a forced reboot, my parallax scrolling page has been experiencing issues. A strange whitespace seems to be throwing off the sections, only appearing every other section - one is fine, the next is offset, and so on. I've carefully gone thro ...

htmlcss

Dividing a JSON array by a specific key using lodash underscore

I'm on a quest to extract the distinct items in every column of a JSON array. Here is what I aim to convert : var items = [ {"name": "Type 1","id": 13}, {"name": "Type 2","id": 14}, {"name": "Type 3","id": 14}, {"name": "Type 3","id": 13}, {"na ...

javascriptjqueryunderscore.jslodashtext-processing