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.
Related
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
}
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.
i have just started learning web development and I have been facing a few issues related to the alignment of tags, buttons and icons.
Here are the issues I'm facing:
The brand name is not in line with the a tags. i tried display:inline; in every class but its not working.
the social media tags are hanging in mid air, I want them to be in line with the a tags. Again, i tried reducing the margin, padding and using the inline command but nothing seems to be working.
the bootstrap search button is also hanging mid air. I want all the above three to be in line.
Here's a screenshot of the page.
And here's the code
header {
background: #669999;
color: white;
padding: 5px 5px 5px 15px;
}
.fontsize {
color: white;
margin: 0px 0px 0px 10px;
font-size: 25px;
padding: 5px;
}
.icon {
float: right;
list-style-type: none;
margin: 0px 10px 0px 10px;
padding: 5px;
display: inline;
}
body {
margin: 0px;
}
.colors {
margin: 5px 10px 5px 10px;
padding: 10px;
color: white;
}
a:hover.colors {
color: black;
text-decoration: none;
}
.picturefont {
font-size: 25;
font-style: italic;
}
.whitespace {
padding: 10px;
margin: 50px;
}
#margin {
margin: 0px;
}
.frontpageimage {
width: 90%;
display: inline;
border: 1px solid black;
}
<h1 class="fontsize"> Brand name </h1>
<nav>
<a class="colors" href="home.html"> Home </a>
<a class="colors" href="contact.html"> Contact </a>
<a class="colors" href="recipe.html"> Recipes </a>
<a class="colors" href="order.html"> Order </a>
<ul>
<li class="icon">
<img src="icon-insta.png">
</li>
<li class="icon">
<img src="fb-icon.png">
</li>
<li class="icon">
<img src="phone-icon.png">
</li>
</ul>
</nav>
<form id="margin" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<!-- <li>Link</li> -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<body>
<div class="row">
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="oreo-cake.jpg"></a> Chocolate Cake</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="kitkat-cake.jpg"></a> Rasberry Sponge Cake
</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="green-cake.jpg"></a> Red Velvet Cake</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="KitKatCake3.jpg"></a> Mango Rose Tart
</div>
</div>
<div id="slider">
<div id="slider2">
<img id="choclatecake" src="oreo-cake.jpg" alt="Moist Chocolate Cake" />
<img id="choclatecake" src="kitkat-cake.jpg" alt="Moist Chocolate
Cake" />
<img id="choclatecake" src="green-cake.jpg" alt="Moist Chocolate Cake" />
<img id="choclatecake" src="KitKatCake3.jpg" alt="Moist Chocolate
Cake" />
</div>
</div>`
Forgive me for the improper format but I'm new here. Hoping to find some answers. Thanks
From my experience, the best way to organize the layout of a web page is to use tables (rows and columns). Start by sketching the layout and imagining boundaries around the items of your website.
I suggest that you use Bootstrap stylesheet by including the CSS file at your page header
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Then using the CSS classes row and .col-md-* for div containter element classes.
Refer to the page (https://getbootstrap.com/docs/3.3/css/#grid-example-basic) for code examples.
Your structure might be something like the following:
<div class="row">
<div class="col-md-8">Brand name</div>
<div class="col-md-4">social media tags</div>
</div>
<div class="row">
<div class="col-md-6">navigation</div>
<div class="col-md-6">search</div>
</div>
<div class="row">
<div class="col-md-12">Body</div>
</div>
You need to put h1 tag inside nav tag.
You have closed the nav tag before starting form and you have another closing nav tag later.
Same reason as above.
Try it like this:
<nav>
<h1 class="fontsize"> Brand name </h1>
<a class="colors" href="home.html"> Home </a>
<a class="colors" href="contact.html"> Contact </a>
<a class="colors" href="recipe.html"> Recipes </a>
<a class="colors" href="order.html"> Order </a>
<ul>
<li class="icon">
<img src="icon-insta.png">
</li>
<li class="icon">
<img src="fb-icon.png">
</li>
<li class="icon">
<img src="phone-icon.png">
</li>
</ul>
<form id="margin" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</nav>
#Student, you have a lot going on here, but most of your issues revolve around malformed HTML. So let's go through your issues one-by-one.
1) The brand name is not in line with the a tags. i tried
display:inline; in every class but its not working.
I'm only seeing your use of display:inline in a couple of your classes, but not on the brand name. Regardless, Bootstrap already has a brand with links built in for you. As you can see in the code below.
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contact</li>
<li>Recipes</li>
<li>Orders</li>
</ul>
...
2) The social media tags are hanging in mid air, I want them to be in
line with the a tags. Again, i tried reducing the margin, padding and
using the inline command but nothing seems to be working.
To get these to go on the same line, you can nest the form and the social media icons in a div tag that pulls both of them to the right of the navigation bar using the navbar-right class. To make sure they're on the same line, use Bootstrap's float class: pull-left and pull-right. You'll need to add padding to the top of the a tags using padding-top CSS property. I've done it to one, so you can get an idea of how.
<div class="navbar-right">
<form class="navbar-form pull-left">
<div class="form-group">
<input class="form-control" type="text" placeholder="Search">
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
<ul class="nav navbar-nav pull-right">
<li>
<img src="fb-icon.png">
</li>
<li>
<img src="phone-icon.png">
</li>
<li>
<img src="icon-insta.png">
</li>
</ul>
</div>
You'll just need to reapply some of your classes.
I'm trying to have some text show up next to a button, however the text only shows up underneath the button. Currently, I have in my HTML code:
<div class="display: inline;">
<div class="td-dropdown" dropdown>
<button type="button" class="btn btn-primary btn-sm" dropdown-toggle>
Filter Search by:<span class="caret" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="dropChange('all')">All</a><li>
<li><a ng-click="dropChange('floor')">Floor</a></li>
<li><a ng-click="dropChange('building')">Building</a></li>
<li><a ng-click="dropChange('room')">Room</a></li>
</ul>
</div>
</div>
<a class="display: inline;">{{mockDropVal}}</a>
All I want to do is move the text from {{mockDropVal}} next to the button. As you can see, I've tried using the display: inline class (however i think i am using it incorrectly). As well, I tried to make my own class to do this, but it was unsuccessful.
Any advice or tips would be greatly appreciated!
What you've meant to put is style='display:inline;'!
Writing class='inline' and then having a class in your css file that was .inline{display:inline;} would work the same though.
Having said that, you need to change your markup a little so that the elements will be next to each other. I've moved the <a> tag next to the <button>, as that's where you want it to be. I've also changed class='' to style=''.
<div style="display: inline;">
<div class="td-dropdown" dropdown>
<button type="button" class="btn btn-primary btn-sm" dropdown-toggle>
Filter Search by:<span class="caret" aria-hidden="true"></span>
</button>
<a style="display: inline;">{{mockDropVal}}</a>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="dropChange('all')">All</a><li>
<li><a ng-click="dropChange('floor')">Floor</a></li>
<li><a ng-click="dropChange('building')">Building</a></li>
<li><a ng-click="dropChange('room')">Room</a></li>
</ul>
</div>
</div>
Or with the CSS:
<div class="inline">
<div class="td-dropdown" dropdown>
<button type="button" class="btn btn-primary btn-sm" dropdown-toggle>
Filter Search by:<span class="caret" aria-hidden="true"></span>
</button>
<a class="inline">{{mockDropVal}}</a>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="dropChange('all')">All</a><li>
<li><a ng-click="dropChange('floor')">Floor</a></li>
<li><a ng-click="dropChange('building')">Building</a></li>
<li><a ng-click="dropChange('room')">Room</a></li>
</ul>
</div>
</div>
.inline{display:inline}
I have adjusted your code according to your expected output. Do study the changes. Here is a jsbin to play with
.wrapper {
display: inline-block;
vertical-align: top;
}
.td-dropdown .buttons,
.td-dropdown .dropdownmenu {
display: inline-block;
}
.dropdownmenu ul li {
display: block;
list-style-type: none;
vertical-align: top;
}
.td-dropdown .buttons {
vertical-align: top;
!important
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="td-dropdown" dropdown>
<div class="buttons">
<button type="button" class="btn btn-primary btn-sm" dropdown-toggle>
Filter Search by:<span class="caret" aria-hidden="true"></span>
</button>
</div>
<div class="dropdownmenu">
<ul class="dropdown-menu" role="menu">
<li><a ng-click="dropChange('all')">All</a>
<li>
<li><a ng-click="dropChange('floor')">Floor</a>
</li>
<li><a ng-click="dropChange('building')">Building</a>
</li>
<li><a ng-click="dropChange('room')">Room</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">{{mockDropVal}}</div>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none">
<span class="criteria">any</span>
<span class="caret" style="margin-top:6px;"></span>
</a>
The above piece of code is giving me the following output
any ▼
How to place the caret below the anchor close to the anchor text.
Approx look :
any
▼
EDIT : I have text following the anchor and caret, but I want it to be on same line.
before anchor text any text following the anchor
▼
The any is basically a drop down in the middle of sentence. So I want the caret to be close to anchor text, but below it and not necessarily as a next line
EDIT 2 : code before and after
<div class="control-group">
<div class="controls dropdown">
Create backup if
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none">
<div class="criteria">any</div>
<div class="caret" style="margin-top:6px;display: inline-block"></div>
</a>
<ul class="dropdown-menu" id="selector"
style="text-decoration: none;left: 18%;min-width: 65px;">
<li><a title="any">any</a></li>
<li><a title="all">all</a></li>
</ul>
of the following are true:
</div>
</div>
This is my take on it... Notice that, as you add text before -or after- the caret follows the anchor
.caret {
display: inline;
position: relative;
top: 1em;
left: -1.2em;
padding-right: 0;
margin-right: 0;
width: 0;
}
a > .caret {
display: inline-block;
width: 0;
}
<div class="control-group">
<div class="controls dropdown">
Create backup if more code here
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none">
<span class="criteria">any</span><span class="caret">^</span></a> of the following are true:
</div>
</div>
Updated to remove extra spaces
You can modify your caret like this:
<span class="caret" style="position:absolute; margin-top:15px;margin-left:-20px;"></span>
That's the final look and the snippet:
Nothing to see there<br>
If <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none">
<span class="criteria">any</span>
<span class="caret" style="position:absolute; margin-top:15px;margin-left:-20px;">^</span>
</a> unicorns are watching you, be happy!