<div align="center" class="form-group">
<select v-model="subject" class="form-control">
<option v-for="n in papertypes" class="">{{ n.type }}</option>
</select>
<br>
Bootstrap takes the full width for the select drop down by default.
I want it to be set to get the width what it requires.
How do I achieve this?
You can make it possible by giving width for that specific class like
<div align="center" class="form-group">
<select v-model="subject" class="form-control">
<option v-for="n in papertypes">{{ n.type }}</option>
</select>
</div>
.form-group select.form-control {
display: inline-block;
width: 300px;
}
Check the codepen link
Also please notet align attribute is deprecated in HTML5. So if you want to align the content to center. Bootstrap has classes for that. Like text-center in Bootstrap3, we have justify-content-center in Bootstrap4.
Add the class w-auto to .form-control
<div align="center" class="form-group">
<select v-model="subject" class="form-control w-auto">
<option v-for="n in papertypes" class="">{{ n.type }}</option>
</select>
<br>
you can add "custom-select" class for select.
<div align="center" class="form-group">
<select v-model="subject" class="custom-select">
<option v-for="n in papertypes" class="">{{ n.type }}</option>
</select>
Related
Here is the preview of the drop down list
Then, when I click on the dropdown to scroll the items
I think it's because I have too many items in the dropdown?
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<!-- Marché -->
<label for="filterForMarkets" class="form-label">Marché</label>
</div>
<div class="col-4">
<select id="filterForMarkets" name="filterForMarkets" style="min-width: 440px" class="form-select" [(ngModel)]="search.market">
<option value="">
Tous les marchés
</option>
<option *ngFor="let m of markets$ | async" [value]="m.marketId">
{{ m.name }}
</option>
</select>
</div>
</div>
If for example, I display 3 items only, I have no problem.
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<!-- Marché -->
<label for="filterForMarkets" class="form-label">Marché</label>
</div>
<div class="col-4">
<select id="filterForMarkets" name="filterForMarkets" style="min-width: 440px" class="form-select" [(ngModel)]="search.market">
<option value="">
Tous les marchés
</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
Unfortunately, I need my loop, is there a way in css to display my items correctly, please?
Put size in <select ...
<select size="3" id="filterForMarkets" name="filterForMarkets" style="min-width: 440px" class="form-select" [(ngModel)]="search.market">
If didn't work just let me know.plz down votedown right away :)
You can set a max height to your select field using CSS:
select {
max-height: 180px
}
Either create a class and use it instead of using the select global selector but using the global selector will just handle all your select fields which is good too so, You decide!
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 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;
}
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!