How can I access the only the first label? I have tried with
.form-group label:nth-child(1){
margin-top: 4%;
}
however i got no result :\
<form class="login" method="post" action="/users/login">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" placeholder="Username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
.form-group:first-child label{
margin-top: 4%;
}
Access the first form group and then its label:
.form-group:first-child > label {
display: inline-block;
margin-top: 4%;
}
Edit: this is assuming you only want to target the label for "Username".
It is because your css goes for the every-first (meaning every) label in every .form-group element.
You need to change it to first .form-group's label.
.form-group:first-child label {
//code
}
Revised:
.login .form-group:first-child label{
margin-top: 4%;
display: inline-block;
}
Use of :nth-child is to selecting element with same parent. In simple words, say you have a HTML like below:
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
The span:nth-child(1) is first child of div with tag-name span. But, if you apply same selector with below HTML (Like in your case):
<div>
<span></span>
</div>
<div>
<span></span>
</div>
Selected elements are both the span because both span came first in their parent which is div
Related
HTML:
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">Service</label>
<input type="text" class="form-control" id="validationCustom03" value="Describe service you need" required>
<div class="invalid-feedback">
Please write here a needed service.
</div>
</div>
</div>
CSS
#validationCustom03{
height: 100px;
}
input[id=validationCustom03]{
display:inline;
padding-top: 0px;
margin-top: 0px;
color:red;
}
Hello guys, I am trying to stylize the value of form - text input, but the only one thing I can reach is red color. My purpose is to remove break line before and after the text, to make is from the very first line in the input, please check out the picture. Thank you for your time and wisdom !
I think you should use a <textarea> form attribute instead of an <input> element. Here's an example:
#validationCustom03{
height: 100px;
}
textarea[id=validationCustom03]{
display:inline;
padding-top: 0px;
margin-top: 0px;
color:red;
}
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">Service</label><br>
<textarea rows="4" cols="50" name="comment" class="form-control" id="validationCustom03" form="usrform" value="Describe service you need" required>
Enter text here...</textarea>
<div class="invalid-feedback">
Please write here a needed service.
</div>
</div>
</div>
you don't have a break-line here. it is just because the height of the input field is much bigger than the size of the font.
Here is the problem, I have a single-page application where I lay out a form:
Due to my novice CSS skill, I have not been able to left align the help text (in blue). Here is my HTML code:
label {
width: 15%;
display: inline-block;
text-align: right;
padding-right: 10px;
}
span.short_help {
font-size: 70%;
color: cornflowerblue;
padding-left: 10px;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<input type="text" name="Authentication" id="-Authentication" />
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<input type="text" name="Branch" id="Branch" />
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<input type="checkbox" name="Persistent" id="Persistent" />
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
If I fixed up the input field to make the controls the same width so the help text align, then the check box will be centered:
Here is what I added to the CSS above:
input {
width: 15%;
}
How can I have both the controls and the blue text left aligned?
Instead of setting a width on all input fields, wrap a div arround it with a class. In my example .input
Now you can set the width of the field without affecting the input width.
* {
box-sizing: border-box;
}
form {
max-width: 600px;
}
label, .input, span {
display: inline-block;
vertical-align: middle;
margin-left: -4px;
}
label {
width: 20%;
}
.input {
width: 30%;
}
span {
color: cornflowerblue;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<div class="input">
<input type="text" name="Authentication" id="-Authentication" />
</div>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<div class="input">
<input type="text" name="Branch" id="Branch" />
</div>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<div class="input">
<input type="checkbox" name="Persistent" id="Persistent" />
</div>
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
Add an element to wrap around the inputs and make them the desired size:
<div>
<label for="Authentication">Authentication:</label>
<span class="spacer">
<input type="text" name="Authentication" id="-Authentication" />
</span>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<span class="spacer">
<input type="text" name="Branch" id="Branch" />
</span>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<span class="spacer">
<input type="checkbox" name="Persistent" id="Persistent" />
</span>
<span class="short_help">Persistent connection</span>
</div>
And add CSS to format it:
span.spacer {
display: inline-block;
width: 15%;
}
I didn't quite get it, do you only want to align the checkbox or the blue text
To align the checkbox to the left, change
input {
width: 15%;
}
to
input[type="text"] {
width: 15%;
}
the input driver you can align your text to the left so
input
{
text-align: left;
width: 15%;
}
but the tag span can not be proque is an online element for more doubt read this site that talks about the span tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You can also contain the span in a div and somehow achieve alignment
This is my code where I am trying to put 3 Buttons in parallel.
<!DOCTYPE html>
<html>
<head>
<div class="aParent">
<div id="left_side">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<label for="q">Make A new folder:</label><br>
<input id="q" name="q" type="text" /><br>
<input name="commit" type="submit" value="Submit" />
</form></div>
<div id="centre">
<input id="btn" type="button" value="Save" action="update" alignment="center" />
</div>
<div id="right_side">
<form accept-charset="UTF-8" action="/target" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<input name="commit" type="submit" value="Customize Weight" />
</form></div>
</div>
<style type="text/css">
#left_side {
float: left;
}
#center_s {
margin:50px 50px;
width: 65px;
}
#right_side {
float: right;
}
</style>
Now if I change margin values save button position is not changing . Any guesses for changes to be made to put 3 buttons in parallel.
Add this:
#centre{ float:left;}
If you're looking to centre this div, you will need to add an appropriate margin-left value, so long as your parent container is of fixed width.
add display:inline-block to all the three container div and remove the float property.
#left_side {
display: inline-block;
}
#center_s {
margin: 50px 50px;
width: 65px;
display: inline-block;
}
#right_side {
background: Green;
display: inline-block;
}
Js Fiddle Example
You have some complex html structure to do this simple thing as you can achieve without using the css and just you need to put simple markup like this
<div class="aParent">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get">
<div id="label">
<label for="q">Make A new folder:</label>
</div>
<div id="input-control">
<input id="q" name="q" type="text" />
</div>
<div id="button-control">
<input name="commit" type="submit" value="Submit" />
<input id="btn" type="button" value="Save" action="update" alignment="center" />
<input name="commit" type="submit" value="Customize Weight" />
</div>
</form>
</div>
Js Fiddle - Simple design
Can you just put all 3 divs {float: left} and then add a small margin to them to separate them?
You have two options for this:
1.You can float the elements you want to position. Add a line in the css code, for example
#center_s {
margin: 50px 50px;
width: 65px;
float: left;
}
This will change the element model from box to inline.
Using float will stack the elements next to one another.
You can read this great article about float property - http://css-tricks.com/all-about-floats/
You can change the display property to inline-block - add a new css property - display: inline block; to all three elements.
This will change the div from block model to inline model!
Another great article about display property - http://www.impressivewebs.com/difference-block-inline-css/
Hope this answered your question.
trying to get the nth-child/first-child working
on the first label within the form below
but can't get it right
At the moment I'm using
form label {
display: block;
font-size: 20px;
font-size: 2rem;
line-height: 18px;
cursor: pointer;
margin:0 auto;
color:#FFF;
text-transform:uppercase;
padding:40px 0 10px;
font-weight: normal!important;
}
label:first-child {
padding-top:0;
}
but have used
form code div.field span.lspan label:nth-of-type(1)
form code div.field span.lspan label:first-child
.lspan label:first-child
form label:first-child
they set all labels in the form to padding 0
<form method="POST" action="" class="">
<div class="field">
<span class="lspan"><label for="sender_name">Name</label></span>
<span class="inspan"><input class="hinput" type="text" name="sender_name" value=""></span>
</div>
<div class="field">
<span class="lspan"><label for="sender_name">Email</label></span><span class="inspan"> <input class="hinput" type="text" name="email" value=""> </span></div>
<div class="field">
<span class="lspan"><label for="subject">Subject</label></span><span class="inspan"><input class="hinput" type="text" name="subject" value=""></span></div>
<div class="field">
<span class="lspan"><label for="sender_name">Message</label></span><span class="inspan"> <textarea class="htextarea" name="message"></textarea></span></div>
<div class="field">
</div>
<div class="field" style="margin-top:15px">
<input type = "submit" class="csubmit" name = "submit" value="Submit" style="" />
</div>
</form>
Thanks
Roy
All the <label> tags in your code are a first-child of their respective <span> element.
If you only want to target the first appearance of a <label> in your code use this:
form div:first-child label {
padding: 0;
}
This will target any label within the <div> element, that is the first-child of the form.
Remember, that you can use :first-child on any subselektor and not just on the outermost right!
I'm trying to do something that must be relatively easy, but I've spent hours mucking around with this and I'm no getting to the answer.
I need to layout some input fields and their layers on a grid (or like a table I guess) with
lable input label input
label input label input
Because the input fields are different widths (and would look pretty crappy if they were all the same width) the best I've managed to get is
label input label input
label logerinput label input
How do I line up the second set of labels and there inputs?
I've made two classes for the labels
#dpi_form label {
display: inline-block;
width: 150px;
margin-left: 20px;
}
#dpi_form .right-label {
display: inline-block;
width: 150px;
margin-left: 220px;
}
and the associated controls are
<label for="req_retailer_index_fld">Select the retailer*:</label><select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
<label for="req_region_index_fld" class="right-label">Select the region*:</label><select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />
<label for="req_customer_type_index_fld">Select the customer type*:</label><select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
<label for="req_meter_state_index_fldi" class="right-label">Select the meter state*:</label><select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />
within a div.
I've tried absolute positioning, relative positioning, padding, all manner of right and left margins but still can't get the result I'm after.
I can find heaps of stuff or vertical alignment of controls.. but nothing showing me how to do this one.
Any clues please?
Peter.
Despite my comment about using tables on your question, this is how I would do it.
CSS:
label,
input {
display: block;
}
label {
padding: 4px 0 0;
}
.labels1 {
float: left;
width: 80px;
}
.labels2 {
float: left;
width: 80px;
}
.inputs1 {
float: left;
width: 200px;
}
.inputs2 {
float: left;
width: 200px;
}
HTML:
<div class="labels1">
<label for="input1">Input 1: </label>
<label for="input2">Input 2: </label>
<label for="input3">Input 2: </label>
</div>
<div class="inputs1">
<input type="text" value="" name="input1" id="input1" />
<input type="text" value="" name="input2" id="input2" />
<input type="text" value="" name="input3" id="input3" />
</div>
<div class="labels2">
<label for="input4">Input 4: </label>
<label for="input5">Input 5: </label>
<label for="input6">Input 6: </label>
</div>
<div class="inputs2">
<input type="text" value="" name="input4" id="input4" />
<input type="text" value="" name="input5" id="input5" />
<input type="text" value="" name="input6" id="input6" />
</div>
Then you can change the labels and inputs classes to the width you want.
Although I still think tables are easier because then you don't have to worry about setting widths yourself; you also don't have to worry about vertical alignment with tables.
use following styles.
for parent container
display: table;
for row container
display: table-row;
for cell container
display: table-cell;
example
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
lable
</div>
<div style="display: table-cell;">
input
</div>
<div style="display: table-cell;">
label input
</div>
</div>
<div>
<div style="display: table-cell;">
lable
</div>
<div style="display: table-cell;">
input
</div>
<div style="display: table-cell;">
label input
</div>
</div>
</div>
Use a table, that's what they are for.
I would suggest using a table or for a pure CSS solution maybe the 960 grid system 960.gs
I would use floats. Here's a jsfiddle showing how I would do it:
http://jsfiddle.net/pSsap/
I'll reproduce the code below.
With html like this:
<form class="grid">
<section>
<label for="wind">wind</label>
<span class="field"><input id="wind" name="wind" type="input" class="regular"></span>
<label for="earth">earth</label>
<span class="field"><input id="earth" name="earth" type="input" class="regular"></span>
</section>
<section>
<label for="fire">fire</label>
<span class="field"><input id="fire" name="fire" type="input" class="long"></span>
<label for="air">air</label>
<span class="field"><input id="air" name="air" type="input" class="regular"></span>
</section>
</form>
And css like this:
form.grid section {
clear: both;
}
form.grid section label, form.grid section span.field {
display: block;
float: left;
}
form.grid section label {
width: 50px;
}
form.grid section span.field {
width: 150px;
}
input.regular {
width: 100px;
}
input.long {
width: 140px;
}
Solutions:
Use a list: <ol> or <ul>
Set a width for that list: (in the example, 960px is the width of the <ul>)
Float the lists: <li> and set a width to limit its floating point: (in the example, 320px is the set width)
If you want to have a consistent alignment with the <label> and <select> pairs, set a width to the <label> (make sure you set it as a block-level element first: in the example, the <label> was set to 160px)
Make sure to clear (clear: left) any elements following this list (<ul>) used.
The Markup:
<ul>
<li>
<label for="req_retailer_index_fld">Select the retailer*:</label>
<select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_region_index_fld" class="right-label">Select the region*:</label>
<select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_customer_type_index_fld">Select the customer type*:</label>
<select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_meter_state_index_fldi" class="right-label">Select the meter state*:</label>
<select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
</ul>
The CSS
ul {
background: #EEE;
width: 960px;
}
li {
background: #FFC0CB;
float: left;
list-style: none;
width: 320px;
}
label {
display: inline-block;
width: 160px;
}
The result is that, the list will just drop when the <ul> can't contain it any longer (since you have set a width in it). On the other hand, the width of the <li>s will consistently make them align to each other, while being floated.