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.
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;
}
I'm using bootstrap and getting great consistency across all browsers and devices, except for this issue. I've just tested our customer details form on an iPad1 in both Safari AND Chrome, and get the same issue I can't replicate else where. Where has the spacing gone between the legend and the first form group?
I have 2 other legends further down the form and the div/inputs immediately after have a nice margin as expected.
To prove it is always the first LEGEND causing the problem, I simply duplicated the legend tag (second screen shot) and hey presto, the spacing between the second legend and form-group is spot on.
I cannot explain this!
<form class="form-horizontal" role="form" id="customer-form" action="#" method="get">
<fieldset>
<legend>To Purchase, Please Enter Your Personal Customer Details</legend>
<div class="form-group">
<label for="customer_title" class="col-sm-4 control-label">Title *</label>
<div class="col-sm-8">
<select name="customer_title" id="customer_title" class="form-control">
<option></option>
<option value="Mr">Mr. </option>
<option value="Mrs">Mrs. </option>
<option value="Miss">Miss. </option>
<option value="Ms">Ms. </option>
<option value="Dr">Dr. </option>
<option value="Rev">Rev. </option>
</select>
</div>
</div>
Working solution:
.hack legend {
margin-bottom: 0 !important;
border-bottom: none !important;
}
.hack legend:after {
display: block;
height: 20px; /* #baseLineHeight; */
border-top: 1px solid #e5e5e5;
content: "";
}
Another possible work-around, didn't work in this case:
form.form-horizontal > fieldset {
& > legend {
margin-bottom: 0;
}
& > div.form-group:first-of-type > * {
margin-top : 20px;
}
}
Reference: https://github.com/twbs/bootstrap/issues/2544
I have that code:
<form class="choose-game" action="?" method="get">
<fieldset>
<select name="game" id="game" required>
<option value="battlefield 4">Battlefield 4</option>
<option value="call of duty ghosts">Call Of Duty: Ghosts</option>
<option value="fifa 2014">FIFA 2014</option>
<option value="league of legends">League of Legends</option>
<option value="need for speed rivals">Need For Speed: Rivals</option>
</select>
<input type="submit" value="Wybierz">
</fieldset>
</form>
JSFiddle, but I want to input fill the remaining space in fieldset (except interstice). Any other one solution from StackOverflow doesn't work. What I must to do?
If you are okay with setting the width of the select box to a percentage you can then have the input fill the remaining width. You will also have to float the input and select to the left.
Try modifying the .choose-game select and input properties like this
.choose-game select { width:20%; float:left }
.choose-game input[type="submit"] {
background-color: #3498db; color: #fff; cursor: pointer; width:80%; float:left;
}
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!
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;
}