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. :)
Related
https://codepen.io/sayaman/pen/gOmRepQ
Hiding a block element without using display:none?
Ok, so I learned you can't hide a parent div without also hiding the children, although in this case I can also hide the + button we see in the above codepen because it's a child of the parent, I would avoid using hide in the situation where there are many components to hide. Is there a way to hide everything without adding the display:hide styling in every remaining elements that aren't hidden by setting the height and width to 0?
<div class="multiselect" id="countries" multiple="multiple" data-target="multi-0">
<div class="title noselect">
<span class="text">Select</span>
<span class="close-icon">×</span>
<span class="expand-icon">+</span>
</div>
<div class="container">
<option value="us">USA</option>
<option value="fr">France</option>
<option value="gr">Greece</option>
<option value="uk">United Kingdom</option>
<option value="ge">Germany</option>
<option value="sp">Spain</option>
<option value="it">Italy</option>
<option value="ch">China</option>
<option value="jp">Japan</option>
</div>
</div>
<div id="lol" type="button">Click Me</div>
<div style="margin-top: 10px;">
You can select multiple values from the dropdown and delete all of them at the same time, by clicking on the 'x' button.
</div>
The above is the html.
#countries {height: 0px; width:0px;}
.title>span, .title, .expand-icon {
height: 0px;
width: 0px;
}
This is the styling I added to get rid of the former dropdown span. I did this to replace it with a div of my choosing so I can prevent the dropdown span of changing appearance like they do in most dropdown plugins. If you have any creative solutions, share them.
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
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;
}
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.
I've got the following...
<td class="lst-td" width="100%" style="">
<div style="position:relative;zoom:1">
<input autocomplete="off" class="lst" type="text" name="q" maxlength="2048" value="" title="Search" spellcheck="false" tabindex="1">
<span id="tsf-oq" style="display:none">
</span>
</div>
</td>
<select id="menu" class="InPage " tabindex="2" style="position: relative; float: right;">
<option value=9999>"a value</option>
</select>
Currently the select just displays next to the td which is a search bar rather than letting the search bar expand across the page and simply displaying within it (to the right hand side) how do I fix this?
Unsure of exactly what you are looking for but from what I can gleen you want a input with a select on top of it.
To do this set a div to position:relative and put the select and input inside it. Then set the input to width:100% and the select to position:absolute and top:0px; right:0px;
see http://jsfiddle.net/L593G/7/ for an example of this working.
From here you can use top and right to control the positioning of the select and the width of the div to control the width of the whole control.
This technique is called Relatively Absolute positioning and more information can be found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Hope this helps :-)
float:left on both the <div> and <select>
See my example on jsfiddle - http://jsfiddle.net/Gpy9Y/
Oh and why are you using tables? NO NO NO NO!!!
Update (#15:28 GMT):
div{float:left; width:100%;}
div input{width:100%;}
select{position:relative; top:-20px; left:4px;}
You should use #Michael Allen example. But if you must stick with your current mark-up, this will work. http://jsfiddle.net/Gpy9Y/5/