Dropdown list isn't shown correctly! Why? - html

While clicking on the dropdown-list-button the dropdown list opens up but isn't shown correctly. Anybody has an idea to fix this?
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
Checked option
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><input type="radio" id="ID" name="NAME" value="VALUE">
<label for="ID">Label</label>
</li>
<!-- Other items -->
</ul>
</div>
And I'm including these two Bootstrap files:
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">

Like the others, here's a working example: http://codepen.io/emaildano/pen/zxopNj
Can you provide more detail on how this "isn't showing up correctly"?
If I had to guess you're referring to the width of the drop down. That's set to a min-width of 160px. Of course that can be changed.

Related

Ensuring div are placed below each other after the top div grows in size

I have two divs that represent a list of elements the user can click on on a search bar, followed by a "Done" button.
<div class="dropdown col" id="dropdown-search-id">
<input type="text" class="form-control dropdown-toggle" id="inputSearch" placeholder="Search for a term ">
<div class="col dropdown-menu" aria-labelledby="inputSearch">
<div id="search_list_container">
<ul id="inputSearchEntries">
<li id="searching_li" style="visibility:hidden">
<img src="{{static_dir}}/loader.gif" alt="Loading" style="width:15%"/>
</li>
</ul>
</div>
<div id="doneSearchButton" class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">Done</button>
</div>
</div>
</div>
Whenever the user starts typing, there are a number of <li> elements that appear with an autocomplete function (that is, they are appended between the <ul> tag, but the position of the "Done" button is messed up, as it does not stay at the bottom, that is, below the list elements.
How can I keep the button always at the bottom of the list, regardless of how many elements there are?
See example below. I used your code, added a few <li> items, the data-bs-toggle and a class on the <ul> list so no bullets appear, and the buttons is where it should be.
So if your problem isn't solved with my example, post the full example of the dropdown, with the search results and including any custom CSS.
Other options:
Use the helper class float-end instead of using flex.
Place the btn inside the list: <ul><li>..</li><li><btn></li></ul>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<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"></script>
<div class="dropdown col" id="dropdown-search-id">
<input type="text" class="form-control dropdown-toggle" id="inputSesarch" data-bs-toggle="dropdown" aria-expanded="false" placeholder="Search for a term ">
<div class="col dropdown-menu form-control" aria-labelledby="inputSearch">
<div id="search_list_container">
<ul class="list-group" id="inputSearchEntries">
<li><a class="dropdown-item" href="#">First result</a></li>
<li><a class="dropdown-item" href="#">Another result</a></li>
<li><a class="dropdown-item" href="#">Some other result</a></li>
</ul>
</div>
<div id="doneSearchButton" class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">Done</button>
</div>
</div>
</div>

POST form HTML with Bootstrap Dropdown

In the following code, I want to submit a form with a Bootstrap dropdown and submit the selected value as "username". I'm not sure where in the following code I should add 'name="username"'. When I add it in certain places, it does not get set properly.
<form action="/login" method="POST">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
<input type="submit" value="Login">
</div>
</form>
Below is an example of code that does exactly what I want it to. But for design purposes, I'd like the form to be in Bootstrap.
<form action="/login" method="POST">
<select class="form-control" name="username">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="submit" value="Login">
</form>
Replace the links in the list (the ones that currently link to the top of the page) with radio buttons and labels.
We can add radio buttons for every list item, each giving them a unique value and name="username". Wrap the text of every list item into a label with a for tag that points to the id of the corresponding radio button.
After that, the only thing that is left to do is wrapping the dropdown label into a span with id='userlabel', and use this script to change the label of the dropdown menu to the selected list item. This will give the user an idea of which item is currently selected:
$("input[name='username']").change(function(e){
$("#usernamelabel").text($(this).val());
});
We can hide the radio buttons with
input[name='username']{
display: none;
}
The resulting html will look like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/login" method="POST">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="usernamelabel">Select username</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><input type="radio" id="username1" name="username" value="username1"><label for="username1">Username1</label></li>
<li><input type="radio" id="username2" name="username" value="username2"><label for="username2">Username2</label></li>
<li><input type="radio" id="username3" name="username" value="username3"><label for="username3">Username3</label></li>
</ul>
<input type="submit" value="Login">
</div>
</form>
<style>
input[name='username']{
display: none;
}
</style>
<script>
$("input[name='username']").change(function(e){
$("#usernamelabel").text($(this).val());
});
</script>

boostrap dropdown menu align

I am new to bootstrap and created a website with that but my dropdown menu didn't work right it open "out of the window" so anyone can help me with that? I've tried a lot with classes but it didn't work...
https://i.imgur.com/DbjKm3U.png
my code:
<div class='dropdown'>
<button class='btn' type='button' id='dropdownMenuButton' data-toggle='dropdown'>
<img class='rounded-circle float-right' height='45px' src='$profileimgurl' />
</button>
<ul class='dropdown-menu pull-left' role='menu'>
<li class='dropdown-header'>$username</li>
<li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
<li class='dropdown-header'><a class=''>Friends</a></li>
<li class='dropdown-header'><a class=''>Activity</a></li>
<li class='divider'></li>
<li class='dropdown-header'>Account</li>
<li>
<form action='includes/logout.inc.php' method='post'>
<button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
</form>
</li>
</ul>
</div>
The default behavior of Bootstrap's Dropdown Component is to align to the bottom left margin of whatever object triggered it. To override this behavior you apply dropdown-menu-right to the dropdown-menu. To use your own code as an example:
<ul class='dropdown-menu dropdown-menu-right' role='menu'>
<li class='dropdown-header'>$username</li>
<li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
<li class='dropdown-header'><a class=''>Friends</a></li>
<li class='dropdown-header'><a class=''>Activity</a></li>
<li class='divider'></li>
<li class='dropdown-header'>Account</li>
<li>
<form action='includes/logout.inc.php' method='post'>
<button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
</form>
</li>
</ul>
It is unclear whether you are using Bootstrap 3.x or Bootstrap 4.x, but in the latter you can also apply responsive behavior to this class (ie. .dropdown-menu-lg-right to better modify your UI on different devices or screens.
This Technique only work on Bootstrap 4
This is not problem bro, its default behavior of dropdowns but for solving this situation you need to use dropdown-menu-right class, for more info go to this link.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>

How can i make bootstrap dropdown menu to open/expand upwards instead of downwards

Here's my HTML code and it has default bootstrap CSS, which expands/opens dropdown options downwards.
<div class="col-md-4 form-group">
<label>{{'crm.crmpopup.newCustomer.cardType'|translate}}:</label>
<div class="input-row">
<select class="form-control" chosen name="cardType" ng-model="pageData.customer.cardType">
<option value="Visa">{{'crm.crmpopup.newCustomer.visa'|translate}}</option>
<option value="MasterCard">{{'crm.crmpopup.newCustomer.masterCard'|translate}}</option>
<option value="AmericanExpress">{{'crm.crmpopup.newCustomer.americanExpress'|translate}}</option>
<option value="DinersClub">{{'crm.crmpopup.newCustomer.dinersClub'|translate}}</option>
<option value="Discover">{{'crm.crmpopup.newCustomer.discover'|translate}}</option>
<option value="EnRoute">{{'crm.crmpopup.newCustomer.enRoute'|translate}}</option>
<option value="JCB">{{'crm.crmpopup.newCustomer.jcb'|translate}}</option>
</select>
</div>
</div>
How can i make bootstrap dropdown menu to open/expand upwards?
The default select HTML tag is limited in what it can do. You have to used a custom setup for this. The following Bootstrap code will create a dropdown going up instead of down.
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Notice the dropup class. This is what allows it to go up instead of down. You can view the Bootstrap documentation that refers to that here.
Following code worked for me :
<select class="selectpicker dropup" data-dropup-auto="false">
<option>1</option>
<option>2</option>
<option>3</option></select>
Note: Applying the 'dropup' class only works if 'dropupAuto' is set to false.
You are using a select menu. You need to get rid of it and use the bootstrap dropdown.
Use the following code:
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Below is working example that uses Bootstrap 3.3.7. Reference
<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">Dropup Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li class="divider"></li>
<li>About Us</li>
</ul>
</div>
</div>

customize bootstrap navbar color

I have a navigation bar where I have used the bootstrap framework.
I would like to customize that navigation bar, but the bootstrap.min.css is of course impossible to read. I would fx like to change the color, font and transparency on the nav bar. Is there anybody how knows how I could do that? Can I overwrite those part of boostrap css some how? I have looked around on stackoverflow, but there is nothing that solves my problem, even if the question related to this have been up before.
Here is my navigation bar:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 topnav" href="#">Start Bootstrap</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 navbar-right">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<!-- Login Form -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
<!-- /.Login Form -->
</div>
<!-- /.container -->
</nav>
The changing of the navbar color is relatively easy if you use the aria role="navigation".
[role="navigation"]{ background-color: #F58C14; }
You've got some bigger picture issues with regard to your bootstrap syntax. You have duplicated
<!-- Login Form -->
<ul class="nav navbar-nav navbar-right">
but you've already opened that <ul class="navbar-right a few lines up above.
You also have got the widths of the columns being specified too high. This will cause collapse issues in BOOTSTRAP when in mobile breakpoints.
Please see this fiddle for what I think you're looking for.
Dropdown side nav with aria css call
Ofcourse you can overwrite those styles provided by default bootstrap. But its very much advisable to overwrite them using another own custom stylesheet. When you do this always make sure your custom stylesheet is called after the bootstrap.css stylesheet.
Next questions comes how do you overwrite these styles and how do we know from which components do these styles come from. There are couple of ways to do it. Either you need to start going through the bootstrap components on their website and get used to the default classes and overwrite them -- or -- you can make use of your browser's Developer Tools (Ctrl + Shift + i in Chrome) to check which is the class which is responsible for the style and overwrite them.
Say now you want to change the navbar background color considering your example, now we know that the background color comes from the class named navbar-default from bootstrap.css. Now all we need to do is overwrite the already existing background-color coming from bootstrap stylesheet to our own color using our custom stylesheet. like so
.navbar-default {
background-color: green;
}
Hope this helps. Fiddle here