My label is on one line and text is on the next line. How could I modify the css to make them both on the same line? I have tried several things such as float based on other posts but they still are on different lines.
.indentColumn {
width: 71px;
padding-top: 5%;
}
.labelColumn {
width: 71px;
margin-left: 15%;
}
.inputForm {
margin-left: 30%;
}
<div class="indentColumn">
<div class="labelColumn">
<div class="inputForm">
<span class="secNav">
<label display:inline-block; for="username">#springMessageText("idp.login.username", "User ID:")
</label>
<input class="fieldColumn" display: inline-block; id="username" name="j_username" type="text" size="20" maxlength="64" minlength="6"
value="#if($username)$encoder.encodeForHTML($username)#end">
</span>
</div>
</div>
</div>
Thanks for the help everyone.I removed all the divs, display and also the class in the textbox and now they are on the same line. The main issue seemed to be the class in the textbox because only after I removed that did they appear on the same line.
I also found that there was a form div that was set to 250px that was causing the text field to go onto the next line whenever there was a left-margin. Once I removed that, things started working better.
If you want them on the same line, then put them in a container that is wider than 71 pixels.
There isn't room in 71 pixels for them to fit side by side.
CSS
label{
display:inline-block;
}
and remove <label display:inline-block; ... /> - its wrong
Related
I have the following fiddle:
http://jsfiddle.net/neGJF/
The HTML code is as follows:
<div class="loginbarGrad">
<div style="position:relative; float:right; padding: 11px 65px 0 0;">
<input type="text" placeholder="EMAIL" value="EMAIL" class="singleField" name="kp_email" id="kp_email">
<input type="password" placeholder="PASSWORD" value="PASSWORD" class="singleField" name="kp_password" id="kp_password">
<a class="signIn">Sign In</a>
</div>
</div>
You can see the CSS at the fiddle.
I am trying to increase the box size of the inputs, and also trying to increase the size of the "sign in". I was wondering if someone could explain why when I increase the size of the font, it's not centered vertically within the login bar, and also, why it impacts the alignment of the login/password box? I'd like to be able to have it so that the boxes and sign in are not impacting each other. This may be a basic CSS function but it's eluding me, so I am hoping someone with more experience than I can help explain it.
Thank you!
Why don't you try:
.loginbarGrad > div > * {
vertical-align: middle;
}
The elements within the div within .loginbarGrad will all align to the middle of each other.
you can also float left the inputs and space them out with a bit of margin from the sides
and than you're free to increase the font-size of the .signin text just make sure to add line-height with the same height as the inputs
.signIn { font-size: 24px; line-height: 18px; }
#kp_password , #kp_email { float:left; margin: 0 5px;}
I run into a css issue.
I have a form, and inside it I want to show a label and some info in each line.
The html for the form is:
<form class="form_dialog">
</br>
<label>Status: </label>
<span><img src="images/check.png" alt="check mark" width="16" height="16"/></span>
</br></br>
<label>Type: </label>
<span>V1</span>
</br></br>
<label>Description: </label>
<div class="sp">16 Nodes - Test for long description.
This system is good in all cases. Max length is 100.</div>
</form>
The css for all the tags are:
form.form_dialog {float: left; clear: left;}
.form_dialog div {float:left; clear:left}
.form_dialog label {
display: block; float: left;
width: 12.0em; min-height: 2.0em; text-align: right;
}
.form_dialog span {
margin-left: 3.0em;
}
div.sp {
display:inline;
margin-left:3em;
margin-right:3em;
width:70%;
}
My prob here is that for the description info, I want to keep the text lines indented(each line starts from the same position) as well as inline with label. But cannot achieve it.
Any one can help on this? Thanks.
You are creating a table. You could use a table, or use two seperate elements, placed side by side inside of a containing .
<div class="container">
<div class="formContainer">
</div>
<div class="textContainer">
</div>
</div>
Then float each container and align your text using CSS.
Agreed with Trendy, also, since you starting using span tag, you should just use the span
<span>16 Nodes - Test for long description.
This system is good in all cases. Max length is 100.</span>
I have:
<div>
<input id="input" type="text" />
<button id="submit">submit</button>
</div>
which gives me this
If I expand the main panel by dragging it with the mouse cursor the width the new space is empty:
I want that the <input type="text" /> fills the whole horizontal new space but that the submit button remains in the same row.
I tired to use <input style="width:100%" type="text"/> but then it fills the whole row and the submit button appears in the next row:
I also tried a table as mentioned in that thread:
Liquid textfield width
The result was that it works "a little bit" the submit button overlaps the input text and a certain space on the right always remains empty:
Can somebody help me with an code idea for fill the whole space except the (static) size of the submit button.
Thanks!
The "table" method you linked to will work, but you're missing one crucial property on your input elements: box-sizing.
http://cssdeck.com/labs/sbffl3l2
<div class="foo">
<div class="bar"><input type="text"></div>
<div class="bar"><input type="submit"></div>
</div>
.foo {
display: table;
width: 100%;
}
.bar {
display: table-cell;
}
.bar:first-child, input[type="text"] {
width: 100%;
}
input {
box-sizing: border-box; /* this is the key */
}
Prefixes may be required: http://caniuse.com/#feat=css3-boxsizing
I believe you can do this:
<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />
It's not advisable to do inline styles though.
Edit: Make sure you also define a fixed width for the button
Why not give width of 70% to input and 20% to button?
I'm sure there are a lot of people with this problem, but I can't find a proper solution. That is basically is the problem. I've got a form with two pairs of label and field.
HTML:
<label for="Account">Inlognaam:</label>
<input class="field" id="Account" name="Account" type="
<br />
<label for="Wachtwoord">Wachtwoord:</label>
<input class="field" id="Wachtwoord" name="Wachtwoord" type="password" />
CSS:
label {
width: 150px;
float: left;
text-align: left;
}
So the problem is: when I don't use the 'float:left;' the input field will be not nice structured. BUT the label is going top-aligned. How can this be fixed?
An example is visible here: http://jsfiddle.net/ptKEh/9/ (comment float:left; to see what I mean)
EDIT::
Another thing... The input fields are in Chrome correct but in IE9 (9.0.8) the second field is a little shorter.
instead of floating the labels just use display: inline-block;
it will preserve the vertical alignment and it works even on IE6 and 7
I would recommend using padding to move the text down to be inline. This will only work with 1 line of text for the label and is cross browser capable.
I have put together an example jsfiddle http://jsfiddle.net/ptKEh/11/
I am trying to break the table crutch...
I want to place 3 "labels", "First", "Middle" and "Last" over 3 text boxes so that the labels are above the corresponding text boxes and the labels and text boxes are vertically aligned. In other words, I need a 3 columns table where the first row has 3 labels and the 2nd row has 3 text boxes in them and everything is left justified and I want ALL the columns widths to be identical and fixed.
How do I do this with w/o tables using only CSS?
I know that margin-left will give me a consistent distance between the groups, but how do I "carriage return" to the next line w.o using a Paragraph or a break tag, since the distance involved is really a function of the font, I imagine, instead of being able to "carriage return down" a specified number of pixels.
I know that display: block will put things on a new line, but that creates a break before and after. I just want a break "after."
I hope I explained it well enough.
Thanks.
Additional Edit:
I understand that perhaps I should not be avoid using tables for something that tables is good at, but if CSS had an attribute analagos to margin-left:10px but in a vertical direction AFTER performing a cariage return, the advantage of using CSS over tables is that I wouldn't have a million TR and TD tags in my markup.
Is there such a thing?
What you do is create your form fields this way:
<div id="form">
<div class="control">
<div class="label">
<label for="field1">Field 1</label>
</div>
<div class="field">
<input type="text" name="field1" id="field1">
</div>
</div>
...
</div>
with:
#form { overflow: hidden; } // this is important!
#form div.control { float: left; width: 33%; }
Now if one of those labels is larger the controls won't line up but this would be an example of where "pure" CSS falls shorts of what tables can do easily and naturally, which begs the question: why are you giving up on tables?
Note: Another answer along the same lines has suggested not wrapping the label and input in a div. This is a reasonable approach but you lose some expressive power. For instance, some things in CSS are only possible on block level elements. For example, you could change the above with:
#form, div.control { overflow: hidden; width: 600px } // this is important!
#form div.control { float: left; width: 200px; }
#form div.control div { float: left; width: 100px; }
and get your labels on the left, which you can't do quite as well without the wrapping inner divs.
HTML:
<div class="row">
<div class="column">
<label>Left</label>
<input name="left" />
</div>
<div class="column">
<label>Left</label>
<input name="left" />
</div>
<div class="column">
<label>Left</label>
<input name="left" />
</div>
</div>
CSS:
.row .column{
width: 200px;
float:left;
}
.row .column input,
.row .column label{
display:block;
}
You can now use CSS to style the textboxes and labels, so they look nice. Also notice how similar this example is to using tables, which goes to show that in some scenarios tables aren't evil, but the right way to go. If you want to align things in a grid, use tables.
Turns out that if you want to make a table of labels over input fields, the table element is fine to use.... If the table element is the clearest html code, why not use it?