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.
In the example below:
I want the textbox to fill all available space. The problem is the dropdown width cannot be fixed, since its elements are not static. I would like to solve this with just css (no javascript if possible).
I have tried the solutions proposed to similar questions without any luck :(
Here is the fiddle: http://jsfiddle.net/ruben_diaz/cAHb8/
Here is the html:
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">General</option>
<option value="2">Fruits</option>
<option value="3">Ice Creams</option>
<option value="4">Candy</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
And here the css:
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-block;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
Updated demo (tested fine in IE7/8/9/10, Firefox, Chrome, Safari)
Float the left and right elements.
In the HTML source code, put both of the floated elements first (this is the most important part).
Give the middle element overflow: hidden; and an implict width of 100%.
Give the text box in the middle element a width of 100%.
.category_dropdown_container {
float: left;
}
input[type="submit"] {
float: right;
...
}
.resizable_text_box {
padding: 0 15px 0 10px;
overflow: hidden;
}
.resizable_text_box input {
width: 100%;
}
<div class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
...
</select>
</div>
<input name="commit" type="submit" value="Ask!" />
<div class="resizable_text_box">
<input id="question_text_box" name="question[what]"
placeholder="Write a query..." type="text" />
</div>
The relatively recent 'flex' display css property solves this problem for you:
All you need to do is change form's display to inline-flex, give .resizable_text_box flex-grow: 100; and give #question_text_box width: 100%
Full example from the OP:
<style>
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-flex;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
flex-grow: 100;
}
#question_text_box {
width: 100%
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
</style>
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">Options</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
Flex-box lets you do what you wanted to do with css for 15 years - its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change some of those <span> elements to <div> elements; then float:left the division around your dropdown; then give the one of the right an overflow:hidden and the input element inside it a width:100%;.
Here's an example. Here it is again with a bigger drop down.
Except that screws up the submit button. So give the #form_wrapper non-static positioning (position:relative) and position the submit button absolutely. See this fiddle and this one.
I tried this: http://jsfiddle.net/ilyaD/KGcC3/
HTML:
<select name="state" class="ddList">
<option value="">(please select a state)</option>
<option class="lt" value="--">none</option>
<option class="lt" value="AL">Alabama</option>
<option class="lt" value="AK">Alaska</option>
<option class="lt" value="AZ">Arizona</option>
<option class="lt" value="AR">Arkansas</option>
<option class="lt" value="CA">California</option>
<option class="lt" value="CO">Colorado</option>
</select>
CSS:
select { width: 400px; text-align: center; }
select .lt { text-align: center; }
As you can see, it doesn't work. Is there a CSS-only way to center text in the select-box?
There is a partial solution for Chrome:
select { width: 400px; text-align-last:center; }
It does center the selected option, but not the options inside the dropdown.
That's for align right. Try it:
select{
text-align-last:right;
padding-right: 29px;
direction: rtl;
}
the browser support for the text-align-last attribute can be found here: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp
It looks like only Safari is still not supporting it.
Yes, it is possible. You can use text-align-last
text-align-last: center;
You have to put the CSS rule into the select class.
Use CSS text-indent
Example
<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>
CSS code
select { text-indent: 5px; }
2020, Im using:
select {
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
}
I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.
However, using a jQuery plugin, you could style the dropdown:
https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html
This plugin hides the select element, and creates span elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.
just using this:
select {
text-align-last: center;
padding-right: 29px;
}
select {
text-align: center;
text-align-last: center;
}
option {
text-align: left;
}
<select>
<option value="">(please select a state)</option>
<option class="lt" value="--">none</option>
<option class="lt" value="AL">Alabama</option>
<option class="lt" value="AK">Alaska</option>
<option class="lt" value="AZ">Arizona</option>
<option class="lt" value="AR">Arkansas</option>
<option class="lt" value="CA">California</option>
<option class="lt" value="CO">Colorado</option>
</select>
This JS function should work for you
function getTextWidth(txt) {
var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
var elmWidth = $elm.width();
$elm.remove();
return elmWidth;
}
function centerSelect($elm) {
var optionWidth = getTextWidth($elm.children(":selected").html())
var emptySpace = $elm.width()- optionWidth;
$elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start
$('.centerSelect').each(function(){
centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
centerSelect($(this));
});
Full Codepen here: http://codepen.io/anon/pen/NxyovL
I have always gotten away with the following hack to get it to work with css only.
padding-left: 45%;
font-size: 50px;
padding will center the text and can be tweaked for the text size :)
This is obviously not 100% correct from a validation point of view I guess but it does the job :)
Alternative "fake" solution if you have a list with options similar in text length (page select for example):
padding-left: calc(50% - 1em);
This works in Chrome, Firefox and Edge. The trick is here to push the text
from the left to the center, then substract the half of length in px, em or whatever of the option text.
Best solution IMO (in 2017) is still replacing the select via JS and build your own fake select-box with divs or whatever and bind click events on it for cross-browser support.
Not quite Centering but using example above you can make a left margin in select box.
<style>.UName { text-indent: 5px; }</style><br>
<select name="UserName" id="UserName" size="1">
<option class="UName" selected value="select">Select User</option>
<option class="UName" value="User1">User 1 Name</option>
<option class="UName" value="User2">User 2 Name </option>
<option class="UName" value="User3">User 3 Name</option>
</select>
this worked for me:
text-align: center;
text-align-last: center;
try this :
select {
padding-left: 50% !important;
width: 100%;
}
You can't really customise <select> or <option> much. The only way (cross-browser) would be to manually create a drop down with divs and css/js to create something similar.
If you didn't find any solution, you can use this trick on angularjs or using js to map selected value with a text on the div, this solution is full css compliant on angular but need a mapping between select and div:
var myApp = angular.module('myApp', []);
myApp.controller('selectCtrl', ['$scope',
function($scope) {
$scope.value = '';
}
]);
.ghostSelect {
opacity: 0.1;
/* Should be 0 to avoid the select visibility but not visibility:hidden*/
display: block;
width: 200px;
position: absolute;
}
.select {
border: 1px solid black;
height: 20px;
width: 200px;
text-align: center;
border-radius: 5px;
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-guide-concepts-1-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-app ng-controller="selectCtrl">
<div class=select>
<select ng-model="value" class="ghostSelect">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
<div>{{value}}
</div>
</div>
</div>
</body>
Hope this could be useful for someone as it took me one day to find this solution on phonegap.
While you cannot center the option text within a select, you can lay an absolutely positioned div over the top of the select to the same effect:
#centered
{
position: absolute;
top: 10px;
left: 10px;
width: 818px;
height: 37px;
text-align: center;
font: bold 24pt calibri;
background-color: white;
z-index: 100;
}
#selectToCenter
{
position: absolute;
top: 10px;
left: 10px;
width: 840px;
height: 40px;
font: bold 24pt calibri;
}
$('#selectToCenter').on('change', function () {
$('#centered').text($(this).find('option:selected').text());
});
<select id="selectToCenter"></select>
<div id="centered"></div>
Make sure the both the div and select have fixed positions in the document.
On your select use width: auto and no padding to see how long your text is.
I'm using 100% available width on my select and all of my options have the same length, this allows me to use very simple css.
text-indent will move the text from left, similar to padding-left
120px is my text length - I want to center it so take half of that size and half of the select size, leaving me with 50% - 60px
select{
width: 100%;
text-indent: calc(50% - 60px);
}
What if I have different sizes of options?
It is possible, however, the solution will not be a pretty one.
The former solution might get you really close to being centered if the difference between options isn't like 5 characters.
If you still need to center it more precisely you can do this
Prepare this class:
.realWidth{
width: auto;
}
Apply onChange listener to select element
In that listener apply .realWidth to the select element with
const selectRef = document.getElementById("yourId");
selectRef.classList.add("realWidth");
Get access to the real width of the option.
const widthOfSelect = selectRef.getBoundingClientRect().width / 2;
widthOfSelect is the width you are looking for. Store it in global/component variable.
Remove the realWidth, you don't need it anymore.
selectRef.classList.remove("realWidth");
I am using react, I'm not sure this will work in vanilla, if not you have to find another solution.
<select style={`textIndent: calc(50% - ${widthOfSelect}) %`}> ... </select>
Another solution, however, that is a bad one could be creating the CSS classes with js and putting it to head.
PROS:
probably works, I haven't tried the dynamic solution but it should work.
CONS:
if the program is not fast enough user will see the width: auto taking place and thus wonder what's going on. If that is the case just create duplicate select, hide it behind something with a higher z-index and apply the on select listener from the original to the hidden duplicate.
Might be hard to use if you cant inline the style because of vanilla limitation, but you can make a script to optimize the appendChild to the head.
I ran into this issue where a client was insisting on this, and they were on a Mac and and iPhone.
I wound up using media queries and a percentage padding for padding-left. Was this a satisfying solution? Not at all, but it let me move on.
Easiest way:
Use padding-left
select{
padding-left:2rem
}
I had a similar problem.
My work-around was to change to a fixed size font in the style section:
option {
font-family: Courier New;
width: 12ch;
font-size: 14pt
}
select {
font-family: Courier New;
width: 14ch;
font-size: 14pt
}
In body I padded the shown options with underlines to make them the same length.
Note used underlines on both sides to center display:
<select onchange='O.src=this.options[this.selectedIndex].value' align="center">
<option value="" align="center">___(none)___</option>
<option value="https://www.247backgammon.org/" align="center">_Backgammon_</option>
<option value="https://www.247klondike.com/klondikeSolitaire3card.php" align="center">__Klondike__</option>
<option value="https://www.247minesweeper.com/" align="center">_Minesweeper</option>
<option value="https://sudoku.com/" align="center">
<p>___Soduku___</p>
</option>
</select>
It's not 100% yet, but you can use this snippet!
text-align-last: center; // For Chrome
text-align: center; // For Firefox
Doesn't work on Safari or Edge, for now!
if the options are static, you could listen for the change event on your select box and add padding for each individual item
$('#id').change(function() {
var select = $('#id');
var val = $(this).val();
switch(val) {
case 'ValOne':
select.css('padding-left', '30px');
break;
case 'ValTwoLonger':
select.css('padding-left', '20px');
break;
default:
return;
}
});
I have a form layout that I want to display the label aligned left and the form control aligned right. I have been trying to get it to work using a float:right on the form control (in this case a ) and then applying the clearfix class to it but the clearfix does not appear to be working on my select box.
Is there something wrong here or is clearfix not expected to work on a select element?
When I do this however, the select box still extends outside the bottom of the containing div.
My Code:
<style type="text/css">
#category-select {
left: 0px;
top: 0px;
width: 350px;
border: 1px solid #666;
}
select#category {
float: right;
}
select.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
select.clearfix {
zoom: 1;
}
</style>
<![endif]-->
<div id="triage">
<div id="category-select">
Category:
<select class="ipad-dropdown clearfix" id="category" name="category">
<option value="A">A - Emergency
<option value="B">B - Urgent
<option value="C">C - ASAP
<option value="D" selected>D - Standard
</select>
</div>
</div>
If the select element is the tallest thing, why not float the label? You can also take the opportunity to make it actually a label instead of just some text in a div. Here's the CSS:
#category-select {
left: 0px;
top: 0px;
width: 350px;
border: 1px solid #666;
text-align: right;
}
#category-select label {
float: left;
margin: 1px;
}
Here's the HTML:
<div id="triage">
<div id="category-select">
<label for="category">Category:</label>
<select class="ipad-dropdown clearfix" id="category" name="category">
<option value="A">A - Emergency</option>
<option value="B">B - Urgent</option>
<option value="C">C - ASAP</option>
<option value="D" selected>D - Standard</option>
</select>
</div>
</div>
Here's the demo.
Since you're floating the select element, it won't affect the height of the containing div anymore. Try adding some padding to the containing element: http://jsfiddle.net/LZVhN/1/ (also added some relative positioning to the select)