What steps can be taken to adjust the alignment of a Bootstrap Dropright menu so that it opens in an upward direction instead of the standard downward

My dropdown menu is dropping towards the right correctly, but it is going downwards and getting hidden under my page. I want it to open upwards instead of downwards.

I attempted to adjust the CSS, adding bottom:0 to the dropdown-menu, but unfortunately, it did not have the desired effect. I also experimented with nesting a dropdown-menu-right in a dropup, but the menu ended up being displayed in a top-right diagonal position, not aligned with the button.

Here is the complete code for my dropdown:

              <div class="dropright" style="position: relative;">
                <button class="btn btn-primary btn-block" style="font-size: large;" onblur="this.nextSibling.style.display='none'" onclick="this.nextSibling.style.display='block'" >
                  <img src="/assets/Images/Avatar.jpg"  class="rounded-circle" style="height:30px;width:30px; padding: 0;" alt="Avatar">
                </button>
                <div class="dropdown-menu" style="position: absolute;">
                  <a class="dropdown-item" href="">Action</a>
                  <a class="dropdown-item" href="">Another action</a>
                  <a class="dropdown-item" href="">Something else here</a>
                  <a class="dropdown-item" href="">Something else here</a>
                </div>
              </div>

Here is what I envision for my dropdown.

Here is the issue I am facing.

htmlcssdrop-down-menubootstrap-4

Answer №1

Are you anticipating something similar to

.dropup .dropdown-menu {
    top: auto;
    left: 35px;
    bottom: 100%;
    margin-bottom: -36px !important;
 }
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
  <br><br><br>
  <div class="dropup">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href=" ">APPLICATIONS</a></li>
        <li class="divider"></li>

      <li><a href=" ">Bitbucket</a></li>
      <li><a href="#">Jira </a></li>
    </ul>
  </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

Adjust the height of the container div for the carousel according to the length of the text displayed

My image carousel features description content positioned on the right for wide-screen windows. However, I want the description to shift below the images when the browser window reaches a certain breakpoint. The challenge I am facing is that the height of ...

javascriptjqueryhtml

What is the process for displaying or hiding a large image when clicking on thumbnail images?

How can I toggle the display of a large image by clicking on thumbnails? This is what I am looking for: Check out this JSFiddle version http://jsfiddle.net/jitendravyas/Qhdaz/ If not possible with just CSS, then a jQuery solution is acceptable. Is it o ...

javascriptjquerycssmobile-safari

Parent div is positioned absolutely with overflow set to hidden

I am facing a unique requirement where the parent div has an absolute position and the child div also has an absolute position. Inside the parent div, I have set overflow: hidden to hide the extra width of the child div. However, this setup is not working ...

htmlcss

Measuring the quantity of 'table' elements with jQuery

This HTML code below defines a table structure. Now tables can be dynamically added to this structure. <div class="tableStyle myWebsiteTable"> <table cellspacing="0" cellpadding="0" id="site0" class="site active"> <thead> ...

javascriptjqueryhtmlcssjquery-plugins

When provided with no input, the function will output true

I'm having trouble understanding this problem! I've implemented a basic jQuery validation that checks if an input field is empty when a button is clicked. http://fiddle.jshell.net/fyxP8/3/ I'm confused as to why the input field still retu ...

javascriptjqueryhtmlinput

Issue with implementing custom fonts using @font-face

I've added custom @font-face styling to my CSS using a downloaded font, but it doesn't seem to be working. Below is my CSS code: @font-face { font-family: "Quicksand"; src: url("fonts/Quicksand/Quicksand-Light.otf") format("opentype"); } The f ...

htmlcssfont-face

Creating a JavaScript function to selectively blur elements while leaving one in focus

My goal is to blur all elements on a webpage except for the p#this tag using vanilla JavaScript. I am determined to learn the intricacies of JavaScript, so I'm not looking for solutions involving jQuery or CSS. I came across a potential solution on t ...

javascripthtml

Unable to add data to an Array once subscribed to BehaviorSubject

Hello everyone, this is my first time asking a question here. I hope it's clear enough for you to understand :) Let's dive straight into the issue at hand. I have a query regarding a behaviorSubject variable in TypeScript that is not allowing me ...

htmlarraystypescript

prevent parent jQuery functions from interfering with child function execution

I am facing an issue with conflicting jQuery functions between parent and child elements. The child function is a bootstrap function, while the parent is a custom function. The main objective is to limit the height of the parent div (refer to the code belo ...

javascriptjqueryhtmlcsstwitter-bootstrap

Learn how to simultaneously play two audio files using the same identifier in JavaScript

I'm facing an issue with two audio files that have a progress bar and both have the same ID: <audio id="player" src="<?=base_url('mp3/'.$rec->file)?>"></audio> </p> ...

javascriptphphtmljqueryaudio

The navigation menu links that are meant to stay fixed at the top of the page are not functioning

On my website, I implemented Foundation's Magellan sticky menu at the bottom. Strangely, when I view the site in Firefox, the menu functions properly. However, when I try to open it in Google Chrome, the links don't work (and the cursor pointer d ...

jqueryhtmlcssgoogle-chromezurb-foundation

Attempting to arrange all the images in a horizontal display rather than a vertical one

This is my first ever question on the forum sorry if it is unprofessional hopefully i can learn from my mistakes on this post!! I put the question in the title but if you have any questions feel free to ask below THANK YOU! for the help! My Code ...

htmlcss

Step by step guide on creating a CSS triangle shape in front of a span element

Can you help me troubleshoot why my css triangle isn't displaying before my span? I've tried everything but it just won't show up. .triangle:before { width: 0; height: 0; border-top: 3px solid transparent; border-right: 6px solid ...

htmlcss

AngularJS templateUrl changes on page refresh``

I am currently using an angular packet template that consists of 11 pages, each with a corresponding button. The route code for this template is as follows: state('app.pagelayouts.fixedsidebar1', { url: "/fixed-sidebar", templateUrl: "assets ...

htmlangularjs

Ensuring the text remains positioned above another element constantly

Looking to have the text float above a regular box and resize the font size accordingly? Here's what I've tried: https://jsfiddle.net/a87uo3t2/ @import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono'); body { margin: ...

htmlcss

Semantic UI (React): Transforming vertical menu into horizontal layout for mobile responsiveness

I have implemented a vertical menu using Semantic UI React. Here is the structure of my menu: <Grid> <Grid.Column mobile={16} tablet={5} computer={5}> <div className='ui secondary pointing menu vertical compact inherit&apos ...

javascriptcssreactjssemantic-uisemantic-ui-react

Guidance on utilizing jQuery to display values depending on a dropdown selection

This code snippet displays movie data from a JSON variable in a dropdown list based on the selected city. It also needs to show the movie name and theaters list when a user selects a movie, along with the theater dropdown remaining unchanged. Here is my H ...

javascriptjqueryhtmljson

Is it possible to turn off GPU rasterization for a particular SVG element in Google Chrome?

There is a peculiar issue with the SVG graphic displayed on my webpage. On some computers, the complex linearGradient filling a Rect does not display all the Stops correctly, while on other computers it appears fine. I discovered that if I disable "GPU ra ...

htmlcssgoogle-chromesvg

Fetching data within a defined time range in Django

Currently working on creating my dashboard, the design is all set. However, I'm facing a challenge in retrieving specific data sums from my MySQL database. For instance, how can I retrieve the revenue of the last 15 days? models.py class JaGAnalytics ...

pythonhtmlmysqldjango

Tips for Utilizing Border-Radius in Safari

What is the best way to hide a child element's corners within its parent (#div1) Ensuring that the child does not overflow its parent container? ...

csssafari