How to vertically Align a text with a Select Option.
Link: http://mink7.com/projects/test/dashboard.html
Use labels as in this example fiddle. Markup:
<form action="">
<label for="startDate">Start Date:</label>
<select id="startDate">
<option value="Mar 04">Mar 04</option>
</select>
<label for="endDate">End Date:</label>
<select id="endDate">
<option value="Aug 04">Aug 04</option>
</select>
</form>
When this does not work, then there are some inherited styles interfering and try to set vertical-align: middle as shown in this demo.
In IE and Chrome the select tag text is aligned center automatically, not in firefox. To only target firefox with a padding, without compromising IE and Chrome:
Use a browser specific hack for FF and give it a padding-top:
#-moz-document url-prefix() {
.select select{
padding-top: 8px;
}
}
Related
Im using Ruby on Rails 4 with twitter bootstrap to display a form_for (twitter bs form_horizontal). The styling below works correctly (label, input and hint display next to each other ) for normal fields (non error'd) when rails wraps elements in the field_with_errors div however the hint is dropped to the beneath the input element.
<div class="control-group required">
<div class="field_with_errors"><label class="control-label" for="lot_commonname_id">Common Name</label></div>
<div class="controls">
<div class="field_with_errors"><select id="lot_commonname_id" name="lot[commonname_id]"><option value="">Please select</option>
<option value="1">x</option>
<option value="2">y</option>
<option value="3">z</option>
</select>
</div>
<div class="hint">
<a href="#" rel="tooltip" data-original-title="xyz test.">
<i class="icon-info-sign"></i>
</a>
</div>
</div>
</div>
.field_with_errors {
#extend .control-group;
#extend .error;
}
.form-horizontal .field_with_errors
{
margin: 0;
}
.form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after
{
display: block;
clear: none;
}
the following jsfiddle http://jsfiddle.net/a78B5/6/ demos the problem
Divs default to display:block so it will naturally drop down to be below your input. Add styling to use display:inline or display:inline-block and it will move back to being next to your text box.
i have two divs search and demo. And div demo is
hidden {
display: none
}
and onClick of button
i want to show div demo, whose content is loaded onClick event. Although div demo appears but on right of search div. i want it below search div.
Here is my code:
<div id= search>
<div class="recruitment_input">
<span style="margin-top:6px;">Search<sup> </sup>:</span>
<select id="requesttype" class="select_option">
<option value="none">--Select Search--</option>
<option value="design">Department</option>
<option value="development">First Name</option>
<option value="other">Employee ID</option>
</select>
</div>
</div>
<div id=demo></div>
EXAMPLE HERE
I believe this is what you are trying to accomplish. The $('#requesttype').on('change') method could be replaced with a $('button').on('click') method as well. Please let me know if you have any questions.
Modify with CSS?
<style type="text/css">
div#demo {
position: absolute;`
margin-left:50%;
left:-200px;
width:400px;
height: 400px;
background-color: green;
}
</style>
Hope this what you are looking for:-
HTML
<button id="show">Show</button><br/><br/>
<div id= search>
<div class="recruitment_input">
<span style="margin-top:6px;">Search<sup> </sup>:</span>
<select id="requesttype" class="select_option">
<option value="none">--Select Search--</option>
<option value="design">Department</option>
<option value="development">First Name</option>
<option value="other">Employee ID</option>
</select>
</div></div>
<div class="clear"></div><!--clear class will show your demo div down, even you have used any floating above-->
<div id='demo'>your demo box</div>
CSS
#demo{display: none;}
.clear{clear:both;}
Javascript:
$("#show").click(function(){
document.getElementById("demo").style.display = "block";
});
Here is Fiddle
Add style to your search div.
i.e.
Make <div id='search'>
as <div id='search' style='float:left'>
Then this will place your demo is apper right side of the search div
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 this HTML:
<input type="radio">
<span class="label">
<label id="options_34537_2label" for="options_34537_2">
</label>
</span>
Now I also have some CSS, which hides the radio button itself and puts an image in front of my label.
input[type="radio"] {
display: none;
}
label:before {
background: url("someimage.jpg") no-repeat scroll 0 0 transparent;
}
In IE and FF I can click the image to select the option, in Chrome, clicking does not work at all. Any idea how to solve this issue?
Thanks!
You should put the <input> inside the <label> to make it cliquable:
<label><input type="radio"></label>
And use the background property on your label directly, instead of using the :before pseudo-class. Then add some text or specify a width to show your background.
How can I get an input type="radio" the same style in all browsers. I am trying to get 3 radio buttons from left to right accross the page with the radio button and text centered in all IE9, Chrome, and FF using css. I am using all diffferent types or vertical align and padding which works on some but browsers but not all.
<input class="text-bottom" type="radio" value="1" name="ProcessingComplete">Works in FF & Chrome
<input class="middle" type="radio" value="1" name="ProcessingComplete">Works in IE
<input class="top" type="radio" value="1" name="ProcessingComplete">Works in FF & Chrome
.middle
{
vertical-align: middle;
}
.top
{
vertical-align: top;
}
.text-bottom
{
vertical-align:text-bottom;
}
As pointed out by Dario on Radio/checkbox alignment in HTML/CSS, try this:
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
}
Also, keep in mind it is best practice to wrap your radio button labels using the <label> tag.
See DEMO.