I have a form with a drop down list of venues and a submit button.
They are supposed to be on the same line, but since the list of venues is dynamic, it could become too long and push the button down.
I was thinking of setting a max-width property to the select, but I'm not clear whether this will work in all browsers. Do you have any suggestions on a workaround?
<form action="http://localhost/ci-llmg/index.php/welcome/searchVenueForm" method="post" class="searchform">
<select name="venue">
<option value="0" selected="selected">Select venue...</option>
<option value="1">venue 0</option>
<option value="2">club 1</option>
<option value="3">disco 2</option>
<option value="4">future test venue</option>
</select>
<input type="submit" name="" value="Show venue!" class="submitButton" />
</form>
css:
.searchform select {
max-width: 320px;
}
.searchform input.submitButton {
float: right;
}
If the venues are generated on the server side, you can use your server-side scripting to cut them down to a specific maximum character count.
When using pure CSS I'd also try setting overflow:hidden, both on the select and the option elements. Also try setting max-width on the option element. When it works in all non-IE, you can use the usual scripts to add max-width support for IE.
try:
fieldset select {
width: auto;
}
Related
I have a select box like
But when I use the select box in css, it looks like below
how to get the large option box and width have to cover upto text.
You can just add it in the css file.
HTML:
<div >
<select>
<option value="0">Select:</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
</div>
And in css you add:
select, option {
width: 250px;
}
This is part of my code. I'm trying to work with drop down. I'm unable to select the drop down items. If I removed the line style="padding: 80px;" at the last <span> element, it works well. But I need that line for alignment. This is Fiddle
<input type="text" name="city" maxlength=20 size=15/>
<span style="padding: 10px;"></span>
<select>
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select>
<span style="line-height:20px"> City </span>
<span style="padding: 80px;"> State/Province </span>
Can you please tell what is the problem in this code. Why padding: 80px; causes the problem?
You need to toggle with z-index.
See : http://jsfiddle.net/3xBPL/7/
<select style="z-index:999; position:absolute">
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select>
<span style="padding:80px; z-index:1;"> State/Province </span>
Reason : The span area is overlapping the select box
instead of padding:80px try giving padding-left:80px. Because the padding of the element overlapping the <Select>
http://jsfiddle.net/3xBPL/9/
I think problem is in your span cause span start from the top. It overlapping the drowdown box.
Please checck JSFIDDLE
I am editing this code -
<input type="text" name="city" maxlength=20 size=15/>
<span style="padding: 10px;"></span>
<select>
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select>
<br>
<span style="line-height:20px"> City </span>
<!--<span style="padding:80px; border:1px #cccccc solid;"> State/Province </span> -->
<span style="padding:0px 80px 80px 80px;"> State/Province </span>
Please use -
padding:0px 80px 80px 80px;
The padding:80px is definitely the problem.
Here's a screencap of Firebug: http://screencast.com/t/ISPMaYkyK1
Here's a JSFiddle of the solution: http://jsfiddle.net/jrconway3/4gVUn/
In the screenshot, you can see that the padding is causing your span to cover up the two input boxes. The span is an inline element, so some padding will work depending on the circumstances, but it still tries to line up with the other items. The vertical padding does not work because technically, all your current items are on the same line.
padding-left: 80px;
You can specify "padding-left" to ONLY set left padding. This will fix it so you can properly click on the items. Changing the z-index on different elements will set certain elements to have priority over others, making them appear "over" other elements. But that doesn't solve the root of the problem.
Others have already answered the question, but I already started writing so I decided I'd finish it anyway.
your code has overlap with your drop down
i put it in fiddle
also i give it a color to make it more visible , try to add some new <br> to see how it goes around
span{
background-color:red;
}
its because, with padding 80px, you will expand the span, and when you click dropdown, website say "the one that clicked is span, not dropdown, so dropdown wont viewed"
you can add border by doing this.. it will explain to you more clearly
<span style="padding:80px;border:1px solid black"> State/Province </span>
what do you expect with that span using padding:80px by the way?
I am trying to create a simple label and select box for a form.
I want this: [LABEL] [SELECT BOX]. Inline. All on the same line. Simple, eh?
Yet when I use the inline form element from bootstrap, it wraps the box:
<form class="form-inline" role="form">
<label for="sort-values">Sort:
<select id="sort-values" class="form-control">
<option value="2">Distance</option>
<option value="3">Rating</option>
<option value="4">Price</option>
</select>
</label>
</form>
What am I missing? Example here: http://bootply.com/79458
The width of the element .form-control is the problem..
.form-control {
width: 100%;
}
It is currently at 100%.. if you want it to work, you can either remove the width completely.. or just specify a smaller width, such as 200px;
Forked example here
You can use two methods for linking label and select. First method: id for select and attribute for for label. Second: including select inside of label. Not necessary use both of them.
Code:
<form class="form-inline" role="form">
<label class="control-label" for="sort-values">Sort:</label>
<select id="sort-values" class="form-control">
<option value="2">Distance</option>
<option value="3">Rating</option>
<option value="4">Price</option>
</select>
</form>
Example: http://bootply.com/79462
How can I add custom CSS select box styling for Chrome and Safari? IS there a fix?
Answer:
You need to add -webkit-appearance: none; and a height value for Chrome and Safari.
Any Suggestions?
Resource:
http://bavotasan.com/2011/style-select-box-using-only-css/
Try it on JSFiddle Remove and add that style in Google Chrome:
Before:
- http://jsfiddle.net/JoshSalway/jw6Qy/
After:
- http://jsfiddle.net/JoshSalway/cMbTB/
select{
-webkit-appearance: none;
}
<select> tags are stubborn creatures but there is a way.
If there's a "size" parameter in the tag, almost any CSS will apply. Using this technique, I've created a fiddle that's practically equivalent to a normal select tag, plus the value can be edited manually like a ComboBox in visual languages (unless you put readonly in the input tag).
So here's a minimal example to see the principle behind:
(you'll need jQuery for the clicking mechanism):
<style>
/* only these 2 lines are truly required */
.stylish span {position:relative;}
.stylish select {position:absolute;left:0px;display:none}
/* now you can style the hell out of them */
.stylish input { ... }
.stylish select { ... }
.stylish option { ... }
.stylish optgroup { ... }
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick="$(this).closest('div').find('select').slideToggle(110)">
<br>
<select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">
<optgroup label="Fantasy"></optgroup>
<option value="gandalf">Gandalf</option>
<option value="harry">Harry Potter</option>
<option value="jon">Jon Snow</option>
<optgroup label="Comics"></optgroup>
<option value="tony">Tony Stark</option>
<option value="steve">Steven Rogers</option>
<option value="natasha">Natasha Romanova</option>
</select>
</span>
</div>
Here's the fiddle with some more styles:
https://jsfiddle.net/dkellner/7ac9us70/
Hope this helps!
Consider the following code:
<div data-role="fieldcontain">
<label for="name">Car</label>
<select data-inline="true" data-theme="b">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<span>message</span>
</div>
The output as follows:
There is a big gap between the component and the message. How can I reduce this gap to a desired amount?
(I tried applying CSS such as width:100px to the component, but no success)
EDIT :
Here is the live demo: http://jsbin.com/icikif/1
The reason can be found in the CSS of jQm:
#media (min-width: 450px)
.ui-field-contain .ui-select {
width: 78%;
display: inline-block;
}
Add a custom Stylesheet and overwrite the width setting.
I'm not sure what you're asking for, but if you want the "message" to be closer to the styled select, add this rule in your CSS:
.ui-field-contain .ui-select {
width: auto !important;
}
just change auto to the desired amount.