Struggling to get the max-width property to function properly with a Bootstrap multi-level dropdown menu

I have a multi-level Bootstrap dropdown menu that I am customizing based on the design featured in this bootsnipp.

However, I am encountering an issue where some of my menu items are too lengthy, so I need to restrict their width to a maximum of 400px. Additionally, I want to ensure that the text does not get cut off, so I also need to use white-space: normal. Unfortunately, setting max-width seems to be ineffective in achieving this, while using width works as intended. But that's not the solution I'm looking for since different menus may require varying amounts of space.

Does anyone have suggestions on how to create a cascading menu that accommodates these requirements?

Appreciate any assistance you can provide!

htmlcsstwitter-bootstrap

Answer №1

Include the following code in your CSS stylesheet.

.dropdown-menu>li>a {
    white-space: normal;
    max-width:200px;
}

By using this code, you will be setting the maximum width of each anchor element to 200px.

If you opt for a size less than 160px, remember to adjust the min-width property of the dropdown-menu class as it defaults to a minimum width of 160px.

.dropdown-menu {
    min-width:110px;
}

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

Is there a way to automatically redirect a webpage based on the URL that is entered

Looking for a solution where a page checks a typed link upon loading, such as: www.test.com/myphp.php=10 If it detects a specific number, it should redirect to another link. For example: Upon finding www.test.com/myphp.php=10, it redirects to www. ...

javascriptphpjqueryhtmlajax

Sizing Bootstrap Carousel Controls

Is there a way to adjust the size of controls in the bootstrap carousel using CSS? I'm working with Bootstrap 4 and have attempted the following, but it only seems to reposition them. .carousel-contol-prev { height: 26%; top: 33%; wid ...

cssbootstrap-carousel

Issue with page break functionality during print preview

div.pagebreak { page-break-after: always; page-break-inside: avoid; } HTML <!-- Page separator --> <div class="pagebreak" style="float: none;"><hr class="hidden-print" /></div> <app-mud-chec ...

htmlcssangulartypescriptpage-break

What is the best way to horizontally align an inline div using CSS?

Is it possible to apply CSS to center an inline div that has an unknown width? Note: The width of the div cannot be specified beforehand. ...

csshtmlcenter

Font animation experiencing limited functionality

As a beginner in the world of programming, I am facing some challenges with my animation. The struggle lies in the fact that only my "Treats" are moving and not the "Tricks". Any guidance or suggestions would be greatly welcomed as I might have jumped into ...

htmlcsscss-animations

Customizing HTML Select Elements

Can the HTML Select attribute be customized to have a flatter appearance? Although I can set the border to be 1px solid, the dropdown part still appears 3D and unattractive. ...

htmlcss

Tips for including a wildcard in a MySQL query while using the '=' operator

I am working with pre parameters that determine the input for my query. For one scenario, I need to search for all UUIDs, while in another situation, I only want to look for specific UUID numbers. Instead of splitting this into two separate calls as shown ...

phphtmlmysql

Organize your information starting from the left and moving to the right

Currently, I am engaged in a project where I need to retrieve commands and showcase them on a screen. However, there seems to be an issue as the commands are appearing one by one and automatically moving down to the footer. What I actually want is for th ...

phphtmlcss

The Jquery Mobile 1.4.5 virtual keyboard on the device is causing the form inputs at the bottom of the page to become hidden

I am currently working on a web app using JQuery Mobile 1.4.5. Encounter an issue that seems to be related to either the browser or JQM bug specifically when using Google Chrome in fullscreen mode on Android (v.4.4.2). Upon clicking on the Click Here!! ...

javascriptandroidjqueryhtmljquery-mobile

What is the process for sending a request and obtaining a response from a REST API using JavaScript?

I have a private server set up on my computer with a built-in REST API. The base URL for the API is: . I am now looking to develop a client application for this server using the API. To authenticate on the server, the API endpoint is baseurl/login with the ...

javascripthtmljsonrestapi

Simple user interface height to occupy the entire browser window

Adding Tabs Dynamically ... I am attempting to design a layout using this example ... however, the issue is that the page does not utilize the full height and width of the available space... I have attempted adjusting the width and height to 100% of the ...

jquerycssjquery-easyui

Create a PDF document using the combined HTML content

I am facing an issue with generating a PDF from HTML content. My goal is to convert all the content within a specific div into a PDF. I have tested out a few converters, but they only seem to convert HTML files. I do not want to convert the entire HTML fi ...

phpjavascripthtmlpdf

The CSS styling in Internet Explorer 11 is causing cells to merge into the same column in a table

In my CSS-styled form that resembles a table, the two input elements are displaying on top of each other instead of side by side. How can I adjust them to appear next to each other? There is a possibility that this issue could be browser-specific. The for ...

htmlcssinternet-explorer

How can I ensure text remains within a parent div and is positioned above an image?

After writing the following HTML and CSS, an issue arose when resizing the page: <div style="position: relative;"> <img width="100%" src="images/some.jpg"> <div class="header"> <h1>my header</h1> ...

cssposition

Tips for extending the space between one element and another when the width decreases:

Currently in the process of building a website using HTML/CSS/JS and have run into an issue. My front page features an image with text overlay, where the image has 100% width and a fixed height of 487px. I positioned the text using position:relative; and t ...

javascripthtmlcss

What purpose does tagging serve in my template for polymer property binding?

I'm currently exploring the way Polymer handles the rendering of properties in a custom element's template. I've come across some interesting behavior that I haven't been able to fully grasp yet. Specifically, I noticed that certain pro ...

javascripthtmlpolymer

Exploring the World of 2D Array Animation

I'm in the process of creating a Pacman ghost using visual 2D arrays. I would like the ghost to move similar to this: https://i.sstatic.net/KPmUt.gif I am considering implementing CSS transitions for the movement, but I'm unsure about how to do ...

javascriptcssarrays

Make sure that the input field and label are aligned side by side in the

Is there a way to arrange the following HTML in the specified layout? <div> <div> <label>Counterparty</label> <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" ...

htmlcss

Verify the level of opacity in the image

I'm working on a website that allows users to upload PNG images and save them. However, before they can save the image, I need to check if it contains transparency. Is there a way to determine if an image is not 24-bit using JavaScript? <img id= ...

javascriptjqueryhtmltransparency

Employ a CSS3 media query within a Sass @for loop

Is it really achievable? For instance: @for $i from 1 through 12 { @media screen and (min-width: #{$i * 240}) { width: {$i * 240 + (20*($i-1)) } ; } } However, the issue I'm facing is Invalid CSS after "...nd (min-width: ": expected expre ...

cssmedia-queriessass