Looking to position a dropdown at the right edge using CSS grid?

I am currently in the process of familiarizing myself with css grid. My goal is to align a responsive drop down menu to the right using css grid techniques. I understand that there are numerous approaches to achieve this relatively straightforward task, but my preference is to utilize css grid for this purpose. I have integrated the dropdown code from bootstrap to hasten the process. However, I am encountering an issue where the dropdown is not aligned all the way to the right. Any assistance would be greatly appreciated.

/*
#mydiv ul{
    text-align:right;
}*/
/*#mydiv ul { list-style:none;}*/

#mydiv {
    grid-column-start: 250;
    grid-column-end:300;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<div class = "container" id="mydiv">
  <ul>
 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle dropdown-menu-right" href="#" id="mydiv" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
</div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a3a253a3a2f386420390a7b647b7b7a58727c">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kRlJKI" crossorigin="anonymous"></script>

htmlcssbootstrap-4css-grid

Answer №1

You've got an additional mydiv id attached to your dropdown link, it's best to remove it (I have removed it in my example). This could potentially cause issues down the line.

To exert more control over the position of the dropdown, consider utilizing columns within the grid and specifying which column should contain your element.

justify-self:end will instruct the element to adhere to the right edge of the column.

However, keep in mind that this might result in the dropdown being cut off at the right edge, so some adjustments may be necessary.

For further information on using CSS columns, check out this resource.

#mydiv {
  display: grid;
  justify-content: end;
  grid-template-columns: 70% 30%
}

#mydiv ul {
  grid-column-start: 2;
  grid-column-end: 2;
  justify-self: end;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<div class = "container" id="mydiv">
  <ul>
 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle dropdown-menu-right" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
</div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2928d92928790cc8891a2d3ccd3d4ccd2">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Answer №2

If you plan to utilize the grid feature, it is important to include that property. Here's a simple example to guide you:

#mydiv {
  display: grid;
  justify-content: end;
//your old properties
  grid-column-start: 250;
  grid-column-end:300;
}

Remember, when working with grid layouts, it is recommended to specify rows and columns.

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

unable to trigger Javascript using HTML form submission (listener malfunctioning)

My goal is to display the results of a user query submitted through a search bar on my website. However, I'm facing an issue with the HTML form not calling the necessary JavaScript file. Below is the HTML snippet containing the form: I tried incorpor ...

javascriptjqueryhtmlformslistener

Adjust the width of a div in Angular 6 based on a specified condition

I need to adjust the width of a div based on certain conditions. <div [ngStyle]="'width': selectedTab =='Home' ? '50%' : '100%'"> </div> The currently selected tab is stored in "selectedTab". There ...

htmlcssangularangular5angular6

Removing asp:FileUpload components will cause jQuery File Upload to malfunction

After successfully updating an old form to a new version, I encountered an issue with the old FileUpload tag. Transitioning to the jQuery Multiple File Upload Plugin for a more modern style has been smooth sailing, except that deleting the old FileUpload e ...

c#jqueryhtmlasp.netjquery-file-upload

Show and hide the responsive menu with a single click

I am currently working on creating a responsive menu. It is functioning properly, however, I am having trouble implementing an onclick effect in CSS. At the moment, I am using a hover effect. How can I make it so that when the screen width is less than 750 ...

javascriptjqueryhtmlcss

Social Engine is incapable of analyzing the HTML code

Currently working on a website using Social Engine 4.8.9 version that is still in development mode. Upon inspecting the html code with the chrome inspector, I find it incredibly complex to decipher. For instance, when I click on the login page link http:// ...

phphtmlcsssocial-networkingsocialengine

Ensure the central alignment of the focused item within the horizontal scroll

I have successfully implemented a horizontal scroll container using <HTML/> and CSS: body { background-color: #212121; } .scroll_container { height: 100px; width: 400px; display: flex; align-items: center; overflow-y: hidden; width: 1 ...

javascripthtmlcssuiscrollviewuislider

The display of a Bootstrap grid featuring three columns is not rendering accurately

In my bootstrap-4 layout, I have a 3 column grid where I want the middle column to be wider. However, adjusting the classes doesn't render the content correctly in the central column and makes the inner container thin. Even when I specify a width usin ...

htmlcssbootstrap-4

Troubleshooting the Checkbox Oncheck Functionality

Before checking out the following code snippet, I have a requirement. Whenever a specific checkbox (identified by id cfc1) is clicked, it should not show as checked. I have implemented the onCheck function for this purpose, but I'm struggling to fig ...

javascripthtmlreactjsmaterial-uiweb-component

Issue with jquery .click function not triggering after CSS adjustment

In the process of creating a fun game where two players take turns drawing on a grid by clicking <td> elements. Currently, I have implemented the functionality to toggle the background color of a <td> element from black to white and vice versa ...

javascriptjquerycssajax

When printing, the CSS for media print is not correctly displaying the table format

I have a basic table with a button underneath. This code snippet is located in the body section of my JSP file: <div id="myDivForPrint"> <table class="t1"> <tbody> <tr> ...

javascripthtmlcss

Uncertainty lingers over the location of where a JQuery javascript function is invoked in this particular code snippet

Hey there, I'm new to JavaScript and have a question about this demo website: The homepage header features a SlideShow created using a JQuery plugin called FlexSlider. The HTML section for this is as follows: <!-- Slider Section with Flexslid ...

javascriptjqueryhtmlflexslider

Unable to utilize first-child CSS to establish the display

I'm currently using WordPress and it's generating the following code: <aside class="left-hand-column"> <div class="textwidget"> <p></p> ...1 <div class="pdf-download"> <p> ... 2 <a href="http ...

htmlcss

Is the use of the auto image attribute height/width impacting rendering performance?

Currently, I am facing an issue with setting the height and width attributes for an image as I do not have access to its dimensions from the server. One solution I am considering is setting both the width and height values to auto. For example: img { ...

htmlcssimage

Implementing HTML content within a jQuery image slider: A step-by-step guide

My goal is to create a unique page layout where the header, navigation bar, buttons, headings, paragraphs, and other content are all displayed on a slideshow. However, I'm facing an issue where when I add content to the div container or body, it doesn ...

javascriptjqueryhtmlcss

Javascript is unable to find the ID of an HTML form

Struggling with a basic HTML form and a JavaScript form validator that aims to verify input in the "first name" field. However, I'm having trouble retrieving the first name form value to validate it properly in JS. Below is the relevant HTML code sni ...

javascripthtmlforms

Turn off the special treatment of the "class" attribute

The Background: When using BeautifulSoup to parse HTML, the attribute class is considered a multi-valued attribute and is treated differently: It's important to remember that a single tag can have multiple values for its "class" attribute. When se ...

pythonhtmlbeautifulsouphtml-parsing

What is the best way to contain several elements in a flexbox with a border that doesn't span the entire width of the page?

Just dipping my toes in the waters of web development and I've come across a challenge. I'm attempting to create a flexbox container for multiple elements with a border that doesn't stretch across the entire width of the page, but instead en ...

htmlcssflexboxresponsive-design

Could it be a problem with collision detection or an issue in my

I experimented with jQuery and HTML5 Canvas to create a prototype showcasing movement using a tile map algorithm. My challenge lies in the abnormal behavior of collision detection. To elaborate, when I move horizontally (left or right), the collision is co ...

javascriptjqueryhtmlhtml5-canvascollision

Vue.js is experiencing functionality issues on mobile devices and other connected devices, however, it is operating smoothly on desktop devices when localhost is running

I recently ran into an issue while trying to run my Laravel project on localhost and connect it to other devices like mobiles and desktops/laptops using the local address. The function works perfectly on the hosting desktop but fails to work on other devic ...

javascriptphphtmllaravelvue.js

Solid background color for a stationary panel

Looking to create a seamless background color for a column within a fixed container. Check out my example here. Any tips on achieving this? I experimented with a few approaches, but couldn't get any of them to work... Attempt 1: @import '~boot ...

csstwitter-bootstrapbootstrap-4