I have the following html styled by bootstrap 3 that defines a group of inputs:
<div class="input-group">
<select class="form-control" >Some options here</select>
<a class="btn btn-default input-group-addon disabled" title="Legg til" disabled="" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a>
</div>
This gives the following result in most browsers (including IE10):
However in IE9, the "arrow" for the dropdown is missing:
Anyone know a fix for this in IE9?
I found the issue here. It seems that the arrow button is simply hidden below the button with the plus icon. So the select box is the entire width, and the other buttons end up overlying it.
So the fix was to add float:left to the select box, and voila!
You should use .input-group-btn to avoid this issue :
<div class="container">
<form role="form">
<div class="form-group">
<div class="input-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<span class="input-group-btn">
<a class="btn btn-default" href="#"><i class="glyphicon glyphicon-plus-sign"></i></a>
</span>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
You just need to remove padding on the select tag. You'll first need conditional classes for IE9.
<!--[if IE 9 ]><html class="ie9"><![endif]-->
Then just simply remove the padding on the select tags.
.ie9{
select.form-control{
padding: 0 !important;
}
}
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>
I am using bootstrap in my application. I am having a form which contains multiple drop down boxes which are placed inline. The width of the container containing the form is col-lg-12 and is taking the entire screen. Because of the data inside the drop down the last two drop downs are displayed in the second line. I tried giving the max-width property of the select box to 50%. The drop down width reduces but the margin still remains the same. I am not goot at bootstrap. Please let me know where I am going wrong. I am posting the code below:
<form novalidate role="form" name="filterForm" class="form-inline">
<div ng-repeat="criteria in criterias">
<div class="m-b">
<div class="form-group s-b">
<span>Country</span>
<select class="form-control" ng-options="item for item in country" name="country" ng-model="classification.country">
</select>
</div>
<div class="form-group s-b">
<span>State</span>
<select ng-options="item for item in state" class="form-control" name="state" ng-model="criteria.state" style="max-width:50%">
</select>
</div>
<div class="form-group s-b">
<span>City</span>
<select class="form-control" ng-options="item for item in Cities" name="account" ng-model="criteria.city" style="max-width:50%;">
</select>
</div>
<div class="form-group s-b">
<span>Predicate</span>
<select class="form-control" name="account" ng-model="criteria.predicate">
<option value="matches">Matches</option>
<option value="not-matches">Not Matches</option>
</select>
</div>
<div class="form-group s-b">
<span>Value</span>
<select class="form-control" name="account" ng-model="criteria.value" style="min-width:100px;">
</select>
</div>
<div class="form-group">
<span>
<button class="btn btn-sm btn-primary pad-btn" type="submit" ng-click="addCriteria()"><i class="fa fa-plus"></i>
</button>
<button class="btn btn-sm btn-danger pad-btn" type="submit" ng-click="deleteCriteria(criteria)"><i
class="fa fa-minus"></i></button>
</span>
</div>
</div>
</div>
<button class="btn btn-sm btn-primary pad-btn align-center" type="submit" ng-click="searchParams(filterForm)">Submit
<i class="fa fa-check"></i></button>
<button class="btn btn-sm btn-warning pad-btn align-center" type="submit" ng-click="resetFilter()">Reset
<i class="fa fa-reply"></i></button>
</form>
Try adding a class
Since your data is too big you should try adding a class that modifies the position of the dropdowns, since they are absolute they should be easy to move around to where you want.
Explanation of bootsraps column system
If you set your class col-xs-12 it will be bull width all the way from mobile to big desktop
If you set your class to col-xs-12 col-lg-6 then xs, sm and md will all be full width but lg will be half width.
try using shoe lace to model your column setup.
Note
You should check out ui.bootstrap since you're using angular.js. It removed the use of jQuery so you don't run into any compatibility issues or strange bugs.
I'm exploring the Materialize CSS library, and I'm having some issues with the waves effect class.
When added to a button it blurs the form it is in.
This is the form without the waves-effect:
After adding the waves-effect it gets blurry:
My html looks like this:
<div class="login-form centered">
<h1><i class="fa fa-user menu-icon"></i> Login</h1>
<form role="form">
<div class="form-group">
<input type="text"
class="form-control"
ng-model="alc.user.username"
id="username"
placeholder="Username"/>
</div>
<div class="form-group">
<input type="password"
class="form-control"
id="password"
ng-model="alc.user.password"
placeholder="Password"/>
</div>
<button type="submit"
class="waves-effect btn"
ng-click="alc.login(alc.user.username)">Sign in
</button>
<button type="submit"
class="waves-effect btn"
ng-click="alc.register()">Register
</button>
</form>
</div>
When checking the css attributes inherited from the class, I noticed that what's causing the blur is: will-change: opacity, transform;
After removing it the text returned to normal.
So my question is, why is this happening?
and how to apply the effect without the side effect?
Edit:
I've checked in chrome firefox and explorer, and the issue only occurs on chrome.
What I have done here is use the standard Bootstrap grid system of .col-md-5 and .col-md-7 under .row to place all the element on 1 row but I can't seem to make it work.
Another thing is the element keeps getting pulled down to another line below the input.
<div class='col-md-12'>
<div class='row'>
<div class='col-md-5'>
<select class='form-control'>
<option value='us'>USA</option>
</select>
</div>
<div class='col-md-7'>
<span class="" style="display: inline">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
<a href='#' class=''>
cancel
</a>
</span>
</div>
</div>
</div>
How can I put all these onto 1 line?
Here's a jsfiddle for it: http://jsfiddle.net/2656xt63/
There's nothing wrong with your bootstrap column classes, but the elements will only appear side by side on md screen widths (>= 992px). The fiddle panel is narrower than that so the elements are stacked.
If you use col-xs-* the elements will appear side by side at all times.
Alternatively, for a small form such as this, you could use an inline form:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="country">Country</label>
<select class='form-control' id="country">
<option value='us'>USA</option>
</select>
</div>
<div class="form-group">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
</div>
<div class="form-group">
<a href="#" class="btn btn-default">
cancel
</a>
</div>
</form>
Here's a bootply demonstrating the inline form.
Code contains text box and button
HTML:
<div id="input-collection" class="input-group input-group-lg">
<span class="input-group-addon">
<i class="glyphicon glyphicon-link"></i>
</span>
<input id= "url-input-box" type="url" class="form-control" name = "url" placeholder="http://www.example.com">
<span class="input-group-btn">
<button id="submit-url-btn" class="btn btn-success" type="button">Go</button>
</span>
</div>
which shows button and texbox like:
I changed margin-top and margin-left in all above class but no change.
Where I need to make change here?
Use Firebug (or chrome developer tools - Ctrl+Shift+J)
Look at the margin-bottom settings of: submit-url-btn (the tag)
against the margin-bottom of the url-input-box (span)
It seems that the button has a high value on margin-bottom. set both to 0 and see how they are positioned.