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%',
...
});
Related
I've spent hours trying to get rid of the border radius on my select2 append checkbox. As of now the dropdown is displayed with a checkbox on the left. The problem is that there seems to be a border radius between the two input group elements, something similar to the image. The solution proposed was adding the input-group select2-bootstrap-prepend class to the wrapper element which doesn't work for me.
The html is as follows
<div class="col-lg-3">
<div class="panel-body">
<b>Region</b><br>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<select id="select2-single-append" class=" region">
</select>
</div>
</div>
</div>
View the running example from jsfiddle
you need
.select2-container--default .select2-selection--single {
border-radius:0 0.25rem 0.25rem 0;
}
see this fiddle
https://jsfiddle.net/grassog/kLchxehz/25/ (relevant css at the bottom of the css portion)
I have this problem. Whenever I use a select box, it only shows the selected option partially, like this:
This is the corresponding portion of the code:
<div class="col col-33">
<div class="row">
<div class="col text-center">CALIBRE CABLE (AWG)</div>
<div class="col"><label class="item item-input item-select">
<div class="input-label"></div>
<select id="calibreMedRspta">
<option disabled selected>Seleccione el calibre:</option>
<option>350</option>
<option>250</option>
<option>4/0</option>
<option>3/0</option>
<option>2/0</option>
<option>1/0</option>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
<option>12</option>
</select></label></div>
</div>
I'm using Phonegap, and ionic CSS (not the entire framework).
jsfiddle with ionic 1.2.4 CSS
ionic documentation
Well, I fixed it by modifying the "width" of the select in the css file.
Add to CSS file:
option { display: table; }
or
Add to style attribute of option:
<option style="display: table;" value="AsLongAsItCanBe">Value1</option>
i would like to apply a specific css to a specific label in my html
this is my HTML
<div id="registration">
<div>
<label>Localisation</label>**//this is the target label to apply css**
<div id="registration_localisation">
<div>
<label>Gouvernorat</label>
<select id="registration_localisation_gouvernorat">
<option value="1">Ariana</option>
<option value="2">Ben Arous</option>
<option value="3">Bizerte</option>
</select>
</div>
<div>
<label for="registration_localisation_ville">Ville</label>
<input type="text" id="registration_localisation_ville">
</div>
</div>
</div>
<div>
<label>Annonceur</label>**//this is the target label to apply the css**
<div id="registration_annonceur">
<div>
<label for="registration_annonceur_Nom">Nom</label>
<input type="text" id="registration_annonceur_Nom">
</div>
<div>
<label for="registration_annonceur_Email">Email</label>
<input type="text" id="registration_annonceur_Email">
</div>
<div>
<label for="registration_Telephone" >Telephone</label>
<input type="text" id="registration_annonceur_Telephone">
</div>
</div>
</div>
</div>
i used many pseudo classes but i didn't find any solution
any idea please ?
try this way where you can style all your label inside the div contained into registration
#registration > div > label{
//your css
}
DEMO
Just give it a class. Classes may be repeated in HTML, like;
<label class="class1">Localisation</label>
and in your css,
.class1{
//styling
}
CSS3 way
#registration div label:first-child {
// specific styles for just the first label item
}
Or
#registration div label:nth-first-of-type{
// specific styles for just the first label item
}
jQuery Way
<script>
$( "#registration div label:first" ).css( "font-style", "italic" );
</script>
How about
#registration > div > label:first-of-type {}
?
Match labels who are the first, direct child of a div.
div > label:first-child {}
Actually it would be much better if you could add some classes to your elements. Matching wide selector such as div is a bad idea for future maintainability. Changing your markup will break your style.
i have two divs search and demo. And div demo is
hidden {
display: none
}
and onClick of button
i want to show div demo, whose content is loaded onClick event. Although div demo appears but on right of search div. i want it below search div.
Here is my code:
<div id= search>
<div class="recruitment_input">
<span style="margin-top:6px;">Search<sup> </sup>:</span>
<select id="requesttype" class="select_option">
<option value="none">--Select Search--</option>
<option value="design">Department</option>
<option value="development">First Name</option>
<option value="other">Employee ID</option>
</select>
</div>
</div>
<div id=demo></div>
EXAMPLE HERE
I believe this is what you are trying to accomplish. The $('#requesttype').on('change') method could be replaced with a $('button').on('click') method as well. Please let me know if you have any questions.
Modify with CSS?
<style type="text/css">
div#demo {
position: absolute;`
margin-left:50%;
left:-200px;
width:400px;
height: 400px;
background-color: green;
}
</style>
Hope this what you are looking for:-
HTML
<button id="show">Show</button><br/><br/>
<div id= search>
<div class="recruitment_input">
<span style="margin-top:6px;">Search<sup> </sup>:</span>
<select id="requesttype" class="select_option">
<option value="none">--Select Search--</option>
<option value="design">Department</option>
<option value="development">First Name</option>
<option value="other">Employee ID</option>
</select>
</div></div>
<div class="clear"></div><!--clear class will show your demo div down, even you have used any floating above-->
<div id='demo'>your demo box</div>
CSS
#demo{display: none;}
.clear{clear:both;}
Javascript:
$("#show").click(function(){
document.getElementById("demo").style.display = "block";
});
Here is Fiddle
Add style to your search div.
i.e.
Make <div id='search'>
as <div id='search' style='float:left'>
Then this will place your demo is apper right side of the search div
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;