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.
Related
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;
}
I don't know why it doesn't move, I'd like to know what's wrong
Here is the css (sass)
.find-property-main
.custom-inputs
position: relative
display: inline-block
.placeholder-label
bottom: -1px !important
font-size: 0.8rem
text-transform: uppercase
color: #707274 !important
position: absolute
pointer-events: none
#include customize-transition ($duracion: 0.5s)
.placeholder-input
font-size: 0.8rem
text-transform: uppercase
border: none
border-bottom: solid 2px #ced4da
border-radius: 0
margin: 0
padding: 0
height: calc(1rem + 0.75rem + 2px)
.custom-inputs input:focus ~ .placeholder-label, .custom-inputs input:not(:focus):valid ~ .placeholder-label
bottom: 12px !important
font-size: 0.7rem
font-weight: bold
color: rgb(17, 38, 78)
Here is the HTML
<form action="#" method="$_POST" class="border p-5 find-property-main">
<div class="form-form col-3 custom-inputs">
<label class="placeholder-label">Tamaño</label>
<input list="casa" type="text" class="form-control placeholder-input" placeholder="">
<datalist id="casa">
<option value="Pequeña">
</option>
<option value="Mediana">
</option>
<option value="Grande">
</option>
</datalist>
</div>
I have already reviewed it, and apparently everything is fine, but when I try to enter data the label does not move.
I would like to know what I'm doing wrong, thanks.
The problem is that your selector targets a <label /> which has a focused <input /> as predecessor. But in your html, the label comes first and the input after it. In order for the selector to work, you would have to switch them around:
<form action="#" method="$_POST" class="border p-5 find-property-main">
<div class="form-form col-3 custom-inputs">
<input list="casa" type="text" class="form-control placeholder-input" placeholder="">
<label class="placeholder-label">Tamaño</label>
<datalist id="casa">
<option value="Pequeña">
</option>
<option value="Mediana">
</option>
<option value="Grande">
</option>
</datalist>
</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/
As defined here:
http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment
You can use code like the following to increment numbers in pseudo elements.
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
}
H1 {
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
Is there a way you can use the same code to increment letters like "a", "b", "c", etc?
Thank you!
Yes, the second argument to counter() defines the type of counter used, as for the list-style-type from a regular ul or ol; for example:
content: counter(chapter, lower-alpha);
ul {
counter-reset: listStyle;
}
ul li {
margin-left: 1em;
counter-increment: listStyle;
}
ul li::before {
margin-right: 1em;
content: counter(listStyle, lower-alpha);
}
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
JS Fiddle demo.
Others include: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha.
As there seems to have been something of an update to the above list of styles, I chose to add a code snippet which allows the user to choose from the (currently-) available options, along with an 'output' area, to show how to use that style with CSS generated-content:
let select = document.querySelector('select'),
output = document.querySelector('#currentCounter'),
changeEvent = new Event('change');
select.addEventListener('change', function() {
document.body.style.setProperty('--listStyleType', this.value);
output.textContent = this.value;
});
select.dispatchEvent(changeEvent);
body {
--listStyleType: decimal;
}
ul {
counter-reset: listStyle;
columns: 2;
margin-top: 0.5em;
list-style-type: none;
}
ul li {
counter-increment: listStyle;
}
ul li::before {
content: counter(listStyle, var(--listStyleType));
display: inline-block;
margin-right: 0.5em;
width: 1.5em;
height: 1.5em;
line-height: 2em;
text-align: center;
}
code {
display: block;
white-space: pre-wrap;
width: 80%;
box-sizing: border-box;
margin: 1em auto;
padding: 0.5em;
box-shadow: 0 0 0 3px limegreen;
}
code::after {
content: '\A';
}
#currentCounter {
color: #f90;
}
<label for="counterChoice">Please select a CSS counter:</label>
<select id="counterChoice">
<option value="arabic-indic">arabic-indic</option>
<option value="armenian">armenian</option>
<option value="bengali">bengali</option>
<option value="cambodian">cambodian</option>
<option value="circle">circle</option>
<option value="cjk-decimal">cjk-decimal</option>
<option value="cjk-earthly-branch">cjk-earthly-branch</option>
<option value="cjk-heavenly-stem">cjk-heavenly-stem</option>
<option value="decimal">decimal</option>
<option value="decimal-leading-zero">decimal-leading-zero</option>
<option value="devanagari">devanagari</option>
<option value="disc">disc</option>
<option value="disclosure-closed">disclosure-closed</option>
<option value="disclosure-open">disclosure-open</option>
<option value="ethiopic-numeric">ethiopic-numeric</option>
<option value="georgian">georgian</option>
<option value="gujarati">gujarati</option>
<option value="gurmukhi">gurmukhi</option>
<option value="hebrew">hebrew</option>
<option value="hiragana">hiragana</option>
<option value="hiragana-iroha">hiragana-iroha</option>
<option value="japanese-formal">japanese-formal</option>
<option value="japanese-informal">japanese-informal</option>
<option value="kannada">kannada</option>
<option value="katakana">katakana</option>
<option value="katakana-iroha">katakana-iroha</option>
<option value="khmer">khmer</option>
<option value="korean-hangul-formal">korean-hangul-formal</option>
<option value="korean-hanja-formal">korean-hanja-formal</option>
<option value="korean-hanja-informal">korean-hanja-informal</option>
<option value="lao">lao</option>
<option value="lower-alpha">lower-alpha</option>
<option value="lower-alpha">lower-alpha</option>
<option value="lower-armenian">lower-armenian</option>
<option value="lower-greek">lower-greek</option>
<option value="lower-latin">lower-latin</option>
<option value="lower-roman">lower-roman</option>
<option value="malayalam">malayalam</option>
<option value="mongolian">mongolian</option>
<option value="myanmar">myanmar</option>
<option value="oriya">oriya</option>
<option value="persian">persian</option>
<option value="simp-chinese-formal">simp-chinese-formal</option>
<option value="simp-chinese-informal">simp-chinese-informal</option>
<option value="square">square</option>
<option value="tamil">tamil</option>
<option value="telugu">telugu</option>
<option value="thai">thai</option>
<option value="tibetan">tibetan</option>
<option value="trad-chinese-formal">trad-chinese-formal</option>
<option value="trad-chinese-informal">trad-chinese-informal</option>
<option value="upper-alpha">upper-alpha</option>
<option value="upper-armenian">upper-armenian</option>
<option value="upper-latin">upper-latin</option>
<option value="upper-roman">upper-roman</option>
</select>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
<code>
li::before {
content: counter(<counterName>, <span id="currentCounter"></span>)
}
</code>
The currently-available (as of 2017-02-27):
arabic-indic
armenian
bengali
cambodian
circle
cjk-decimal
cjk-earthly-branch
cjk-heavenly-stem
decimal
decimal-leading-zero
devanagari
disc
disclosure-closed
disclosure-open
ethiopic-numeric
georgian
gujarati
gurmukhi
hebrew
hiragana
hiragana-iroha
japanese-formal
japanese-informal
kannada
katakana
katakana-iroha
khmer
korean-hangul-formal
korean-hanja-formal
korean-hanja-informal
lao
lower-alpha
lower-alpha
lower-armenian
lower-greek
lower-latin
lower-roman
malayalam
mongolian
myanmar
oriya
persian
simp-chinese-formal
simp-chinese-informal
square
tamil
telugu
thai
tibetan
trad-chinese-formal
trad-chinese-informal
upper-alpha
upper-armenian
upper-latin
upper-roman
References:
list-style-type.
"Generated Content, automatic numbering and lists," from the W3 (now outdated).
"CSS Counter Styles, Level 3," from the W3.
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;