Want to align a dropdown to the right end using css grid - html

I am learning to use css grid. I want to align a responsive drop down to the right using css grid. I am aware that there would be many ways to get this simple requirement done, but I want to get it done using css grid. I have taken the dropdown code from bootstrap for quick work. Code is below. the dropdown is not aligned to the right extreme. Please help.
/*
#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/popper.js#1.16.0/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>

You have an extra mydiv id on your dropdown link, you should remove it (removed in my example). Otherwise it may mess you up later.
Also, to have more control over where the dropdown appears, you can use columns in the grid and tell the rendering engine which column to place yur element in.
justify-self:end will tell the element to stick to the right edge of the column.
However, this makes the dropdown to be cropped onn the right edge, so you may need to play around with it.
More details on css columns
#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/popper.js#1.16.0/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>

If you are going to use grid then you need to add that property.
Very basic example what may help you is this:
#mydiv {
display: grid;
justify-content: end;
//your old properties
grid-column-start: 250;
grid-column-end:300;
}
Anyway taking into account that for grid it is better to specify rows/cols.

Related

alignment of elements in a button

I have a bootstrap drop down and on the button, I have a text and an icon. What I want is to align the text all the way to the left and align the icon all the way to the right without having to grid the button with other elements. Thanks in advance.
.dropdown {
display: flex;
width: 40%;
height: 10vh;
border: none;
}
.dropdown button {
font-size: 1.8vw;
color: #ffffff;
width: 100%;
height: 100%;
border: none;
}
.dropdown button i {
font-size: 1.8vw;
margin: auto;
}
.dropdown button::after {
display: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
drop me
<i class="fa-solid fa-angle-down"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Most of your CSS are not needed, you can use some of bootstrap's utility classes to achieve the expected result.
You don't have to use .dropdown button::after{} to remove bootstrap's default dropdown caret. Just remove .dropdown-toggle from the button.
You can then use this d-flex justify-content-between align-items-center class to align the text and the icon.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary w-100 d-flex justify-content-between align-items-center" type="button" data-bs-toggle="dropdown">
drop me
<i class="fa-solid fa-angle-down"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Why isn't my Bootstrap 5 dropdown menu working?

Recently, I have started web developing and I am using bootstrap v5.0 to build a website. Following is the code of a file named "grage.php", and its code is stated below,
<!-- HERE SHOULD BE THE CODE OF GARAGE -->
<div class="container-fluid">
<div class="row">
<!-- CODE FOR OPTIONS-->
<div class="col-3" style="align-items: center;">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<!-- CODE FOR DISPLAYING MODEL -->
<div class="col-7">
<div style="align-items: center;">
<model-viewer src="car_models/compressed_civic.glb" alt="A 3D model of an astronaut" ar ar-modes="webxr scene-viewer quick-look" environment-image="neutral" auto-rotate camera-controls>
</model-viewer>
</div>
</div>
<!-- CODE FOR DISPLAYING CHOOSED OPTION'S AND ETC-->
<div class="col-2">
<p>Here should be the code for option's</p>
</div>
</div>
</div>
<!-- ADDING FOOTER -->
<?php
include "headerAndFooter/footer.php";
?>
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js"></script> -->
<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/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
I am having problem as the dropdown function is not working as shown below, Dropdown Image
Note: I have added the bootstrap css CDN link in the header.
Please let me know, how to resolve this problem.
I am using bootstrap v5.0
But you've loaded bootstrap 4. That's why it's not working. Bootstrap 4 uses data-toggle="dropdown" and bootstrap 5 uses data-bs-toggle="dropdown". You need to load the right JavaScript/CSS for it to work.
Bootstrap 4 Example:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
Bootstrap 5 Example:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
You need to make sure you're using the Bootstrap 5 CDN that includes Popper:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"crossorigin="anonymous"></script>
From the bootstrap 5 installation guide: https://getbootstrap.com/
Also is important donĀ“t include more than one script like
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
Because not working. Only needs ones like says Nick
I used bootstrap 5 drop-down toggler with reference to 1st comment with snippet.
I faced problem during to close menu after onclick why is this so and it is working perfectly in your case

Dropdown menu not showing the listed elements when hovered

For some reason this dropdown menu is not showing the listed elements when hovered. Using bootstrap.
Am I missing something here? Maybe it's something simple but I just cannot see it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Services -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Rewiring</a>
<a class="dropdown-item" href="#">Light Fixes</a>
<a class="dropdown-item" href="#">Showers</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Rewiring</a>
<a class="dropdown-item" href="#">Light Fixes</a>
<a class="dropdown-item" href="#">Showers</a>
</div>
</li>
In Bootstrap, dropdown runs by default on mouse click, if you want to show dropdown on mouse hover then you have to use css or js
I have used css
.dropdown:hover ul.dropdown-menu{ display: block; }
.dropdown:hover ul.dropdown-menu{ display: block; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Services
</button>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Rewiring</a></li>
<li><a class="dropdown-item" href="#">Light Fixes</a></li>
<li><a class="dropdown-item" href="#">Showers</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Rewiring</a></li>
<li><a class="dropdown-item" href="#">Light Fixes</a></li>
<li><a class="dropdown-item" href="#">Showers</a></li>
</ul>
</div>
More things to talk about here:
Opening dropdown in BS is done by Popper.js (which is not part of bootstrap.min.js). So in order to make dropdown working, you need to load Bootstrap JS via bundle, where Popper.js is included
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js
Since you are using BS5, you need to change data-toggle="dropdown" to data-bs-toggle="dropdown". That is new markup from version 5 onwards.
As mentioned in another answer, opening dropdown on click (and not hover) is core part of BS philosophy (unfortunately). So in case you want to open submenu on hover, additional CSS has to be added.
Also be careful with the markup. It would be more clean to use the structure recommended by BS for the navigation (using <ul>, <li>, etc.)
change <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
to
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button>
Change it to a button then it shoud work!!
I have found the solution:
This was the line causing trouble.
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>
I simply just added the following via Bootstrap:
aria-haspopup="true" aria-expanded="false"

Right align single element

I want to right align a single element in a dropdown list with Bootstrap 5. Usually I use "justify-content-end" for it, but this does not do so.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
This is just the example from the bootstrap homepage. I tried "justify-content-end" at <li> and at <a> tag. For example, I only want "Another action" to be right aligned, the other two left aligned.
Each element with a class of dropdown-item is set to display: block (meaning it takes up the whole width of the parent element). If you want the text of "Another Action" to be right aligned, means you need to set a class of text-end on the <a> element

Set dropdown button width to same as dropdown item width

I have a dropdown div and its button width is different from that of its dropdown items. I want the button and the dropdown items to have the same width.
<div class="dropdown col">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a form</button>
<ul class="dropdown-menu col-xs-12">
<a class="dropdown-item" href="#">word</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">word</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Very long word</a>
</ul>
</div>
The width of Very long word item is the same as that of word items, only the button that has a different width.
One way to do that would be to wrap the button and the dropdown menu to a new div and set your desired width in it (I've set a width of 200px for the example), then just making its children (button + dropdown menu) inherit their parent's div width (width: inherit !important;) like so :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="dropdown col">
<div style="width: 200px;">
<button style="width: inherit !important;" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a form</button>
<ul style="width: inherit !important;" class="dropdown-menu dropdown-menu-center">
<a class="dropdown-item" href="#">word</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">word</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Very long word</a>
</ul>
</div>
</div>
I'm not sure from your tags if you're looking for a bootsrap specific answer, but one option would be to set the parent, .dropowncontainer to display: flex with flex-direction:column, expanding the child items on the flex parents primary axis.
.dropdown {
display: flex;
flex-direction: column;
}