I recently started to use bootstrap RC2 and jquery select2, but if I use it with bootstrap form-control class I get unexpected margins and looks weird.
Could someone please give me a hint on this?
html
<div class="form-group">
<div class="col-lg-6 sepereate-group">
<select name="gender" id="gender" data-placeholder="Select gender" class="form-control select2">
<option></option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
<div class="form-group">
<div class="col-lg-6 sepereate-group">
<select name="gender" id="gender" data-placeholder="Select experience" class="form-control select2" >
<option></option>
<option value="1">No experience</option>
<option value="2">Some experience</option>
<option value="3">Experienced</option>
<option value="4">Very experienced</option>
</select>
/div>
</div>
Okay solved, removed the form-group class from the select tag and
and defined select2 this way
$(".select2").select2({ width: '100%' });
I ran into the same problem and found this library. Works like expected!
Related
I have the following code on my page for dropdown list box. No matter how much I try, I cannot make the width of the dropdown box bigger. Below is my code:
<div class="form-group row">
<div class="col-sm-1"> </div>
<label for="inputTitles" class="col-sm-3 col-form-label"><asp:Label ID="lblDocType" runat="server"></asp:Label></label>
<div class="col-sm-8">
<select class="form-control" aria-label="Default select example">
<option selected>--Please Select a title from the list-</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
I tried to put this style sheet in the asp:DropDownList class:
<style>
.ddlwidth {
width: 1000px !important;
}
</style>
<asp:DropDownList class="form-control ddlwidth" ID="ddlDocType" runat="server" OnSelectedIndexChanged="DocType_Changed" AutoPostBack="true" Width="700" >
That didn't work either. If I remove the form-control and then increase the width of the dropdownList then the width becomes bigger. The reason, I don't want to remove the form-control class because I want to keep the look and feel of form-control class.
How can I increase the width of the dropdownlist box without removing the form-control class?
Below is what it looks like on my web page:
Try this in your style sheet:
.form-control {
width: 394px;
And then:
<select class="form-control" aria-label="Default select example">
<option selected>--Please Select a title from the list-</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I have the following selection boxes that are working with select2 js:
<!-- Selections for the table -->
<div class="form-group row">
<div class="col-xs-2">
<label for="month" class="control-label">Year</label>
<select class="form-control select2" id="year" name="year" data-placeholder="Select a year">
<option value="2015">
xxx
</option>
...
</select>
</div>
<div class="col-xs-2">
<label for="manager" class="control-label">Manager</label>
<select class="form-control select2" id="manager" name="manager" data-placeholder="Select a manager" multiple="multiple">
<option value="2">
xxx
</option>
...
</select>
</div>
<div class="col-xs-2">
<label for="user" class="control-label">User</label>
<select class="form-control select2" id="user" name="user" data-placeholder="Select a user" multiple="multiple">
<option value="87">
xxx
</option>
...
</select>
</div>
</div>
I am using bootstrap 3 and it is strange, when I get a smaller window, the boxes overlap :(. You can see this in the image below.
How can I have bootstrap to make the different select get below each other when there is not enough space and in a line if there is enough space horizontally?
Use below CSS:
.select2{width:100%}
if this not working then you can use:
.select2{width:100% !important}
I m a newbie in Bootstrap and I have encounter a problem as I wan to display a select box in block style and another form group beside.
Here is my code
<div class="form-inline>
<div class="form-group">
<label for="EventType">Event Type</label>
<select class="form-control">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
</div>
</div>
Current Output is
My desire output is display both form group class div in inline method. But currently output show everything in inline while not div only. Is there any method to do so?
If possible write the HTML as follow-
<form class="form" role="form">
<div class="form-inline>
<div class="form-group">
<label for="EventType">Event Type</label>
<select class="form-control">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
</div>
</form>
Again you can do this with the HTML you have provided. In this case, you have to write some custom CSS as follow-
.form-group{
display:block;
clear:both;
width:100%;
}
I am having trouble implementing a form in Twitter Bootstrap2.
I've set up a JS Fiddle http://jsfiddle.net/manishap/WNSCW/15/
Here is the code:
<div class="container">
<div id="ratingSubectives" class="row-fluid">
<form class="well" >
<fieldset>
<div class="control-group span3">
<label class="control-label" for="select01">Aaaaaaaaaaaa</label>
<div class="controls"><select id="select01">
<option value=""></option>
<option value="A">A</option>
<option selected="selected" value="B">B</option>
<option value="C">C</option>
</select></div>
</div>
<div class="control-group span3">
<label class="control-label" for="select02">Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</label>
<div class="controls"><select id="select02">
<option></option>
<option selected="selected" value="A">B</option>
<option value="B">B</option>
<option value="C">C</option>
</select></div>
</div>
<div class="control-group span3">
<label class="control-label" for="select03">Ccccccccccc</label>
<div class="controls"><select id="select03" disabled>
<option value="A">A</option>
<option value="B">B</option>
<option selected="selected" value="C">C</option>
</select></div>
</div>
<div class="control-group span3">
<label class="control-label" for="select03"> </label>
<div class="controls"><button type="submit" class="btn">Submit</button></div>
</div>
</fieldset>
</form>
</div>
I'm trying to place 3 select controls with labels horizontally across a div. It looks right in English with short labels. However, eventually this is a site that is delivered in multiple languages, and if the labels get long (as in the middle selector), the label text overlaps the text next to it. How do I get the text to wrap?
I tried adding a max-width: 100%, as per another answer and that didn't work. Maybe I put the labels in divs instead of label tags...
Thanks for any suggestions.
Use the word-wrap attribute to break the word:
.control-label {
word-wrap: break-word;
}
The size attribute doesn't seem to be working with Twitter bootstraps css file. Am I missing something?
<div class="control-group">
<div class="controls" >
<select class="span2" multiple="multiple" id="multiSelect" size="2">
<option>Assigned1</option>
<option>Assigned2</option>
<option>Assigned3</option>
<option>Assigned4</option>
<option>Assigned5</option>
</select>
</div>
It should be working. I think you forgot a class from the container div.
<div class="control-group select optional">
<label class="select optional control-label"> *Category</label>
<div class="controls">
<select name="name" id="id" class="select optional" size="2">
<option value="">1</option>
<option value="">1</option>
</select>
</div>
</div>
Try this example and check how it works out. that's the way i'm using.