In my code I am using bootstrap css for styling . I have written a code for a drop down menu with class form-control. The problem is that I cant adjust the width of the form. It is now like occupying the total width of the webpage like:
--------------------------------------------------------------------------------------------------------| Choose the option
I just need to adjust the size of the dropdown . I am totally new to this field .
Somebody can help me out .?
I am attaching the part of code with this :
<body>
<select class="form control">
<option value= "1">one</option>
<option value= "2">two</option>
<option value= "3">three</option>
</select>
</body>
bootstrap link
Well, if you are using Bootstrap, the class .form-control by default has the following properties:
.form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
So, if you are using bootstrap you will have to override it using a custom class/id, or set a parent with a fixed width.
HTML
<div class="form-container">
<select class="form control">
<option value= "1">one</option>
<option value= "2">two</option>
<option value= "3">three</option>
</select>
</div>
CSS
.form-container{
width: 30%; //or width: 200px, etc
}
You can try using the bootstrap grid system. Adding a pre-defined responsive class like "col-xs-4" to your class list for the select element. (note this will only cover your width requirement, but if all elements use the grid system is can help keep the form looking clean and well organized).
A helpful reference for the bootstrap grid system may be found here http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Link your own stylesheet to the document...
Declare the class form-control in this document.. or add a new class to the html next to this, then add the height/width attributes:
Html:
<select class="form-control resizeformc">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
CSS:
.resizeformc {
width: 150px;
height:200px;
}
Related
I use select element with fixed width. However, when I have option element nested in select, which has quite long text, then, when this option is being selected, it does not get full background-width (I want the background to be 100%) and also the text is hidden.
Here is the example with the last option being hidden.
.x {
width: 200px;
overflow-x: auto;
}
<select class="x" size="4">
<option class="y" selected>xyz</option>
<option class="y" selected>xyz</option>
<option class="y" selected>xyz</option>
<option class="y" selected>xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</option>
</select>
You can see the full width using a single css property . Please add a class to solve the issue :
.y{
width: fit-content;
}
Using this style, you could see that the background color gets filled to the full width.
.form-control, .custom-select {
/* center form controls */
display: inline-block;
/* override Bootstrap's 100% width for form controls */
width: auto;
}
<form action="/" method='post'>
<br>
<div class="form-group">
<select name="show_ID" required="required" class="custom-select">
<option selected>Select something</option>
<option value="Something1">Something 1</option>
<option value="Something2">Something 2</option>
</select>
</div>
</div>
<div class="form-group">
<input class="form-control" name="something2" placeholder="Something 2" type="text"/>
</div>
</form>
What's of interest here are the two Bootstrap elements .form-control and .custom-select. The HTML for each select box looks like this, although the option text in each is of different length:
As you can see, the form boxes in the custom-select boxes do not match each other, nor that of the form-control boxes, even though both have the exact same style specs.
I'm guessing what's happening is that the auto works on text boxes, since there is no pre-existing text to size the box off of, but that auto translates to "based on content" on the boxes that do have pre-existing text (i.e. custom-select).
The auto sizing of form-control works well on one HTML page where only form-control is used, but on another page I need to use both form-control and custom-select, and that's where the size becomes an issue. I've tried setting a specific size for custom-select (eg. 65%), but even if I find a way to match the different box sizes (all custom-select boxes with the form-control boxes) on a desktop, on a mobile device they are off again, since auto means something different than, say, 65% on a cell phone.
How can I make all boxes the same size - both on desktop and mobile devices?
Try this: It is working for me.
[Here You Go:][1]
[1]: https://jsfiddle.net/whr4yc9v/1/
So I have a dropdown menu like this:
<select class="ui search dropdown">
<option value="">Caption</option>
<option value="someoption">SomeOption</option>
</select>
Neither adding width="20" nor style="width: 20px" sets the width as I want to. I observed, that in the browser, actually different code is shown; the select is transformed into a div, so it seems like that transformation doesn't inherit the changed width.
How would one go about setting a different width for such a menu?
If the <div> that's added has a class or id, use CSS to target it.
<style>
#id{
/*styles*/
}
.class{
/*styles*/
}
.parentClass>div{
/*styles*/
}
#selectWrapper>div{
/*styles*/
}
</style>
Try to wrap the select with an identifier and targeting the select from there.
.wrapper select {
width: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.css">
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.js"></script>
<div class='wrapper'>
<select class="ui search dropdown">
<option value="">Caption</option>
<option value="someoption">SomeOption</option>
</select>
</div>
This is the solution, proposed by Indrek Siitan from the Gitter Chat:
Have a div around it with a specific width and then append the fluid class to the dropdown. Namely:
<div style="width: 20px">
<select class="ui fluid search dropdown">
<option value="">Caption</option>
<option value="someoption">SomeOption</option>
</select>
<div>
Try this:
<select id="drpdwn" class="ui search dropdown"> <option value="">Caption</option> <option value="someoption">SomeOption</option> </select>
#drpdwn{ width: 20px;}
id has higher priority than class. This one works
I have a listbox and I want to decrease its width.
Here is my code:
<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
This code works on IE 6 but not in Mozilla Firefox (latest version). Can anybody please tell me how I can decrease the width of the dropdown list on Firefox?
Try this code:
<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
CSS:
#wgtmsr{
width:150px;
}
If you want to change the width of the option you can do this in your css:
#wgtmsr option{
width:150px;
}
Maybe you have a conflict in your css rules that override the width of your select
DEMO
The dropdown width itself cannot be set. It's width depend on the option-values. See also here ( jsfiddle.net/LgS3C/ )
How the select box looks like is also depending on your browser.
You can build your own control or use Select2
https://select2.org
This:
<select style="width: XXXpx;">
XXX = Any Number
Works great in Google Chrome v70.0.3538.110
try the !important argument to make sure the CSS is not conflicting with any other styles you have specified. Also using a reset.css is good before you add your own styles.
select#wgmstr {
max-width: 50px;
min-width: 50px;
width: 50px !important;
}
or
<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
Create a css and set the value style="width:50px;" in css code. Call the class of CSS in the drop down list. Then it will work.
If you want to control the width of the list that drops down, you can do it as follows.
CSS
#wgtmsr option {
width: 50px;
}
You can style it on your CSS file using the id = #wgtmsr.
#wgtmsr{
width: 50px;
}
And then remove the style element = 'style="width: 50px;"'
I'm attempting to provide a border for a select tag and have been pulling my hair out for the last 2 hours.
I had it done before using position via absolute and relative, but my hard drive crashed and all my code was lost.
Put simply I have
<div style="position:relative; border:1px solid #cc0000;">
<select style="position:absolute;">
<option>1</option>
</select>
</div>
This doesn't seem to work... The div automatically expands to the parent div's width as opposed to the width of its content
How do I set the div to automatically fit to the contents of the select box AND have a border of 1px without getting pushed out of the frame?
If you need more code, please say so.
Any and all help is appreciated. :)
EDIT
Here's some more code...
HTML:
<div class="orderQuantity">
<label for="quantity" class="orderInputLabel">Quantity:</label>
<div> <!--THIS IS THE DIV THAT NEEDS A BORDER!! -->
<select id="quantity_cs" name="quantity_cs" autocomplete="off" class="required">
<option value=''> </option>
<option value='10'>10</option>
<option value='20'>20</option>
<option value='30'>30</option>
<option value='40'>40</option>
<option value='50'>50</option>
<option value='60'>60</option>
<option value='70'>70</option>
<option value='80'>80</option>
<option value='90'>90</option>
<option value='100'>100</option>
</select>
</div> <!-- end of div that needs border -->
</div>
CSS:
.orderQuantity {
margin-top: 12px;
}
This is all I have at this point. I've tried numerous things, none of which worked. Including making the select absolute and the parent div relative and vice versa.
Help? D:
You can use jQuery for this. Cross Browser Compatible. Check working example http://jsfiddle.net/Npv8P/2/
I've figured out a solution that involves floats and "clear:both" that appears to work cross browser.
<div style="float:left;"> <!-- just toggle border on this div using jquery -->
<select>
<option>1</option>
</select>
</div>
<div style="clear:both;"></div>
Seems to work fine. Thanks to Mahima for reaffirming what I was trying and to Hussein for the help. :)