The Bootstrap dropdown is causing a paragraph to have an overflow issue

When my paragraph text contains too many words, it tends to overlap.

Take a look at the code snippet below:

<a class="dropdown-item content btnOpen">
<div class="col-sm-12">
    <div class="row">
        <div class="col-md-2 p-1">
            <img id="notif_image" class="notif_image" src="sample.jpg">
        </div>

        <div class="col-sm-10">
            <h6>Here goes the title</h6>
            <div style="max-width: 500px; display:inline-block">
                <p style="word-wrap: break-word;"><small>flex flex flex flex flex flex flex flex flex flex flex flex flex flex</small></p>
            </div>
            <p><small><em>this is just a sample time</em></small></p>
        </div>
    </div>

</div></a>

This is the expected output:

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

htmlcssbootstrap-4

Answer №1

The crucial element in your code was left out. It pertains to a Bootstrap-Dropdown.

The issue arises from the .dropdown-item class having a white-space: nowrap; property. This is causing the overflow problem. To rectify this, you need to override this behavior. One way to do so is by using a custom class like this: 

.custom-dropdown-menu .dropdown-item { white-space: normal; }

.custom-dropdown-menu .dropdown-item {
  white-space: normal;
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="da8ac59ac5dabdb69a99cada94bcb17d"></a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="dropdown">

  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>

  <div class="dropdown-menu custom-dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item content btnOpen">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-md-2 p-1">
            <img id="notif_image" class="notif_image" src="https://picsum.photos/id/30/48/48">
          </div>

          <div class="col-sm-10">
            <h6>This the the title</h6>
            <div>
              <p><small>flex flex flex flex flex flex flex flex flex flex flex flex flex flex  flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex flex  flex flex flex flex flex flex flex flex flex</small></p>
            </div>
            <p><small><em>this is a sample time</em></small></p>
          </div>
        </div>

      </div>
    </a>

    <a class="dropdown-item content btnOpen">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-md-2 p-1">
            <img id="notif_image" class="notif_image" src="https://picsum.photos/id/32/48/48">
          </div>

          <div class="col-sm-10">
            <h6>This the the title</h6>
            <div>
              <p><small>flex flex flex flex flex flex flex flex flex flex flex flex flex flex</small></p>
            </div>
            <p><small><em>this is a sample time</em></small></p>
          </div>
        </div>

      </div>
    </a>

  </div>
</div>

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

tips for showing inlinesvg in internet explorer 8

Can anyone assist me with displaying inlinesvg polygons with links in IE8? Is there a jQuery script or any other solution available? <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width= ...

jqueryhtmlsvg

My div element isn't responding to border radius adjustments on the top left and right corners

I'm trying to achieve curved corners at the top left and top right of my div, but the border-top-left-radius and border-top-right-radius properties don't seem to work for me. Here is the HTML code: <div id="trape"></div> And the C ...

css

Utilizing Bootstrap Classes in ReactJS: A Comprehensive Guide

Is it possible to incorporate Bootstrap classes in a React application without actually installing the framework? If so, how can this be achieved and utilized effectively? I would greatly appreciate your assistance with this matter. ...

cssreactjstwitter-bootstrapnpm

The typeface displayed is Rubik Light Font instead of the regular Rubik font

I am currently working on incorporating the Rubik Font into my project: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> < ...

htmlcssfonts

What strategies can I use to address the issue of my column names being too long for SQL constraints?

I've come across a slight challenge while setting up my sql database. Developing a Questionnaire with numerous questions, I am using a PHP script to automatically generate the table when a user submits the questionnaire. The input names are used to na ...

phpsqlhtmlphpmyadmin

Is there a way to retrieve the value of an HTML variable using Selenium?

Seeking assistance in determining the progress value of a video using Selenium. I understand that I need to utilize JavaScript executor, but have been unsuccessful in finding a solution so far. The element in question is: <div aria-label="scrub bar" a ...

javascriptjavahtmlselenium

Steps for choosing the final block element within a recurring HTML structure using WebDriver

This is the HTML code. Looking to export the last block as a CSV, which can be found in a dropdown menu indicated by the following xpath: ".//*[@id='table-view-views']/div/div[1]/ul/li[12]/a/span" The highlighted element shares the same <div ...

pythoncssseleniumwebdriver

Ways to ensure text fits nicely within a container: HTML & CSS

Below is a code snippet: @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .square { max-width: 460px; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0. ...

javascripthtmljquerycsssass

How can you trigger a 'hashchange' event regardless of whether the hash is the same or different?

Having a challenge with my event listener setup: window.addEventListener('hashchange', () => setTimeout(() => this.handleHashChange(), 0)); Within the handleHashChange function, I implemented logic for scrolling to an on-page element whil ...

javascriptjqueryhtmltypescript

Is the table column width determined by the width of the data it contains?

I need to create a table with three columns. The last two columns should adjust their width according to the content they contain, leaving the remaining space for the first column (which has 100% width). Any suggestions on how to achieve this using CSS? C ...

htmlcsscss-tables

ACF alternating number repeater

I want to create a two-column layout using ACF repeater fields, where the content alternates between left and right columns based on whether the row is even or odd. Here's how the output will be structured: Row 1: Image (left column), Description (r ...

phphtmlwordpressadvanced-custom-fields

Enhance your Material UI Button with Advanced Text Alignment Options for Compact Screens

As a beginner in React and Material-UI, I'm attempting to customize a set of buttons within my app bar with background images for a cleaner look. Drawing inspiration from various online examples, I've managed to style them to my liking on larger ...

cssreactjsmaterial-uinext.js

A sleek fixed navbar in Bootstrap showcasing a shrunk logo positioned above the navbar

Is there a way to implement a fixed navbar with a parent logo using bootstrap? I would like the logo to shrink as you scroll, while still remaining visible within the fixed navbar. For a demo of the shrinking logo and navbar, you can visit: ...

htmlcsstwitter-bootstraptwitter-bootstrap-3navbar

Insert an array of objects into the td elements of a pre-existing table

Currently, I have a table where the td cells are intentionally displayed as blocks. My aim is to insert labels inside each of these td cells by creating spans with specific classes and then prepend them to the table cell. To achieve this, I am utilizing an ...

javascripthtmlarraysobject

CSS designs overlapping

I am facing an issue with a modal window that I dynamically load onto the client's website. The modal includes certain CSS styles, but sometimes these styles cause my form to break. For instance, I have an input with the class .my_btn { backgroun ...

css

What causes CSS to fail to load in React but work normally in Next.js?

We are currently experiencing an issue with a component located in a Git Submodule that is being used by both Next.js and React. While everything is functioning correctly in Next.js, React is unable to accept the way the CSS is being loaded: import styles ...

javascriptcssreactjs

Update the available choices in one select field based on the choice made in another

I am working on a feature where users can select their country, either USA or Canada. Currently, I have all the American states listed in one dropdown menu. However, I want this dropdown to change to display Canadian provinces when users select Canada. Bel ...

javascriptjqueryhtmlcssjquery-ui

Is there a way to conceal every element tag with just a single id name?

I am attempting to conceal specific tags by utilizing a single ID element, but it appears that it only hides the first tag associated with the ID element I used. Here is a demonstration: http://jsfiddle.net/mgm3j5cd/ How can I resolve this problem? I wan ...

htmlcssdom

Display a single unique value in the dropdown menu when there are duplicate options

Hey there, I'm currently working on retrieving printer information based on their location. If I have multiple printers at the same location, I would like to only display that location once in the dropdown menu. I am aware that this can be resolved at ...

javascripthtmlasp.netangulartypescript

What is the best way to eliminate all hover effects on smaller devices?

What is the solution to remove hover effects on elements in CSS? Consider the following HTML and CSS code: @media (max-width: 1220px) { .column { width: 200px; } .para { display: none; } .link:hover { color: red; } } @media (ma ...

htmlcss