Guide on aligning icons to the right within Bootstrap 4 dropdown elements with the help of CSS flexbox

Is there a way to create the menu below using Bootstrap 4 so that the icon on the right always stays visible, while the text is automatically truncated with an ellipsis (...) when it overflows?

<li class="nav-item dropdown">
    <a href='#' class='a nav-link dropdown-toggle' aria-expanded='false' data-toggle='dropdown'>Dropdown</a>
    <ul class='dropdown-menu' role='menu'>
        <li><a href="page1.html" class='dropdown-item' role='menuitem'>Long title</a></li>
        <li><a href="page2.html" class='dropdown-item' role='menuitem'>Cut off with</a></li>
    </ul>
</li>

I've tried displaying the icon using pseudo-element ::after, but that doesn't allow for applying ellipsis to the text. I also attempted using two DIVs with float-left and float-right, but that resulted in overlap issues.

I'm seeking a solution that avoids fixed widths. It seems like using CSS3 flexbox could be the right approach:

<li>
    <a href="page1.html" class='dropdown-item' role='menuitem'>
        <span class='title'>Long title</span>
        <span class='icon'><i class='fa fa-lock'></i></span>
    </a>
</li>

Accompanied by the following CSS:

.dropdown-item {display:flex; flex-direction:row}
.title {display:flex; margin-right: auto}
.icon {display: flex}

Unfortunately, this method doesn't seem to work as expected.

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

cssflexboxbootstrap-4

Answer №1

It is not necessary to explicitly set the width of the title for ellipsis to function. However, you must ensure that the width (either of the title itself or its parent element) is less than the content's width in order to trigger overflow. One way to achieve this effect is by setting the max width of the dropdown menu to 0:

.dropdown-menu {
    max-width: 0;
}

Additionally, in accordance with the original poster's suggestion, you can apply flexbox styling to both the title and the icon:

.dropdown-item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.dropdown-item .title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

HTML

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
        Dropdown link
    </a>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">
            <span class="title">Action</span>
        </a>
        <a class="dropdown-item" href="#">
            <span class="title">Long title another action</span>
            <i class="fa fa-lock fa-fw"></i>
        </a>
        <a class="dropdown-item" href="#">
            <span class="title">Cut off with another action</span>
            <i class="fa fa-lock fa-fw"></i>
        </a>
      </div>
  </li>

CSS

.dropdown-menu {
    max-width: 0;
}

.dropdown-item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.dropdown-item .title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Result

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

fiddle: https://jsfiddle.net/aq9Laaew/175868/

Answer №2

My solution addresses the issue at hand.

To ensure the ellipsis is visible, it is important to specify a width for the title. Without this width, the browser may not recognize when the text overflows.

.dropdown-item{
  position:relative;
}

.title{
    width: 130px;/*Adjust width to control ammount of text visible*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
    margin-right: 7px;
}
.icon{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<li class="nav-item dropdown">
  <a href='#' class='a nav-link dropdown-toggle' aria-expanded='false' data-toggle='dropdown'>Dropdown</a>
  <ul class='dropdown-menu' role='menu'>
<li>
    <a href="page1.html" class='dropdown-item' role='menuitem'>
        <div class='title'>Long title title title</div>
        <i class='icon fa fa-lock'></i>
    </a>
</li>
<li>
    <a href="page1.html" class='dropdown-item' role='menuitem'>
        <div class='title'>Long title title title</div>
        <i class='icon fa fa-lock'></i>
    </a>
</li>
  </ul>
</li>

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

Switch up the arrangement of layout rows and columns using Bootstrap and CSS

On my desktop screen, the order of cols in Bootstrap is as follows: COL-A COL-B COL-C <div class"container"> <div class="row"> <div class="col-lg-4 col-md-4">Text 1</div> <div class="col-lg-4 col-md-4"><img sr ...

cssbootstrap-4

Is it feasible to preserve the HTML form content data even after refreshing the page?

Can someone offer a suggestion that doesn't involve using Ajax? I'm wondering if there is a way to achieve this using JavaScript/jQuery or some other method. Here's my issue: When submitting a page, the action class redirects back to the sa ...

javascriptjqueryhtmlcss

Utilizing Bootstrap to set an image as a full-width background within a

I need a header for my webpage that includes a greeting and uses an image as the background. How can I set it up so that the image serves as the background for the container-fluid, but adjusts with the text to ensure full responsiveness? This is the heade ...

csshtmlbootstrap-4

The footer element is missing from the body section of the HTML code, causing the box shadow to not encompass the footer as intended

Having a problem in CSS where the footer is not appearing within the body element in the HTML code. The footer is placed between the body tags, but the box shadow defined for the body is not being applied to the footer. The code snippet below shows the CSS ...

htmlcss

Styling hyperlinks upon exporting an HTML table to Excel

I am trying to export an HTML table to Excel using JavaScript by following the instructions provided in Export HTML table to Excel its downloading table contents to the Excel. However, I have encountered an issue where one of the columns in my table conta ...

javascripthtmlcss

Tips for removing border highlight from an <select> element after being clicked

Is there a way to remove the border highlight (outline) of the <select> element after it is focused? I have successfully removed it for other elements like <input>, <textarea>, and <button>, but I'm struggling with the <sele ...

htmlcssbootstrap-4

Different color for background of division

I am working with a structure that looks like this: <div class="wrapper"...> <a href="#"...>blah</a> <div class="post"...>stuff</div> </div> This structure repeats multiple times on a dynamic page. I am looking f ...

javascriptjquerycssdompseudo-class

An effective way to emphasize the full area of a list item when hovering over it

Is there a way to modify the hover behavior of a list item in Fiddle? I'd like the black highlight to cover the entire area of the list item, without leaving any white space on top or bottom. Currently, it only covers the center area of the list item. ...

htmlcsslist

What is causing my Fabric.js canvas to malfunction?

Here is the link to my JSFiddle project: http://jsfiddle.net/UTf87/ I am facing an issue where the rectangle I intended to display on my canvas is not showing up. Can anyone help me figure out why? HTML: <div id="CanvasContainer"> <canvas id ...

javascriptjquerycsscanvasfabricjs

implement adding a division element to the DOM using the append

I am facing an issue with this particular code. The intended functionality is to create multiple divs in a loop, but it seems to be dysfunctional at the moment. Upon clicking, only one div appears and subsequent clicks don't trigger any response. < ...

javascripthtmlcss

How to perfectly center the Bootstrap Modal using CSS styling

Looking for a way to vertically align the Bootstrap Modal? I've attempted using CSS with no success. I tried this: .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } However, the modal still displays in t ...

css

How can I customize the styling of an SVG pseudo element using Font Awesome 5?

I've implemented font awesome 5 pseudo elements to attach an :after tag to my element as shown below: &:after { content: "\f068"; font-weight:400; color:$brandRed; float:right; font-family: "Font Awesome 5 Pro"; } The c ...

javascriptcssfont-awesomepseudo-elementfont-awesome-5

Unable to make boxes responsive to size changes in CSS when layered over video background

I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to ...

htmlcss

Tips for overlaying an image on a div regardless of its height

(!) Although this question may seem repetitive, I have not been able to find a suitable solution in any of the previous 10 topics. I apologize for the inconvenience and am actively seeking a resolution to this unique situation; Allow me to outline the iss ...

javascripthtmlcssimagemobile

Tips for crafting a table in Bootstrap with Vue Bindings

I recently started a Vue project and decided to use Bootstrap for styling. However, I encountered an issue with the table display, which looks weird as shown in the image below: https://i.sstatic.net/gRifL.png Here is a snippet of my code: <table clas ...

twitter-bootstrapvue.jsbootstrap-4

Calculate the quantity of rows within a specific div container

Looking at the image provided, there are multiple divs inside a main div. I am trying to figure out how many rows the main div contains. For instance, in this particular scenario, there are 5 rows. It is important to mention that the inner div is floated ...

javascriptjqueryhtmlcss

Change Class Depending on Vertical Scroll Position

Take a look at the Fiddle provided below: https://jsfiddle.net/y0mj6v2d/5/ I'm currently trying to figure out the most effective approach for determining when to apply or remove a class based on the vertical scroll position. My goal is to incorpora ...

javascriptjquerycss

List-group item in Bootstrap 4 featuring an arrow on the right side

Currently, I am utilizing Bootstrap 4 and are in need of developing a list-group featuring a title as well as an arrow positioned on the right side. This is what I currently have: <div class="accordion" id="accordionExample"> & ...

csstwitter-bootstrapbootstrap-4

Tips for maintaining an active link using CSS

I am looking to create a hover effect for links that remains active when the user is on a specific page. Essentially, I want a background to appear behind the link when it is visited. Below is the HTML code: <div class="menudiv"> <div id="menu"& ...

phphtmlcssmenu

The issue arises when attempting to apply CSS styles to an existing component or body tag,

I am currently working on an Angular 7 project where I have a requirement to dynamically load a component using routes. However, when I try to add styles for the body tag and existing component tags in the dynamically loaded component style-sheet, they do ...

cssangular