I am using bootstrap-multiselect to add dropdown multiselect functionaility to selects but I do not like the way it looks and can't seem to overide the style.
I would like it to look like a normal bootstrap form control but adding these classes does nothing.
<h1>Normal BS select</h1>
<div class="input-group input-group-sm mb-2">
<select class="form-control form-control-sm" id="select1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<h1>
Bootstrap multiselect
</h1>
<div class="input-group input-group-sm mb-2">
<select class="form-control form-control-sm" id="select2" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
I have created a JSfiddle to show the difference.
I have also tried to change the bootstrap-multiselect stylesheet but again nothing I change seems to work
EDIT:- It is the grey background and lack of border of the bootstrap-multiselect that I do not like
Bootstrap Multiselect is creating a button there which receives certain styles applied by classes like .multiselect. You can pretty easily override these in a way like the following:
button.multiselect {
background-color: initial;
border: 1px solid #ced4da;
}
Here, I'm resetting the background color of the button generated by Multiselect by going to its initial value, but you can set it to #ffffff; or something else. The border style is copied from the Bootstrap default for the .form-control class.
If you're not familiar with debugging with Devtools, you can start with Chrome's Devtools overview, or look specifically for tutorials on how to use the devtools or inspector for your browser of choice.
Here it is applied to your fiddle:
https://jsfiddle.net/qzdnkwos/36/
You can tweak as needed.
I'm trying to create a form with Angular2 Material and bootstrap grid,
my HTML looks like this:
<div class="row">
<div class="col-md-6 marign-top-10 margin-bottom-10">
<md-input-container class="full-width">
<input
mdInput
type="text"
formControlName="postal"
placeholder="Postal">
</md-input-container>
</div>
<div class="col-md-6 marign-top-10 margin-bottom-10">
<div class="full-width">
<md-select class="full-width" placeholder="Country" formControlName="country_id">
<md-option *ngFor="let country of countries" value="{{country.id}}">{{ country.name }}</md-option>
</md-select>
</div>
</div>
</div>
my full-width css class just set width:100%.
the problem is that the inputs are not in the same line as it should be
here is a few screenshots:(my application is right to left language so ignore the text direction )
it is a css problem you can add this to your component stylesheet:
.mat-select{
margin-top:10px;
}
Play with the value maybe is greater than 10 or lower
It a problem with md-select styles, I had trouble in project too, so my solution is:
CSS
md-select {
min-height: 30px; // or any value that equal md-input-container>input height
}
JSFiddle example
I cannot get the select2 dropdown to fit parent container (collapse) when initialized hidden. I understand this is not a bug, because select2 was not able to calculate the parent width. But I couldn't overcome this. I need it to be 100% to the parent.
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar">
<button class="btn btn-default" data-toggle="collapse" data-target="#collapse-select2" aria-expanded="false">Toggle</button>
</div>
<div class="collapse" id="collapse-select2">
<select class="form-control" data-role="select2">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</select>
</div>
</div>
</div>
Fiddle: here
Can anybody please help?
actually quite simple solution:
1. CSS only solution
give .select2 100% width and override with !important like this:
.select2 {
width: 100%!important; /* overrides computed width, 100px in your demo */
}
here's also your updated fiddle https://jsfiddle.net/1agwbfmy/6/
2. style tag for select
another way to do it, as written in documentation is to give width to <select> element with style and it will get the attribute from there:
<select class="form-control" data-role="select2" style="width:100%">
3. plugin configuration
lastly, you can set the width when calling the plugin in jQuery (as written in old docs):
$('select[data-role="select2"]').select2({
theme: 'bootstrap',
width: '100%'
});
Use width: '100%' property in config.
$('[data-role="select2"]').select2({
width: '100%',
...
});
I am trying to use Bootstrap Select Plugin inside of an Bootstrap 32 accordion at this Demo but the Select option is hiding inside the panel-body
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
Can you please let me know why this is happening and how I can fix it?
Thanks
The problem the position of the dropdown list.
fiddle : http://jsfiddle.net/52VtD/3386/
Just add a class on your dropdown list to make is position relative.
.bootstrap-select .dropdown-menu{
position:relative;
}
How do I make a Bootstrap input field be exactly 100% as wide as its parent?
As steve-obrien wrote in Bootstrap Issue #1058:
Setting to 100% does not work when applied directly to an input field as it does not take in to account the padding. So you end up with 100% of the container plus the padding on the input box, so the input box usually breaks outside its container.
That ticket offers various solutions, but I'm looking for the best way to do it -- preferably a CSS class already provided by Bootstrap.
Applying the input-block-level class works great for me, across various screen widths. It is defined by Bootstrap in mixins.less as follows:
// Block level inputs
.input-block-level {
display: block;
width: 100%;
min-height: 28px; // Make inputs at least the height of their button counterpart
.box-sizing(border-box); // Makes inputs behave like true block-level elements
}
This is very similar to the style suggested by 'assembler' in his comment on issue #1058.
Just add box-sizing:
input[type="text"] {
box-sizing: border-box;
}
If you're using C# ASP.NET MVC's default template you may find that site.css overrides some of Bootstraps styles. If you want to use Bootstrap, as I did, having M$ override this (without your knowledge) can be a source of great frustration! Feel free to remove any of the unwanted styles...
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
For anyone Googling this, one suggestion is to remove all the input-group class instances. Worked for me in a similar situation. Original code:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<div class="input-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</div>
</form>
New code:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</form>
I found a solution that worked in my case:
<input class="form-control" style="min-width: 100%!important;" type="text" />
You only need to override the min-width set 100% and important and the result is this one:
If you don't apply it, you will always get this:
In order to get the desired result, you must set "box-sizing: border-box" vs. the default which is "box-sizing: content-box". This is precisely the issue you are referring to (From MDN):
content-box
This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
border-box
The width and height properties include the content, the padding and border, but not the margin."
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Compatibility for this CSS is good.
Use .container-fluid, if you want to full-width as parent, spanning the entire width of your viewport.
What about?
input[type="text"] {
max-width:none;
}
Checking that some css file is causing problems. By default bootstrap displays over the entire width. For instance in MVC directory Content is site.css and there is a definition constraining width.
input,select,textarea {
max-width: 280px;}
just add:
width: 100% !important;