I have the following HTML code:
<div>
<p><label>Faculty <input type="text" class = "f"></label></p>
<p><label >Department<input type="text" class = "f"></label></p>
</div>
How can I make textboxes appear one under another without shifting?
You could do it with inline-block, additional <span> tags added.
div > p > label > span {
display: inline-block;
width: 90px;
}
<div>
<p>
<label>
<span>Faculty</span>
<input type="text" class="f" />
</label>
</p>
<p>
<label>
<span>Department</span>
<input type="text" class="f" />
</label>
</p>
</div>
Or, the css table way.
div > p > label {
display: table;
table-layout: fixed;
}
div > p > label > span {
display: table-cell;
}
div > p > label > span:first-child {
width: 90px;
}
<div>
<p>
<label>
<span>Faculty</span>
<span><input type="text" class="f" /></span>
</label>
</p>
<p>
<label>
<span>Department</span>
<span><input type="text" class="f" /></span>
</label>
</p>
</div>
give a left margin to your input field for faculty
Related
So I've just started to learn HTLM and CSS, so to learn I'm just going trough some easy to do examples. But I'm stuck on getting the checkbox to align with the texts I want to align it to.
The example I'm following
And this is how mine looks at the moment:
My copy of the example
As you can see it's not an exact copy of the example and I've tried for some hours now but can't figure it out.
This is my code:
p {
display: table-row;
}
label {
display: table-cell;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: middle;
}
textarea {
vertical-align: middle;
}
.checkbox {
display: flex;
}
<p>
<label for="förnamn"> * Förnamn: </label>
<input id="förnamn" type="text">
</p>
<p>
<label for="efternamn"> * Efternamn: </label>
<input id="efternamn" type="text">
</p>
<p>
<label for="adress"> * Adress: </label>
<input id="adress" type="text">
</p>
<p>
<label for="e-post"> * E-post: </label>
<input id="e-post" type="text">
</p>
<p>
<label for="ålder">Ålder: </label>
<select name="ålder" id="Ålder">
<option value="över_18">Över 18</option>
<option value="under_18">Under 18</option>
</select>
</p>
<p>
<label for="meddelande">Meddelande: </label>
<textarea name="meddelande" id="meddelande" cols="18" rows="2"></textarea>
</p>
<p>
<label for="välj">Välj låtar och media: </label>
</p>
<p class="checkbox">
<label for="ringnes-ronny">Ringnes-Ronny</label>
<label><input type="checkbox">Polisen</label>
<label>59 SEK</label>
<label><input type="checkbox">Valhalla</label>
<label for="39-sek">39 SEK</label>
<label><input type="checkbox">Polisen</label>
<label for="49-sek">49 SEK</label>
<label><input type="checkbox">Monster</label>
<label for="59-sek">39 SEK</label>
</p>
I'm sorry if the code is sloppy, haven't figured out the whole structure yet but I hope its readable.
I've tried to change the display of the .checkbox but none of them does what I would want.
Tried the align and vertical-align but they don't move at all.
Looks like you had a pretty good start on it. I would put the items that I want to be beside each other into a flexbox, and I just moved the labels around so they would be where they are in the example that your following.
display: flex Is super powerful, I HIGHLY reccommend playing flexbox froggy to get a bit more comfortable with it in a fun and engaging way.
Another great tool that is used often to display thing how you want is display: grid and there is an online game for that one as well called grid garden.
p {
display: table-row;
}
label {
display: table-cell;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: middle;
}
textarea {
vertical-align: middle;
}
.checkbox {
display:flex;
}
.flex {
display: flex;
justify-content: space-between;
padding-left: 4em;
}
<!DOCTYPE html>
<html>
<head>
<title> Lab1 </title>
</head>
<body>
<p>
<label for="förnamn"> * Förnamn: </label>
<input id="förnamn" type="text">
</p>
<p>
<label for="efternamn"> * Efternamn: </label>
<input id="efternamn" type="text">
</p>
<p>
<label for="adress"> * Adress: </label>
<input id="adress" type="text">
</p>
<p>
<label for="e-post"> * E-post: </label>
<input id="e-post" type="text">
</p>
<p>
<label for="ålder">Ålder: </label>
<select name="ålder" id="Ålder">
<option value="över_18">Över 18</option>
<option value="under_18">Under 18</option>
</select>
</p>
<p>
<label for="meddelande">Meddelande: </label>
<textarea name="meddelande" id="meddelande" cols="18" rows="2"></textarea>
</p>
<p>
<label for="välj">Välj låtar och media: </label>
</p>
<p class="checkbox">
<div class="flex">
<label><input type="checkbox">Polisen</label>
<label >59 SEK</label>
</div>
<div class="flex">
<label><input type="checkbox">Valhalla</label>
<label for="39-sek">39 SEK</label>
</div>
<label for="ringnes-ronny">Ringnes-Ronny</label>
<div class="flex">
<label><input type="checkbox">Polisen</label>
<label for="49-sek">49 SEK</label>
</div>
<div class="flex">
<label><input type="checkbox">Monster</label>
<label for="59-sek">39 SEK</label>
</div>
</p>
</body>
</html>
maybe that...
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
}
#my-form > label {
display : block;
width : 24rem;
min-height : 2.5rem;
font-size : .9rem;
line-height : 2rem;
}
#my-form > label input[type=text],
#my-form > label select,
#my-form > label textarea {
font-size : 1rem;
float : right;
box-sizing : border-box;
width : 18rem;
}
#my-form > h3 {
margin : 2.5rem 0 0 0;
}
#my-form > fieldset {
display : grid;
grid-template-columns : 8rem 16rem;
border : none;
margin : 0;
padding : 0;
font-size : 1rem;
}
#my-form > fieldset legend {
transform: translateY(2rem);
}
#my-form > fieldset label {
grid-column : 2;
}
#my-form > fieldset label span {
float : right;
}
<form id="my-form">
<label>
* Förnamn:
<input name="förnamn" type="text">
</label>
<label>
* Efternamn:
<input name="efternamn" type="text">
</label>
<label>
* Adress:
<input name="adress" type="text">
</label>
<label>
* E-post:
<input name="e-post" type="text">
</label>
<label>
Ålder:
<select name="ålder">
<option value="över_18">Över 18</option>
<option value="under_18">Under 18</option>
</select>
</label>
<label>
Meddelande:
<textarea name="meddelande" id="meddelande" rows="2"></textarea>
</label>
<h3> Välj låtar och media: </h3>
<fieldset>
<legend> Ringnes-Ronny </legend>
<label>
<input type="checkbox" name="Polisen" value="59">
Polisen
<span>59 SEK</span>
</label>
<label>
<input type="checkbox" name="Valhalla" value="39">
Valhalla
<span>39 SEK</span>
</label>
<label>
<input type="checkbox" name="Polisen" value="49">
Raggare pä stureplan
<span>49 SEK</span>
</label>
<label>
<input type="checkbox" name="Monster" value="39">
Monster
<span>39 SEK</span>
</label>
</fieldset>
</form>
Based on the image supplied try the following. I've replaced p with a fieldset as this is what a collection of check boxes is.
.checkbox {
/*Remove the border from the fieldset*/
border: 0;
/*Flex disply*/
display:flex;
/*Start aligning to the left*/
justify-content: flex-start;
/*Vertical align center*/
align-items: center;
}
.title {padding-right:1em;}
.boxContainer {
/*Give the container some width*/
min-width:40vw;
}
.checkbox label {
/*Set labels to display be block elements*/
display: block;
/*Position relative so child elements are postions relative to this object*/
position: relative;
/*A little spacing*/
margin-bottom: 0.25em;
/*Give us some min width*/
min-width:40vw;
}
.checkbox label input {
/*A litle more spacing*/
margin-right: 0.5em;
}
.checkbox .time {
/*Set our time elements to be absolutely positioned*/
position: absolute;
/*THen move them to the right.*/
right: 0
}
<fieldset class="checkbox">
<div class="title">Ringnes-Ronny</div>
<div class="boxContainer">
<label><input type="checkbox">Polisen<span class="time">59 SEK</span></label>
<label><input type="checkbox">Valhalla<span class="time">39 SEK</span></label>
<label><input type="checkbox">Polisen<span class="time">49 SEK</span></label>
<label><input type="checkbox">Monster<span class="time">39 SEK</span></label>
</div>
</fieldset>
I am having a simple registration form, but one of the label fields sticks next to another label field.
Currently it looks like this:
Email should be under the Username, not next to it. Other form elements align nicely, but not these two.
label {
float: left;
}
input {
float: right;
}
<div class="form-wrapper">
<div>
<div>
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div>
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
Why don't you just use flex, clean and less code.
.form-wrapper {
width: 400px;
border: 1px solid blue;
}
.username,
.useremail {
display: flex;
margin: 10px;
width: 350px;
justify-content: space-between;
font-weight: bold;
}
<div class="form-wrapper">
<div>
<div class="username">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="useremail">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
If you are going with float you have to know about using clear property for it's next elements. So a best way to handle is, to create a after pseudo-element on the parent and clear:both.
In the below code have added 'field' class for each container and styled it with :after.
.field::after{
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
label {
float: left;
}
input {
float: right;
}
<div class="form-wrapper">
<div>
<div class="field">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="field">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
Labels and input fields are stacked from the left and the right, resp., due to the css float properties. Note that the label/input pairs render on individual lines when removing the css, though without proper vertical alignment.
The CSS display: table property and friends can be employed to rectify this. Basically they cause the renderer to apply table layouting to elements other than tableand descendants.
.d-t {
display: table;
}
.d-tr {
display: table-row;
}
.d-tr > label, .d-tr > input {
display: table-cell;
}
<div class="form-wrapper">
<div class="d-t">
<div class="d-tr">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="d-tr">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
I am wondering if there is a way using only CSS to add an asterisk to a label element when the label's for attribute is for an input element with a required html attribute. Alternatively, we could use logic around if the label is directly followed by an input element which has the required attribute.
What does work is something like this:
input[required] + label:after {
content: '*';
color: red;
}
<form>
<div>
<input for="name" type="text" required />
<label id="name">Name</label>
</div>
<div>
<input for="age" type="text" />
<label id="age">Age</label>
</div>
</form>
But what I'm talking about is if the label and input are swapped around like the example below, which is more common. The CSS sibling selector + doesn't work for this case. Is there any way to do some like above when the label element is first and the input is second?
/* ??? */
<form>
<div>
<label for="name">Name</label>
<input id="name" type="text" required />
</div>
<div>
<label for="age">Age</label>
<input id="age" type="text" />
</div>
</form>
Thanks
I suggest you keep old html and use css flex to order position
input[required] + label:after {
content: '*';
color: red;
}
div {
display: flex;
text-align: center;
align-items: flex-start;
}
div input {
width: 100px;
height: 20px;
order: 2;
}
div label {
width: 100px;
height: 20px;
order: 1;
}
<form>
<div>
<input for="name" type="text" required />
<label id="name">Name</label>
</div>
<div>
<input for="age" type="text" />
<label id="age">Age</label>
</div>
</form>
See the codepen
You can use float for label to positining label at left like below:
label {
float: left;
}
input[required] + label:after {
content: '*';
color: red;
}
}
<form>
<div>
<input for="name" type="text" required />
<label id="name">Name</label>
</div>
<div>
<input for="age" type="text" />
<label id="age">Age</label>
</div>
</form>
There is no way for CSS to "render backwards" the way you want it too (not without SASS/SCSS).
One solution would be to add a "required" class to the labels that correspond to required fields.
<style>
label.required:after { content: '*';color:red; }
</style>
<form>
<div>
<label for="name" class="required">Name</label>
<input id="name" type="text" required />
</div>
<div>
<label for="age">Age</label>
<input id="age" type="text" />
</div>
</form>
Another option is the use of CSS3 Orders property, but the parent element would need to be set to "display:flex".
<style>
div { display:-webkit-flex;display:flex; }
div label { order:1; }
div input { order:2; }
div input[required] + label:after { content: '*';color:red; }
</style>
<form>
<div>
<input id="name" type="text" required />
<label for="name">Name</label>
</div>
<div>
<input id="age" type="text" />
<label for="age">Age</label>
</div>
</form>
EDIT 6/25/2019 SASS/SCSS Example
div {
display:-webkit-flex;
display:flex;
label {
order:1;
}
input {
order:2;
&[required] + label:after {
content: '*';color:red;
}
}
}
More information about Parent Selectors in SCSS.
It is possible to put the labels above of each textbox without using table? My problem is when i try to put a "new line" inside a "NoWrap".
Basically i got an array of array, that have "name" and "Value", the value will be changed by user, so the first set of elements will display side by side, the next set of elements will be display below, side by side, and go on. I can do with this simple code, but the labels are at LEFT of the component.
<style>
.NoWrap{white-space:nowrap;margin-top:5px;margin-left:5px;}
</style>
<div style="border:1px solid black; width:500px;height:800px;overflow:auto;">
<div class="NoWrap">
Label A1 <input type="text" />
Label A2 <input type="text" />
Label A3 <input type="text" />
Label A4 <input type="text" />
</div>
<div class="NoWrap">
Label B1 <input type="text" />
</div>
<div class="NoWrap">
Label C1 <input type="text" />
Label C1 <input type="text" />
</div>
<div class="NoWrap">
Label D1 <input type="text" />
</div>
</div>
But when i try to break a line inside, every thing mess up. I Tried to put a div inside with float but no luck with that. Looking for examples i found some but i couldn't put them together
<div id='div1' style='width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
<label>Test <br />
<input type='text' style='width:100%;' id='inputBox'/>
</label>
<label>Test <br />
<input type='text' style='width:100%;' id='inputBox'/>
</label>
</div>
That is what i'm looking for
Label A1 Label A2 Label A3
TextBox... Textbox... Textbox... .... goes to scroll forever
Label B1 Label B2
TextBox... Textbox...
Label C1
TextBox...
It's always a good idea to associate your inputs and their text using a label:
<label>Label A1 <input type="text" /></label>
And then you can use these styles:
label { display: inline-block; } /* One next to the others */
input { display: block; } /* Line break between text and input */
.wrapper {
border: 1px solid black;
width: 500px;
height: 800px;
overflow: auto;
}
.wrapper > div {
white-space: nowrap;
margin-top: 5px;
margin-left: 5px;
}
label {
display: inline-block;
}
input {
display: block;
}
<div class="wrapper">
<div>
<label>Label A1 <input type="text" /></label>
<label>Label A2 <input type="text" /></label>
<label>Label A3 <input type="text" /></label>
<label>Label A4 <input type="text" /></label>
</div>
<div>
<label>Label B1 <input type="text" /></label>
</div>
<div>
<label>Label C1 <input type="text" /></label>
<label>Label C2 <input type="text" /></label>
</div>
<div>
<label>Label D1 <input type="text" /></label>
</div>
</div>
If you put your text inside proper html label elements, you could remove them from the normal flow of the document and position them slightly above where they would normally appear.
For example, make your containers position: relative and your label elements position: absolute. Then give your container a margin-top: XXpx and your label elements a top: -XXpx
You can see this working here (jsbin link):
<div style="border:1px solid black; width:500px;height:800px;overflow:auto;">
<div class="NoWrap">
<label for="A1">Label A1</label>
<input id="A1" type="text" />
<label for="A2">Label A2</label>
<input id="A2" type="text" />
<label for="A3">Label A3</label>
<input id="A3" type="text" />
<label for="A4">Label A\4</label>
<input id="A4" type="text" />
</div>
</div>
And styles:
.NoWrap{
white-space:nowrap;
margin-top:25px;
margin-left:5px;
position: relative;
}
label {
position: absolute;
top: -20px;
}
you can use position:relative + margins
.NoWrap{white-space:nowrap;margin-top:5px;margin-left:5px;}
input {
margin-bottom:3em;/* make room under */
width:5em;/* resize to yyour needs */
margin-right:-3em;/* reduce virtually rooms it uses , tune to your needs */
position:relative;/* now time to move it at screen */
top:1.8em;/* enough lower than baseline */
right:5em;/* its own size */
}
<div style="border:1px solid black; width:500px;height:800px;overflow:auto;">
<div class="NoWrap">
Label A1 <input type="text" />
Label A2 <input type="text" />
Label A3 <input type="text" />
Label A4 <input type="text" />
</div>
<div class="NoWrap">
Label B1 <input type="text" />
</div>
<div class="NoWrap">
Label C1 <input type="text" />
Label C1 <input type="text" />
</div>
<div class="NoWrap">
Label D1 <input type="text" />
</div>
</div>
I m creating custom checkbox and radio button in pure css but they are not showing perfectly in IE7 .
any body help in
code is there please check it
HTML
<ul>
<li>
<fieldset>
<legend id="title1" class="desc">
Select a Choice
</legend>
<div>
<span>
<input id="Field1_0" name="Field1" type="radio" class="field radio" checked="checked">
<label class="choice" for="Field1_0">
First Choice</label>
</span>
<span>
<input id="Field1_1" name="Field1" type="radio" class="field radio">
<label class="choice" for="Field1_1">
Second Choice</label>
</span>
<span>
<input id="Field1_2" name="Field1" type="radio" class="field radio">
<label class="choice" for="Field1_2">
Third Choice</label>
</span>
</div>
</fieldset>
</li>
<li>
<fieldset>
<legend id="title2" class="desc">
Check All That Apply
</legend>
<div>
<span>
<input id="Field2" name="Field2" type="checkbox" class="field checkbox" checked="checked">
<label class="choice" for="Field2">First Choice</label>
</span>
<span>
<input id="Field3" name="Field3" type="checkbox" class="field checkbox">
<label class="choice" for="Field3">Second Choice</label>
</span>
<span>
<input id="Field4" name="Field4" type="checkbox" class="field checkbox">
<label class="choice" for="Field4">Third Choice</label>
</span>
</div>
</fieldset>
</li>
</ul>
Css
li:not(#foo) > fieldset > div > span > input[type='radio'],
li:not(#foo) > fieldset > div > span > input[type='checkbox']
{
opacity: 0;
float: left;
width: 18px;
}
li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
margin: 0;
clear: none;
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/off.png) left center no-repeat;
}
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/check.png);
}
Live demo here http://jsfiddle.net/rohitazad/Vsvg2/79/
:checked is the property of css3 which not supported by IE8 & below browsers. But your can achieve this with http://selectivizr.com/ JS which support all css3 pseudo selector for IE
As pointed out, :checked is a css3 pseudoclass.
You could still use an attribute selector though like so:
input[type='checkbox'][checked='checked']