I am experiencing an issue where the borders of a dropdown menu do not properly wrap around

I'm currently in the process of creating a dropdown menu that will display a list of articles along with the respective authors' images next to them. Initially, I intended to utilize Bootstrap 4's "card" system for this task. However, I encountered an issue where the author images could only be positioned either above or below the article titles on the cards. As a workaround, I opted for a standard div element within a dropdown list instead. Despite this adjustment, I am facing a challenge with the default CSS provided by Bootstrap not properly wrapping around the length of my fictional article titles as it is supposed to.

Refer to the image below for visualization.

https://i.sstatic.net/LA4Bz.jpg

The header element resides within the dropdown-menu div, so I am unsure why the CSS styling is behaving unexpectedly. Other than implementing hover color changes that are outside of the default Bootstrap 4 CSS, there are no other specific customizations. The solid border surrounding the entire menu row is simply included for visual reference and will eventually be removed.

Below is the snippet from my HTML code:

<div class="row">
            <div class="col-6" style="border: 1px solid;">
                <div class="btn-group" id="newsbtn">
                    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-newspaper-o" aria-hidden="true" style="color: white;"> Latest News & articles</i>
                    </button>
                    <div class="dropdown-menu">
                          <a class="dropdown-item item-list" href="#">
                            <div class="row">
                                <div class="col-sm-4 col-xs-4 no-padding photobox">
                                    <div class="add-image">
                                        <img class="img-thumbnail no-margin" src="1.jpg"
                                             alt="img">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <h6>The most popular 80s pedals on Reverb</h6>
                                    <span class="row pl-3">Johnna B. Goode</span>
                                    <span class="info-row text-muted">
                                        <span class="date">
                                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                                            <small> Today 9:20 am</small>
                                        </span>
                                    </span>
                                </div>
                            </div>
                          </a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">
                            <div class="row">
                                <div class="col-sm-4 col-xs-4 no-padding photobox">
                                    <div class="add-image">
                                        <img class="img-thumbnail no-margin" src="10.jpg"
                                             alt="img">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <p>Gibson vs. Epiphone: The Sound Matters</p>
                                    <span class="row pl-3">Damon Wayne</span>
                                    <span class="info-row text-muted">
                                        <span class="date">
                                            <i class="fa fa-clock-o" aria-hidden="true"></i> 
                                            <small> Yesterday</small>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Article 3</a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a href="#" class="btn btn-block" id="viewallbtn">View all articles</a>
                    </div>
                </div>
            </div>

Answer №1

To ensure proper alignment in your drop-down menu, be sure to include display:inline-block; for all inner elements.

Consider using a dedicated CSS file for easier management of styles.

Your CSS file should include the following code snippet:

.dropdown-menu div
{
  display:inline-block;
}

This styling will be applied to every div within the dropdown menu.

If any elements within the dropdown are misbehaving, you can use the following code to keep each element on the same line:

.dropdown-menu div {
   clear:both;
   float:left;
}

Answer №2

experiment with this css code:

.navigation-dropdown .item-dropdown {
    display: block;
}

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

Modify the textfield label color using Material-UI

Hey there! I'm running into a little issue when trying to change the color of the text label in a MUI text field. I've successfully customized the border colors and hover states, including the label, but for some reason, I can't seem to get ...

Modifying the appearance of the login field shown in the image

How can I align the login and password fields in the same order on my webpage? When I attempt to adjust their positions using CSS margin commands, both fields end up moving. Any suggestions? ...

Creating a personalized v-for loop with v-if to apply a specific class to a div element

How can I correctly utilize v-if when using v-for inside? I am aiming to implement a condition where if the index is 0 or it's the first data, then add an active class. <div class="item active" v-for="(item, key, index) in slideItem" :key="item._ ...

What is the best way to add content to a TextArea generated by the html helper in MVC 3?

I am attempting to retrieve a List collection of comments from the View using Razor and Microsoft's HTML helper for TextArea (@Html.TextAreaFor). While I can populate individual comments easily, I am unsure how to add the ENTIRE list collection of com ...

Tips for customizing the event target appearance in Angular 2?

After following the steps outlined in this particular blog post (section 3, event binding), I successfully added an event listener to my component class. I can confirm that it responds when the mouse enters and exits. <p class="title" (mouseenter)="unf ...

Guide on submitting a multi-step form using jQuery

Greetings, I am in need of assistance with submitting a jQuery step wizard form. Although I have a plugin that helps, it primarily uses jQuery rather than HTML. So far, I have accomplished the following steps: - Set up the necessary database and table - C ...

Permitting the inclusion of decimals in the isNaN function

My script currently has the capability to input a number in one textbox and calculate its equivalent in other textboxes. $("input[type=text]").keyup(function () { var number = parseFloat($(this).val()); var inc = parseFloat($(this).attr( ...

Executing functions in TypeScript

I am facing an issue while trying to call a function through the click event in my template. The error message I receive is "get is not a function". Can someone help me identify where the problem lies? This is my template: <button class="btn btn-prima ...

Utilize jQuery to showcase elements in a dropdown menu

Hey everyone, I'm working on an ASP.NET MVC4 project and I'm using a jQuery script on the edit page. However, I am encountering an issue with displaying elements on the page. Here is the initial HTML markup of my dropdown before any changes: & ...

The issue with Ajax.BeginForm OnSuccess is that it prevents the CSS transition from functioning properly

Apologies if the title is unclear. In my design, I aim to implement a transition effect when the left or right buttons are clicked. However, the transition does not function as expected because the OnSuccess callback seems to occur before the page is rend ...

Using jQuery to remove the 'active class' when the mouse is not hovering

I recently came across this amazing jQuery plugin for creating slide-out and drawer effects: However, I encountered a problem. I want to automatically close the active 'drawer' when the mouse is not hovering over any element. The jQuery plugin c ...

Hide the menu when a user taps on an item on mobile or tablet devices

I'm facing a unique challenge and could use some guidance. The issue is with the mobile version of my website, accessible at . On tablets or mobile devices, the menu is condensed into a button. To navigate through the menu, I have to click the button ...

Multiplication cannot be performed on operands of type 'NoneType'

Hello everyone, I am attempting to calculate the unit price and quantity from this table using the following model: class Marketers(models.Model): category =models.ForeignKey(Category, on_delete=models.CASCADE, null=True) name =models.CharField(max ...

Customizing Bootstrap Navigation: Creating Space Between Menu Items

I've configured my Bootstrap navigation with a dropdown toggle for "Coverage". I'm looking to decrease the spacing between each list item (li) under this dropdown. What CSS setting should I use to achieve this? Interestingly, when I apply float: ...

optimal application of css with jquery

I have a question about using jQuery to set the padding of a class or id. I am able to successfully change the height of an element with this code: $('.menu').css({ height: '90px' }); But now, I need to apply a specific CSS rule in jQ ...

Applying a CSS style to a division element

Can I modify the style attribute of a div element using JavaScript? <div style="color:#0000FF"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div> I am interested in achieving the following: Changing th ...

What is the best way to incorporate arrow buttons on my website in order to unveil various sections on the homepage?

A colleague and I are collaborating on a website for his cookery business. He has sketched out some design ideas on paper, one of which involves having a homepage with 4 different sections stacked on top of each other. Each section would have an arrow butt ...

Tablet-friendly dropdown menu

Seeking advice on implementing @media queries for tablets with a width of 991px. Currently, the CSS file is optimized for mobile devices but needs adjustments for tablet responsiveness in the dropdown menu. I attempted the following CSS code: @media (max ...

Modify th:hover in CSS to alter the background color

I currently have a table structured as follows: <table class="cedvel"> <caption> count: <%:Html.Encode(TempData["RowsCount"])%></caption> <thead> <tr&g ...

Issue displaying content in a two-column setup on Chrome and Mozilla browsers due to ASP problem

I've encountered an issue with a footer appearing incorrectly in Chrome and Mozilla browsers when using a 2-column layout, although it displays fine in IE8. Currently, I'm coding in asp with css includes to render the footer. Here's the CSS ...