I can't figure out how to translate this from Bs3 to Bootstrap 4:
<!--Site-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Site</span>
<input type="search" name="searchBy" id="searchBy" class="form-control" placeholder="Suchbegriff eingeben"/>
<div class="input-group-btn">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle dropdown-button" type="button" data-toggle="dropdown">
<span>Search By</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><</li>
<li>></li>
</ul>
</div>
</div>
</div>
</div>
I tried different ways, but all the time it looks so weird in bootstrap 4 oder even 5. Can u please help me with that?
Related
I have a layout_cshtml, now my challenge is the aligning on my div its on the left and not showing well both search and dropdownlist. I need some help below to the logic its not aligning well yet its not good for the user experience including my nav is not showing at all to the Interface no errors at all, please help me based on what i have attempted.
//View
<nav>
<ul class="nav">
<li>People</li>
<li>Modules</li>
<li>
<ul class="sub-menu">
<li>Files</li>
</ul>
</li>
</ul>
</nav>
<center>
<div class="form-group row">
<li class="static ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-0" aria-labelledby="ui-id-1" aria-selected="true">
Everyone
</li>
<form class="form-group ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!--DropdownlistFor-->
#Html.DropDownList("eNtsaRegLists", new SelectList(ViewBag.eNtsaRegListsEnum, "Value", "Text"))
</div>
</center>
I was not sure what <div> you wanted to move, and I did not understand the point with adding <nav> when you dont have a div there.
Anyway here is an example on how you can do it.
I have used the float-class in bootstrap (https://getbootstrap.com/docs/4.0/utilities/float/)
<div class="form-group row float-right">
<li class="static ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-0" aria-labelledby="ui-id-1" aria-selected="true">
Everyone
</li>
<form class="form-group ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
</div>
Codepen: https://codepen.io/cbrown___/pen/yLOqNym
By the way you should make the codepen, not we who you want help from.
EDIT: Removed <center>
I'm trying to make a dropdown menu with Bootstrap on a Meteor.js/Iron project. For some reason the second instance of class="dropdown-header" is getting rendered outside the dropdown-menu.
Here's a pic: Click me
The same code works fine and renders correctly when run independently.
Has anyone else had issues such as this? Using Bootstrap 3.3.5 and Meteor 1.2
<ul class="dropdown-menu">
<li class="dropdown-header">Header</li>
<li>
<div class="col-sm-12">
<div class="btn-group" role="group">
<button class="btn btn-primary">Add</button>
<button class="btn btn-success">Edit</button>
</div>
</div>
</li>
<li class="dropdown-header">Why am I here???????</li>
<li>
<div class="col-sm-12">
<div class="btn-group" role="group">
<button class="btn btn-primary">Add</button>
<button class="btn btn-success">Edit</button>
</div>
</div>
</li>
</ul>
Try to create another ul for the second dropdown:
<ul class="dropdown-menu">
<li class="dropdown-header">Header</li>
<li>
<div class="col-sm-12">
<div class="btn-group" role="group">
<button class="btn btn-primary">Add</button>
<button class="btn btn-success">Edit</button>
</div>
</div>
</li>
</ul>
<ul class="dropdown-menu">
<li class="dropdown-header">Why am I here???????</li>
<li>
<div class="col-sm-12">
<div class="btn-group" role="group">
<button class="btn btn-primary">Add</button>
<button class="btn btn-success">Edit</button>
</div>
</div>
</li>
</ul>
I'm kinda new to HTML/CSS, and I'm trying to create a page with a login dropdown, but for some reason there's no padding on the right side of it. How can I fix it?
I wasn't able to find a solution.
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header"><a class="navbar-brand">My Site</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</a>
</div>
<div class="container">
<div class="navbar-collapse">
<ul class="nav pull-right navbar-nav">
<li>Sign Up
</li>
<li class="divider-vertical"></li>
<li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 10px;min-width:240px;">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
</div>
or
<form action="[YOUR ACTION]" method="post" role="form" class="form-horizontal">
<input class="form-control" id="inputEmail1" placeholder="Email" type="email" style="margin-bottom:.5em">
<input class="form-control" id="inputPassword1" placeholder="Password" type="password" style="margin-bottom:.5em">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
<input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In">
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
As Bootstrap Documentation says, sometimes you will need to place your dropdown container in a different position, for those cases you need to add the dropdown-menu-right class like so:
<div class="dropdown-menu dropdown-menu-right" style="padding: 10px;min-width:240px;">
Here's a JSFiddle with the example working:
JSFiddle
Your HTML structure should be changed to reflect the base Bootstrap classes. Pull-right isn't respected in the way you're using it, use navbar-right instead. Check the Docs to see the options you have by default.
*Also this class doesn't exist > <span class="glyphicon glyphicon-bar"></span>
See working example Snippet.
.navbar .dropdown-menu-fb {
padding: 10px;
min-width: 240px;
}
.navbar .navbar-toggle {
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-fixed-top navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <i class="fa fa-bars"></i>
</button>My Site
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li>Sign Up
</li>
<li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-fb">
<li class="btn btn-default navbar-btn btn-block"> <i class="fa fa-facebook"></i> Login via Facebook
</li>
<li>
<form action="[YOUR ACTION]" method="post" role="form">
<p class="text-center">or Sign Up</p>
<div class="form-group">
<input class="form-control" id="inputEmail1" placeholder="Email" type="email">
</div>
<div class="form-group">
<input class="form-control" id="inputPassword1" placeholder="Password" type="password">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
<div class="form-group">
<input class="btn btn-primary navbar-btn btn-block" type="submit" name="commit" value="Sign In">
</div>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
The container is too big and it go out of the screen?
Work on min-width and let container stay inside the viewport, than focus on padding.
<div class="dropdown-menu" style="padding: 10px;min-width:200px;">
probably you will have to work on dropdown-menu to fix it, we need the css code
I am trying to create a a group of controls with bootstrap however it does not seem to be rendering properly, I have an example here: https://jsfiddle.net/brightertools/jxafnoyx/
Code:
<form id="form" name="form" action="" method="post">
<div class="container">
<div class="form-group">
<label class="control-label" for="SelectOption">Select an Option</label>
<div class="input-group">
<select id="SelectOption" name="SelectOption" class="form-control">
<option value="">(select your option)</option>
</select>
<div class="input-group-btn ">
<button type="button" class="btn btn-default glyphicon glyphicon-plus" style="margin-top:-1px;" id="AddButton"></button>
<button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-cog" style="margin-top:-1px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="GroupDropdown"></button>
<ul class="dropdown-menu">
<li><a id="EditLink">Edit</a>
</li>
<li><a id="DeleteLink">Delete</a>
</li>
</ul> <span class="input-group-addon"><span class="validation-icon glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
</div>
</div>
</form>
One can see that the addon is wrapping, I cannot seem to fix this issue.
Current rendering within jsfiddle:
As Onkar Deshpande mentioned correctly in his comment
"multiple form-controls in a single input group are not supported".
Input groups
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
But there is a little work around you could use to make this work.
Just make sure to move your input-group-addon out of the input-group-btn div.
To make this look correct you would have to also remove the border-radius on the .btn class.
.btn {
border-radius: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form id="form" name="form" action="" method="post">
<div class="container">
<div class="form-group">
<label class="control-label" for="SelectOption">Select an Option</label>
<div class="input-group">
<select id="SelectOption" name="SelectOption" class="form-control">
<option value="">(select your option)</option>
</select>
<div class="input-group-btn ">
<button type="button" class="btn btn-default glyphicon glyphicon-plus" style="margin-top:-1px;" id="AdvertiserEditButton"></button>
<button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-cog" style="margin-top:-1px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="AdvertiserDropdown"></button>
<ul class="dropdown-menu">
<li><a id="AdvertiserEditLink">Edit</a>
</li>
<li><a id="AdvertiserDeleteLink">Delete</a>
</li>
</ul>
</div>
<span class="input-group-addon"><span class="validation-icon glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
</div>
</form>
You can try like this: Demo
<div class="input-group">
<select id="SelectOption" name="SelectOption" class="form-control">
<option value="">(select your option)</option>
</select>
<div class="input-group-btn">
<button type="button" class="btn btn-default "><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="AdvertiserDropdown"><i class="glyphicon glyphicon-cog"></i></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<span class="input-group-addon validation-icon glyphicon glyphicon-asterisk"></span> </div>
<!-- /.input-group -->
I have this:
Here's the code
<div class="col-xs-8 col-xs-offset-2">
<form role="form">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
</div>
</div>
</form>
</div>
Fiddle: http://jsfiddle.net/ytqyowgt/
How do I make the dropdown list as wide as the input field + button?
Try setting:
.input-group-btn {
position: static;
}
.dropdown-menu {
width: 100%;
}
check the updated fiddle
Change a bit the structure of your HTML :
<div class="col-xs-8 col-xs-offset-2">
<form role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="text" class="form-control">
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</form>
</div>
and CSS :
.input-group-btn ul {
width:100%;
}
The only thing is you loose the rounded corners on the button.
http://jsfiddle.net/ytqyowgt/4/