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.
Related
I had a code using a select (but may be anything else) and that (and others) selects may or may not use a css width (style or class). So I had:
<select>...</select>
...
<select style="width: 100px">...</select>
The first select was using the default width to fit the longer option. So far, so good. But now in the real case (with a web components framework), these selects are generated inside a span like this:
<span><select>...</select></span>
...
<span style="width: 100px"><select>...</select></span>
But this results in different layout. In the second case the select does not adjust its size to the parent width.
If I change the component to generate:
<span style="width: 100px"><select style="width: 100%">...</select></span>
It works for the second case but the first case (without a width in the span) it will not have the default size anymore.
How can I adjust the select so it works like the width applied (or not) to the span would had been applied (or not) directly to the select?
Ok, not sure if this is what you are after, but the below, will take the width of the longest option if no width is applied to the span, or will take the width of the span if a width is applied
.span {
display: inline-block;
}
.select {
width: 100%;
max-width: 100%;
}
<strong>No width span</strong><br>
<span class="span">
<select class="select">
<option>a long option</option>
</select>
</span><br><br>
<strong>Span with width</strong><br>
<span class="span" style="width:200px;">
<select class="select">
<option>a long option</option>
</select>
</span>
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;
}
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;"'
The following code produces a listbox with 2 options:
<select size="10">
<option>1</option>
<option>2</option>
</select>
Is it possible to always show a vertical scrollbar in this listbox?
I'm asking this question because style="overflow-y: scroll;" doesn't work here in IE7.
It will work in IE7. But here you need to fixed the size less than the number of option and not use overflow-y:scroll. In your example you have 2 option but you set size=10, which will not work.
Suppose your select has 10 option, then fixed size=9.
Here, in your code reference you used height:100px with size:2. I remove the height css, because its not necessary and change the size:5 and it works fine.
Here is your modified code from jsfiddle:
<select size="5" style="width:100px;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
this will generate a larger select box than size:2 create.In case of small size the select box will not display the scrollbar,you have to check with appropriate size quantity.Without scrollbar it will work if click on the upper and lower icons of scrollbar.I show both example in your fiddle with size:2 and size greater than 2(e.g: 3,5).
Here is your desired result. I think this will help you:
CSS
.wrapper{
border: 1px dashed red;
height: 150px;
overflow-x: hidden;
overflow-y: scroll;
width: 150px;
}
.wrapper .selection{
width:150px;
border:1px solid #ccc
}
HTML
<div class="wrapper">
<select size="15" class="selection">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
</div>
I guess you cant, this maybe a limitation or not included in the IE browser. I have tried your jsfiddle with IE6-8 and all of it doesn't show the scrollbar and not sure with IE9. While in FF and chrome the scrollbar is shown. I also want to see how to do it in IE if possible.
If you really want to show the scrollbar, you can add a fake scrollbar. If you are familiar with some of the js library which use in RIA. Like in jquery/dojo some of the select is editable, because it is a combination of textbox + select or it can also be a textbox + div.
As an example, see it here a JavaScript that make select like editable.
add:
overflow-y: scroll
in your css bud.
Is it Possible to keep the background-image for drop down box using CSS.
For Textbox is getting correctly.
can anybody give sample example
Yes is possible. You can style the elements not the select box, as the select box gives only the line when you selected something.
try this css:
<style>
.green { background:green}
.red { background:red}
.blue{background:blue}
</style>
and this html:
<form>
<select class='green'>
<option class='red'>A</option>
<option class='blue'>B</option>
</select>
</form>
You will see that the main line is green and the options are colored each one to its colour. You can also attach images to the background for each css class.
Here you go
<select>
<option>One</option>
<option>Two</option>
<option>More ... </option>
</select>
css
select {
background: url("https://fastly.picsum.photos/id/1031/200/300.jpg?hmac=HVS-5o6kRugo6EcoZhPEsxm8Jnl7-J5tuEc20pN029c") repeat-x 0 0;
}