I have an operations field in a table. Clicking on this field opens the dropdown. The dropdown that opens remains in the table and automatic scrolling appears. How do I get the dropdown dropdown table out of the way.
HTML
<td>
<div class="dropdown">
<button type="button" class="btn btn-sm dropdown-toggle hide-arrow py-0" data-bs-toggle="dropdown">
<i data-feather="more-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
<i data-feather="edit-2" class="me-50"></i>
<span>Stok Hareketleri</span>
</a>
<a data-idd="#item.StokID" class="dropdown-item btnSil" href="#">
<i data-feather="x" class="me-50"></i>
<span>Sil</span>
</a>
</div>
</div>
</td>
CSS
position: absolute;
inset: 0px auto auto 0px;
margin: 0px;
transform: translate(-124px, 26px);
display:block;
Increasing the z-index would get the job done for you
.selector {
z-index: 1000
}
Related
After opening drop-down, while scrolling the list is sticking on top or bottom of the div. I tried changing positions of parent div and drop list. But couldn't figure it out. Is there any way to make drop-list it scroll along with the button?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card">
<div class="dropdown mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
<div class="dropdown mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<div class="dropdown mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
<div class="dropdown mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
</div>
</body>
</html>
.card {
height: 150px;
width: 30%;
border: 2px solid black;
margin: 100px 0px 0px 100px;
overflow: auto;
}
When the menu gets out of boundaries, the js of bootstrap makes it stick to the boundaries to keep the menu stay by adjusting the position.
When it gets out of boundaries, bootstarp put x-out-of-boundaries attribute to recognize it.
You can use this to achieve it.
.dropdown-menu[x-out-of-boundaries] {
transform: translate3d(0px, 30px, 0px) !important;
}
You can adjust the position as you want.
Here is an example.
My drop-right menu drops towards the right correctly, but downwards, which causes it to hide under my page. I want it to open upwards instead of downwards.
I tried fiddling around with CSS, adding bottom:0 to the dropdown-menu, but it didn't work. I have also tried nesting a dropdown-menu-right in a dropup but the displayed menu is not in line with the button (it is at the top-right diagonal).
This my complete code for the 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>
This is what I want
This is the problem
Are you expecting like
.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>APPLICATIONS</li>
<li class="divider"></li>
<li>Bitbucket</li>
<li>Jira </li>
</ul>
</div>
</div>
I have created a dropdown in button hover,
I also try the transition css property on my code but its not working to come dropdown smoothly.
This below code is bootstrap dropdown code please suggest me to where i put the right code
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
}
.dropdown:hover > .dropdown-content {
display: block;
top: 35px;
}
<div class="dropdown p-0">
<button type="button" class="btn btn-icon btn-light" data-toggle="dropdown" aria-expanded="false">
dropdown
</button>
<div class="dropdown-arrow"></div>
<ul class="dropdown-menu dropdown-menu-right dropdown-content">
<li> <a class="dropdown-item"><i class="fe fe-file-text mr-2"
aria-hidden="true"></i>Add Task</a></li>
<li> <a class="dropdown-item"><i class="fe fe-zap mr-2"
aria-hidden="true"></i>Add Risk</a></li>
<li> <a class="dropdown-item"><i class="fe fe-trending-up mr-2"
aria-hidden="true"></i>Add Milestone</a></li>
<li> <a class="dropdown-item" ><i class="fe fe-trash-2 mr-2"
aria-hidden="true"></i>Remove Me form This Project</a> </li>
<li> <a class="dropdown-item" ><i class="fe fe-edit mr-2"
aria-hidden="true"></i>Edit</a> </li>
<li> <a class="dropdown-item"><i class="fe fe-check-circle mr-2"
aria-hidden="true"></i>Complete</a></li>
</ul>
</div>
Since you didn't share all the code, first of all you can't add transition at display property, you didn't add transition for top property.
Try to hide .downtown-content with transform: translateY(-100%), and then in hover
transform: translateY(0); transition: all .25s linear (or add your transition here)
here i need the dropdown button to be transparent but if i do background:transparent; only visible thing is the border, i need it to be the arrow icon that appears inside the dropdown button and the right border.
here is the code
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
<< This is what I need it to be
Something like this?
.dropdown-toggle {
background:transparent;
color: black;
border-width: 0 1px 0 0;
}
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Here with bootstrap: https://codepen.io/anon/pen/EGZNKd
The arrow is white, so when you make the background transparent, if the background behind that is also white you can't see it. So I made it black to make it visible.
Note: this css selector will change all dropdown buttons so you'll probably want to make it more specific.
Edit: updated to show the right border.
I have a drop down menu that opens a row of icons underneath it (see picture 1, names and pictures were removed to maintain privacy)
I am trying to make this menu to open to the right of choose child, and not underneath it (see picture 2, of what I am trying to get. the Images will open to the right of the drop down and not under it)
My current code is:
<div class="span4">
<div class="btn-group">
<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
<h3>Choose Child</h3>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<div class="btn-group">
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>A</h5>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a>
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>J</h5>
<img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a>
</div>
</li>
</ul>
I tried to use the following example, that helps push the drop down to the left
how to make twitter bootstrap submenu to open on the left side?
but I could not figure out a way to use this to what I am looking to do
Thanks
How does this look:-
Demo
Demo2 Submenu dropping down.
<div class="span4">
<div class="btn-group"> <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
<h3>Choose Child</h3>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent">
<span class="right-caret right"></span>
</a>
<ul class="dropdown-menu rightMenu">
<li>
<div class="btn-group"> <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>A</h5>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a>
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>J</h5>
<img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a>
</div>
</li>
</ul>
</div>
css
.rightMenu {
position:relative;
float:right;
}
.right-caret {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #000000;
display: inline-block;
height: 0;
opacity: 1;
vertical-align: top;
width: 0;
}
.right
{
float:right;
}
Just add the class "pull-right" into the <ul class="dropdown-menu"> this way...
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
I just add this class to the dropdown-menu:
.rightMenu {
position:absolute;
float:right;
top: 0;
left: 160px;
}
And it aligns perfectly.
To those who may find this page in the future, the now official way of doing this is with adding the .dropdown-menu-right class to your dropdown list.