Changing the direction of the submenu to the left instead of the right

My Bootstrap 4 menu has a submenu that appears to the right of the main menu. However, since the menu is positioned on the far right of the screen, it gets cut off on the right side.

I'm looking for a way to make the submenu appear on the left side of the main menu instead of the right.

HTML:

<div class="dropdown dropdown-user-menu">
                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-option-vertical"></span>
                </button>
                <div class="dropdown dropdown-menu dropdown-typical dropdown-menu-right">
                    <a repeat.for="item of statusTypes" click.delegate="editProgramStatus(item)" class="dropdown-item">${item.name}</a>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-more">
                        <div class="dropdown-more-caption">Choose color...</div>
                        <div class="dropdown-more-sub">
                            <div class="dropdown-more-sub-in">
                                <a class="dropdown-item" href="#"><span class="font-icon font-icon-home"></span>Quant and Verbal</a>
                                <a class="dropdown-item" href="#"><span class="font-icon font-icon-cart"></span>Real Gmat Test</a>
                                <a class="dropdown-item" href="#"><span class="font-icon font-icon-speed"></span>Prep Official App</a>
                                <a class="dropdown-item" href="#"><span class="font-icon font-icon-users"></span>CATprer Test</a>
                                <a class="dropdown-item" href="#"><span class="font-icon font-icon-comments"></span>Third Party Test</a>
                            </div>
                        </div>
                    </div>

                </div>


            </div>

CSS:

     .dropdown-menu {
  border-color: #d8e2e7;
  margin-top: 6px;
  font-size: 0.8125rem /*13/16*/;
}
.dropup .dropdown-menu {
  margin-bottom: 6px;
}

(remaining CSS code omitted for brevity)

EDIT: I found this solution effective:

<div style="left: -95%;" class="dropdown-more-sub">
    <div class="dropdown-more-sub-in">
        <a class="dropdown-item" href="#"><span class="font-icon font-icon-home"></span>Quant and Verbal</a>
        <a class="dropdown-item" href="#"><span class="font-icon font-icon-cart"></span>Real Gmat Test</a>
        <a class="dropdown-item" href="#"><span class="font-icon font-icon-speed"></span>Prep Official App</a>
        <a class="dropdown-item" href="#"><span class="font-icon font-icon-users"></span>CATprer Test</a>
        <a class="dropdown-item" href="#"><span class="font-icon font-icon-comments"></span>Third Party Test</a>
    </div>
</div>
htmlcsstwitter-bootstrap-4

Answer №1

Remove the dropdown-menu-right class

It seems like you need to get rid of this class in your code

Answer №2

My innovative solution is to adjust the left margin to -95%.

It appears to be very effective.

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

"Preventing the propagation of a click event on an anchor tag with

Is there a way to prevent the parent anchor from executing its href when a child element is clicked, despite using stopPropagation? Here is the markup provided: <div id="parent"> <h5>Parent</h5> <a id="childAnchor" href="https:// ...

javascriptjqueryhtml

Ensure that the div is completely filled by the button and input elements

My dilemma involves filling a div element with a button and an input field. I'm struggling to set the exact width of the button, which is causing the input field to overflow the parent container. Despite many attempts with various properties, includin ...

htmlcssbuttoninput

Delay the fading in of an element using jQuery

Is there a way to remove the pause between the images in my JavaScript/jQuery slideshow when fading in and out? I attempted using a small delay, but it still didn't eliminate the blank space. Any suggestions? Check out the code on jsfiddle: https://j ...

javascriptjqueryhtmlcss

Utilizing BootStrap for a more Dynamic and Reactive Web Design

Here is the HTML code I am using along with bootstrap: <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div> & ...

htmlbootstrap-4

How to horizontally center a div with margin using CSS

Is there a way to horizontally center a div with margins using CSS? <div id="container"> <div id="center_me"></div> </div> #container{ position:relative; width:100%; height:400px; } #center_me{ position:absol ...

csshtmlcentermargin

Is there a way to create a dynamic associative array using jquery?

I am looking to create an array structured like the following:- arr[0][from] = value arr[0][to] = value arr[1][from] = value arr[1][to] = value . . And so forth. I have input array html elements for the from & to fields. <input type="text" name ...

javascriptjqueryhtmlarrays

Align three divs with three columns in the horizontal center

I am facing a challenge where I need to perfectly center 3 col3 divs in a row. Despite the calculation showing 1.5, I am unsure of the proper method to overcome this hurdle. <div class="row"> <div class="col-md-offset-2 col-md-3" style="height: ...

htmlcsstwitter-bootstrap

My image is being cropped on larger screens due to the background-size: cover property

I am currently in the process of designing a website with a layout consisting of a Header, Content, and Footer all set at 100% width. To achieve a background image that fills the screen in the content section, I utilized CSS3 with background-size:cover pr ...

cssbackground-image

How can I make a Bootstrap 4 modal autoplay an iframe on page load?

My website features a full-screen background video that plays upon loading, and I want the same video to play when a user clicks the play button to open a modal. However, my issue is that the modal video (iframe) starts playing in the background as soon ...

jqueryhtmlcsstwitter-bootstrap

How can you determine the dimensions of an image in HTML using Python?

Is there a way to extract image size information from source code using Python? tree = etree.HTML(source_page_text) image_list = tree.xpath('//img[@src]') The 'img' tags with 'src' attributes can be found using xpath as show ...

pythonhtmlcssimagexpath

How to utilize jQuery to eliminate HTML onchange code

This block of code features an HTML onchange attribute as well as the use of jQuery's change event on an input text. I want only the jQuery change event to take precedence. I have attempted to use both unbind and off without success. Can someone prov ...

javascriptjqueryhtml

Use jQuery to gather all the values from an HTML select element

I am using PHP to generate a HTML select option based on folders in a directory. Now, I am looking for a way to retrieve the value of the selected option in my jQuery script. I am familiar with $('#select :selected').text() and $(#select).val(), ...

jqueryhtmlhtml-select

How can I prevent the expansion of elements in a drop-down menu when using display:

I've been struggling to implement a drop-down feature in my menu. The issue is that when I use display: flex, hovering over the drop-down also expands all other boxes without drop-downs. Any ideas on how to fix this easily? Additionally, is there a w ...

htmlcssflexboxfrontend

Interactive div with dynamically generated click event

I need to add an onclick event to a button that is being generated dynamically via ajax. How can I achieve this? This is the code responsible for generating the content. When we click on an item, I want a popup window to appear. function retrieveTableDat ...

jqueryhtmlajaxlive

Troubleshooting navigation problems in AngularJS Bootstrap Navbar

Currently, I am working on integrating AngularJS with Bootstrap3 for a mobile application. In my index.html file, I have added a navbar (navbar-fixed-top) and there are forms loaded through partials/myform.html. However, when I scroll the page and a textbo ...

javascripthtmlcssangularjstwitter-bootstrap

When importing both shared-lib and MUI in my ReactJS application, I noticed that my custom MUI styles were being overwritten by the MUI styles

I have developed a shared library using React and Storybook. Within this library, I am utilizing the MUI V5 Button and making some style modifications using CSS modules. I executed the "build&pack" script in my library, which generated a tgz package that ...

cssreactjsmaterial-ui

To ensure proper functionality, make sure that Python Selenium's Geckodriver is correctly

I want to automate form filling using Selenium. Below is the HTML code for the form: <!DOCTYPE html> <html> <body> <h2>Text input fields</h2> <form> <label for="fname">First name:</label><br& ...

pythonhtmlseleniumwebautomation

Error message: JavaScript multiline strings within backticks are currently unsupported in Internet Explorer

My HTML string, stored in a variable, is being used to populate the innerHTML. Although the first example (using backtick syntax) is simple, it does not function in Internet Explorer 11. Is there a way to make the first example work in Internet ...

javascriptjqueryhtmlinternet-explorer

downloading responsive design

Using media queries to define backgrounds with separate images based on browser size: @media (min-width:1440px){div.container{background:URL('bg1440.png');}} @media (min-width:960px){div.container{background:URL('bg960.png');}} @media ...

htmlcssmedia-queries

Vue 2 does not properly transition the initial element when using the `mode=out-in` attribute

In my Vue project, I am using version 2.6.14 and trying to toggle between two buttons by utilizing v-if and v-else. Despite wrapping everything in a transition element, the first button doesn't transition smoothly, neither when appearing nor disappear ...

cssvue.jsvuejs2nuxt.jscss-transitions