Is there any way to change the order of the items in this dropdown?
<div class="col-md-2 col-6"><div class="form-group">
<div class="dropdown bootstrap-select show-tick form-control"><select name="type[]" data-size="5" class="selectpicker form-control" title="Type" data-live-search="true" data-selected-text-format="count > 1" data-actions-box="true" multiple="" data-select-all-text="All" data-deselect-all-text="None" data-count-selected-text="{0} types selected" data-none-results-text="No results matched {0}" data-container="body">
<option data-ref="house" value="house">House</option>
<option data-ref="office" value="office">Office</option>
<option data-ref="flat" value="flat">Flat</option>
<option data-ref="shop" value="shop">Shop</option> </select>
<button type="button" tabindex="-1" class="btn dropdown-toggle btn-light bs-placeholder" data-toggle="dropdown" role="combobox" aria-owns="bs-select-3" aria-haspopup="listbox" aria-expanded="false" title="Type"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Type</div></div> </div></button><div class="dropdown-menu "><div class="bs-searchbox"><input type="search" class="form-control" autocomplete="off" role="combobox" aria-label="Search" aria-controls="bs-select-3" aria-autocomplete="list"></div><div class="bs-actionsbox"><div class="btn-group btn-group-sm btn-block"><button type="button" class="actions-btn bs-select-all btn btn-light">All</button><button type="button" class="actions-btn bs-deselect-all btn btn-light">None</button></div></div><div class="inner show" role="listbox" id="bs-select-3" tabindex="-1" aria-multiselectable="true"><ul class="dropdown-menu inner show" role="presentation"></ul></div></div></div><!-- selectpicker -->
Let's say I want "flat" to be at the top. It is a WP theme and there is no option to change the order. Thank you!
Related
I'm using bootstrap 4, and on my Safari on my mac the dropdown looks like this
Which looks different from the input on the left of it. On other browsers like chrome and firefox the input and select look the same.
This is my dropdown HTML in my form
<div class="form-row">
<div class="col-lg-6 col-md-6 col-sm-12 form-group">
<input type="text" id="data-product" class="form-control border-0 form-control-lg shadow" name="Data[product]" maxlength="17" placeholder="Enter Product">
<div class="invalid-feedback"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 form-group">
<select id="data-data_from" class="form-control border-0 form-control-lg shadow" name="Data[data_from]">
<option value="" selected="" disabled="">Country</option>
<option value="jp" data-title="Japan">Japan</option>
<option value="us" data-title="USA">U.S.A</option>
</select>
<div class="invalid-feedback"></div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 form-group">
<button type="submit" class="btn btn-lg btn-success btn-block shadow"><i class="fas fa-search"></i></button> </div>
</div>
How do i style it the same on Safari? Thanks
In Bootstrap 4, try and use custom-select custom-select-lg instead of form-control form-control-lg
<select id="data-data_from" class="custom-select custom-select-lg border-0 shadow" name="Data[data_from]">
<option value="" selected="" disabled="">Country</option>
<option value="jp" data-title="Japan">Japan</option>
<option value="us" data-title="USA">U.S.A</option>
</select>
More about Custom-forms here
https://getbootstrap.com/docs/4.0/components/forms/#custom-forms
You need to add the following to your CSS
select {-webkit-appearance:none;}
This also works for Bootstrap 5
I think that happens because of Mac, i tried on both operating systems, and its the same for me.
Maybe try style="background-color:#fff", maybe that helps, but idk more than that sorry.
Maybe this link helps you, good luck :)
You can achive consisent look across browsers if you use Bootstrap Dropdown:
<div class="dropdown">
<button
class="btn dropdown-toggle shadow btn-lg"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-expanded="false"
>
Country
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Japan</a>
<a class="dropdown-item" href="#">USA</a>
</div>
</div>
It will look like this in Safari (and the same in other browsers):
But, this is a different element and so you need to work with its data differently than with <select>
No clue how I can do this, since BS 4 doesn't support glyphicons. Do I set it up as a background or do I apply different positioning to a font-awesome icon?
This is my code so far:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="form-group col-md-4">
<input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->
I want to use this font-awesome icon. And I've tried adding it as a background-image too, as in:
.form-control {
background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
background-position: right center 5px;
}
But that doesn't do anything. The only way I can think of is to add font-awesome icon and then set the positioning to absolute, right? But I'm not sure if that's the 'clean' and correct way to do it? Do I need to take a different approach to this? Someone help! Thank you!
Bootstrap 5 Beta - (update 2021)
<div class="input-group">
<input class="form-control border-end-0 border rounded-pill" type="text" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary bg-white border-start-0 border rounded-pill ms-n3" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
Demo
Bootstrap 4 (original answer)
Why not use an input-group?
<div class="input-group col-md-4">
<input class="form-control py-2" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
And, you can make it appear inside the input using the border utils...
<div class="input-group col-md-4">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
Or, using a input-group-text w/o the gray background so the icon appears inside the input...
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
</span>
</div>
Alternately, you can use the grid (row>col-) with no gutter spacing:
<div class="row no-gutters">
<div class="col">
<input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
</div>
<div class="col-auto">
<button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
Or, prepend the icon like this...
<div class="input-group">
<span class="input-group-prepend">
<div class="input-group-text bg-transparent border-right-0">
<i class="fa fa-search"></i>
</div>
</span>
<input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input" />
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
Search
</button>
</span>
</div>
Demo of all Bootstrap 4 icon input options
Example with validation icons
I made another variant with dropdown menu (perhaps for advanced search etc)..
Here is how it looks like:
<div class="input-group my-4 col-6 mx-auto">
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Type something..." id="example-search-input">
<span class="input-group-append">
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split border border-left-0 border-right-0 rounded-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<button class="btn btn-outline-primary rounded-right" type="button">
<i class="fas fa-search"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</span>
</div>
Note: It appears green in the screenshot because my site main theme is green.
Here is an input box with a search icon on the right.
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
</div>
</div>
Here is an input box with a search icon on the left.
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
</div>
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
</div>
Here's a fairly simple way to achieve it by enclosing both the magnifying glass icon and the input field inside a div with relative positioning.
Absolute positioning is applied to the icon, which takes it out of the normal document layout flow. The icon is then positioned inside the input. Left padding is applied to the input so that the user's input appears to the right of the icon.
Note that this example places the magnifying glass icon on the left instead of the right. This is recommended when using <input type="search"> as Chrome adds an X button in the right side of the searchbox. If we placed the icon there it would overlay the X button and look fugly.
Here is the needed Bootstrap markup.
<div class="position-relative">
<i class="fa fa-search position-absolute"></i>
<input class="form-control" type="search">
</div>
...and a couple CSS classes for the things which I couldn't do with Bootstrap classes:
i {
font-size: 1rem;
color: #333;
top: .75rem;
left: .75rem
}
input {
padding-left: 2.5rem;
}
You may have to fiddle with the values for top, left, and padding-left.
in ASPX bootstrap v4.0.0, no beta (dl 21-01-2018)
<div class="input-group">
<asp:TextBox ID="txt_Product" runat="server" CssClass="form-control" placeholder="Product"></asp:TextBox>
<div class="input-group-append">
<asp:LinkButton ID="LinkButton3" runat="server" CssClass="btn btn-outline-primary">
<i class="ICON-copyright"></i>
</asp:LinkButton>
</div>
It is also possible with position-absolute in Bootstrap 5:
<form class="d-flex flex-row position-relative">
<input type="search" class="form-control" id="example-search-input">
<button class="btn btn-outline-success border-0 position-absolute end-0" type="submit">
<i class="fa fa-search"></i> Search
</button>
</form>
With Bootstrap 5 and bootstrap-icons library:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search"
aria-describedby="button-addon">
<button class="btn btn-outline-secondary" type="button" id="button-addon"><i class="bi bi-search"></i></button>
</div>
you can also do in this way using input-group
<div class="input-group">
<input class="form-control"
placeholder="I can help you to find anything you want!">
<div class="input-group-addon" ><i class="fa fa-search"></i></div>
</div>
codeply
I have this code in bootstrap:
<div class="input-group" id="adv-search">
<select class="form-control" >
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
</select>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
I checked my code in http://www.bootlint.com/.
But I have this error:
.input-groupcontains a <select>; this should be avoided as <select>
s cannot be fully styled in WebKit browsers
So I can not use input-group with select!
Is there a standard way to do it in bootstrap?
Bootlint leads you to the error E006 that says
non- .form-control within .input-group
You should use form-group instead of input-group like this:
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
I am using a Bootstrap Template (INSPINIA), and integrating it with PHP.
All of the sample data structures use buttons, but to make these interact with the server I need to change them to a submit and wrap them in a form.
Can I best retain the original bootstrap styling of a button, but gain the functionality of a form submit without having to amend bootstraps own CSS?
Original Bootstrap code:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
What I have ended up with:
<div class="input-group">
<form action="index.php" method="post">
<span class="input-group-btn">
<input type="text" placeholder="Add new task. " name="ToDo" class="input input-sm form-control">
<input type="submit" class="btn btn-sm btn-white" value="Add Task" name="addToDo" />
</span>
</form>
</div>
The above code doesn't look the same and shows some odd behaviour on smaller devices.
You can just change the type of the button to submit, and you're good to go:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
You have to add the form tag outside input-group to keep the styling:
<form action="index.php" method="post">
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
</form>
I'm attempting to have a glyphicon inside of the input field but for some reason it's outside of text box.
<!-- Panel -->
<div class="panel panel-default hidden-xs">
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<form>
<p><strong>Enter your number and we'll text you a link</strong></p>
<label class="sr-only">Phone Number</label>
<input class="form-control phone-txt" type="text" placeholder="Phone Number">
<button class="btn btn-submit" type="submit">
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</form>
</div>
<div class="col-sm-5">
<p><strong>Or visit an app store to download now!</strong></p>
<a class="btn btn-default btn-lg" href="#">iOS</a>
<a class="btn btn-default btn-lg" href="#">Android</a>
</div>
</div>
</div><!-- End panel -->
It looks like you have that glyphicon attached to the button. You might try something like this...
<input type="text" class="form-control phone-txt" placeholder="Phone Number" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-arrow-right"></span></span>