I'm unable to center the text and arrow of my select dropdown using pure CSS. I have tried absolute:position and text-align:center. text-align:center centers the text only. It looks like this:
I want it to look like this:
<div class="col-sm-12 mobile-controller">
<select class="select" id="dropGroup">
<option value="head"> Head/Neck </option>
<option value="torso"> Shoulders/Torso </option>
<option value="legs"> Legs/Hips </option>
</select>
</div>
#mobile #dropGroup {
width: 100%;
height: 10vw;
border-radius: 5px;
}
.select#dropGroup {
text-align: center;
}
Related
I have a dropdown list using a <select> element. For where I place this dropdown list on the page, I only want that page's list affected by a style so I give a class of 'posts' on the select element.
In my style sheet, I have:
.posts select
{
margin-left: 40px
}
It does not work UNLESS I remove the .post. Why?
Here's the element:
<select class="form-control posts" (change)="reloadPosts({ userId: u.value })" #u>
<option value="">Select a user...</option>
<option *ngFor="#user of users" value="{{ user.id }}">
{{ user.name }}
</option>
</select>
.posts select target a select being a child of an element having the class .posts
HTML Sample where .posts select work
div {
background: lightblue;
}
.posts select {
margin-left: 40px;
}
<div class="posts">
<select>
<option>Select a value</option>
</select>
</div
In your case you should do like this, select.posts, which target a select having the class posts
Do note, there should be no space between select and .posts
HTML Sample where select.posts work
div {
background: lightblue;
}
select.posts {
margin-left: 40px;
}
<div>
<select class="posts">
<option>Select a value</option>
</select>
</div
jsfiddle
Without modifying the html, how can I align it's label to top like in the picture:
<div class="col">
<label for="foo">Select:</label>
<select id="foo" name="select">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="col">
<label for="bar">Select any of the following:</label>
<select id="bar" name="select">
<option value="11">11</option>
<option value="22">22</option>
</select>
</div>
I can align label to the top and select to the bottom if it was in two div blocks using vertical-align, but I wanted to know without modifying the html code how can I align the label to the top and select to the bottom?
Use Display: Table-cell to make both columns have the same height:
div.col {
display: table-cell;
border: 1px solid blue;
font-size: 300%;
width: 300px;
position: relative;
padding-bottom: 40px; /* Space for the 'select'*/
}
select {
position: absolute;
bottom: 0;
left: 0;
}
Demo: (Tested in Chrome) http://jsfiddle.net/cM6Yp/
I have a form that is being filled with dynamically generated dropdowns.
I have set the display property to 'table' on advice in order to keep the container centered even as the elements are added.
The problem I have is that I'm using an input type=image instead of a button to submit the form and this image will not stay in the container when the dynamic dropdowns area added. As soon as the a single dropdown is added the width increase in the div containing the form pushed the 'button' down onto the next line, while I want to keep it inline.
ps I have tried adding display: inline but this isnt working.
<div id="searchBar">
<div id="searchwrapper">
<form name="search_input">
I am looking for a
<div id="sBar1" style="display:inline;">
<select id="search_level" class="selectSearchBar" name="search_level">
<?php
echo "<option>Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}
?>
</select>
</div>
<div id="sBar2" class="selectSearchBar"></div>
<div id="sBar3" class="selectSearchBar"></div>
tutor in <input type=text class="searchbox" id="location" value="Location"/>
<input type=image src="images/search_icon.png " class="searchbox_submit" name="searchbox_submit" onclick="searchLocations()" value=""></form>
</div>
</div>
and the corresponding CSS:
#searchBar{
width:940;
margin: 0px auto;
}
#searchwrapper{
display: table;
margin: 0 auto;
min-width:600px;
padding-top: 10px;
background: red;
}
#searchwrapper form {
}
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
width:200px;
height:40px;
border-radius:9px;
font-size: inherit;
}
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
}
.selectSearchBar{
height:40px;
width:137px;
display:inline;
background-image: url('../images/up_down_arrows.png');
background-position: right center;
background-repeat:no-repeat;
margin:3px 1px 0px 0px;
border-radius:9px;
}
This image is what I want i.e. the icon at the end of the row
this is the problem after each select is added dynamically:
If I were doing this, I would start with the following HTML:
<div id="searchBar">
<div id="searchwrapper">
<form name="search_input">I am looking for a
<div id="sBar1" class="selectSearchBar">
<select id="search_level1" class="selectSearchBar" name="search_level">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
</div>
<div id="sBar2" class="selectSearchBar">
<select id="search_level2" class="selectSearchBar" name="search_level">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
</div>
<div id="sBar3" class="selectSearchBar">
<select id="search_level3" class="selectSearchBar" name="search_level">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
</div>tutor in
<input type=text class="searchbox" id="location" value="Location" />
<input type=image src="http://placehold.it/20x20 " class="searchbox_submit" name="searchbox_submit" value="">
</form>
</div>
</div>
On your select elements, make sure the id values are unique.
For the CSS:
#searchBar {
width: 940px;
margin: 0px auto;
border: 1px dotted blue;
text-align: center;
}
#searchwrapper {
min-width: 600px;
padding: 10px 0;
background: red;
display: inline-block;
}
#searchwrapper form {
}
div.selectSearchBar {
display: inline-block;
vertical-align: middle;
}
select.selectSearchBar {
width: 137px;
height: 40px;
border-radius: 9px;
display: inline-block;
}
.searchbox {
width: 200px;
padding: 5px;
border-radius: 9px;
font-size: inherit;
vertical-align: middle;
}
.searchbox_submit {
vertical-align: middle;
}
See working demo at: http://jsfiddle.net/audetwebdesign/Kjby6/
How This Works
The strategy is to keep all the elements in a single line, so you want to use either floats or inline-blocks or inline elements.
Let's start with the two simplest elements, .searchbox and .searchbox_submit, both of with are inline input elements, so no need to do anything, except adjust the vertical positioning with vertical-align: middle (my choice, but please adjust as you see fit).
The div.selectSearchBar is a block level element by default, so set display: inline-block and vertical-align: middle.
For the select.selectSearchBar, specify the height and border radius and use display: inline-block in case you want to add margins or padding or whatever you may need for styling.
Now, all your elements sit a horizontal line and are use vertically-align: middle to place your input elements with respect to the inline text.
These elements are enclosed by #searchwrapper, so I want this box to shrink-to-fit the content so use display: inline-block, add padding for visual formatting.
Finally, to center #searchwrapper, use text-align: center for the #searchBar parent container.
You need to increase the width of the main container, #searchBar (currently 940px) or decrease the width of the "Location" input field just enough so that there is room left for the search icon / submit button. The issue is that the current width isn't enough to fit everything on one line after the additional select dropdown is added.
You can easily decrease the width of the "Location" input since there is a lot of blank space that the text doesn't fill.
I'm editing someone other's code, there's an existing form and css file, what I did is that I added 5 "select" tags into the form, and I want to make the selects inline.
Each select has a label, so I put them two in a div, thus I have 5 divs.
I want to put the first 3 div in one row, and last 2 in another row.
I was working on the css file for hours to get things work, but still failed.
The problem I'm getting now is that I cannot put the s in the same line, each of them occupies a separate line, so I have 5 rows in the form now... but I just need 2 rows.
Please help me on that, not quite familiar with CSS.
<html>
<link rel="stylesheet" href="css/mrbs.css.php" type="text/css">
<link rel="stylesheet" media="print" href="css/mrbs-print.css.php" type="text/css">
<form id="add_room" class="form_admin" action="addsystem.php" method="post">
<fieldset>
<legend>Add System</legend>
<div id="sdw-div" style="white-space:nowrap; display:inline">
<label for = "sdw">sdw:</label>
<select id="sdw" name="sdw" style="display:inline">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div id="etl-div" style="white-space:nowrap; display:inline">
<label for = "etl">etl:</label>
<select id="etl" style="display:inline" name = "etl">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div id="hdm-div" style="white-space:nowrap; display:inline">
<label for = "hdm">hdm:</label>
<select id="hdm" style="display:inline" name = "hdm">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div><strong>
.........other two are just the same....
</form>
</html></strong>
and here is the css file for form_admin
form.form_admin {float: left; clear: left; margin: 2em 0 0 0}
.form_admin fieldset {float: left; width: auto; border: 1px solid <?php echo $admin_table_border_color ?>; padding: 1em}
.form_admin legend {font-size: small}
.form_admin div {float:left; clear:left;}
.form_admin label {
display: block; float: left; clear: left;
width: <?php echo $admin_form_label_width ?>em; min-height: 2.0em; text-align: right;
}
.form_admin input {
display: block; float: left; clear: right;
</strong> width: <?php echo $admin_form_input_width ?>em;
margin-top: -0.2em; margin-left: <?php echo $admin_form_gap ?>em;
font-family: <?php echo $standard_font_family ?>; font-size: small;
}
.form_admin select {
display: block; float: left; clear:right; margin-left: 1.0em;
}
.form_admin input.submit {
width: auto; margin-top: 1.2em; margin-left: <?php echo number_format(($admin_form_gap + $admin_form_label_width), 1, '.', '')?>em
}
Give div a float:left; css that will display them as inline.
Also remove <strong> from end of html tag.
Demo
try :
display:inline-block
i find it works better than elseware options
your divs are already display:inline, besides , you also have float:left-ed them.
still if they don't appear in the same line,then there is just one thing, your parent container doesn't have proper width to accommodate all the divs in same line.
so give appropriate width to your parent container
see this fiddle. everything's working!
Add style float:left for all five div. Also add a
<div style="clear:all"></div>
after third div. Also needed a parent container with proper width;
I am having trouble styling a form. The section labelled destination group I cannot get it to align vertically. See screenshot below. I have added color borders to help with debugging of the css.
I have created a js fiddle for this
http://jsfiddle.net/uuNTC/
Below is a stripped down version of the code
HTML
<ul id="ulFilterList">
<li>
<div class="filterLabel" id="labelDates">Dates</div>
<input type="text" value="03/09/2012" name="dateFrom" id="dateFrom" class="dateInputs">
<input type="text" value="09/09/2012" name="dateTo" id="dateTo" class="dateInputs">
</li>
<li>
<div class="filterLabel" id="labelOnRequest">Include "On Request" With:</div>
<select name="onRequest" id="onRequest">
<option selected="selected" value="1">Stop Sell</option>
<option value="2">Available</option>
</select>
</li>
<li>
<div class="filterLabel" id="labelDestinationGroups">Destination Group:</div>
<select size="10" multiple="multiple" name="destinationGroups[]" id="destinationGroups">
<option value="Tunisia All">Tunisia All</option>
<option value="Turkey All">Turkey All</option>
<option value="Turkey PNR">Turkey PNR</option>
<option value="UAE Abu Dhabi ">UAE Abu Dhabi </option>
<option value="UAE All Dubai">UAE All Dubai</option>
<option value="VIE">VIE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
</select>
</li>
</ul>
the css
ul#ulFilterList,
ul#ulFilterList li { margin: 0px; padding: 0px }
.dateInputs { margin:0px; text-align:left; width: 50px; display: inline-block; }
#ulFilterList { width: 100% }
ul#ulFilterList li
{
list-style:none;
margin-bottom: 5px;
border: solid 1px blue;
}
.filterLabel {
font-weight: normal;
width: 29%;
display: inline-block;
text-align:right;
height: 100%;
font-size: 11px ;
margin-top: auto
}
One of the benefits of using display: inline-block; is that you can specify a vertical-alignment. In this fiddle I've set the vertical-alignment for the .filterLabel elements to vertical-align: top;. On the down-side, you'll need to return to the default vertical-align: baseline; for labels that are next to single-line inputs (the "Dates" and "Include 'On Request' With" labels), or style the corresponding INPUT elements upwards a bit.