Why is my input element wider than my label that it is inside? Should My input not be the same width as the containing label? As I have said width:100% and it is inside the label?
<label class="km-listview-label question" style="height: 2.5em; display:inline-block; width:20%;">
<input style="left:0; width:100%; display:inline-block; " data-description="Height" data-control="Text" data-code="Q3" data-type="Measurement" type="text">
</label>
<label style="display:inline;">m</label>
How do I make the input the same width as the label it is inside? Because I need the "m" to show up to the right of the input, so that it is like a meters unit measurement. However, when I type a lot of characters, they cover the "m". Here are images of the padding of the label and the input, using a debugging tool to look at elements:
Label:
Input:
Related
I generate the following HTML with Django:
<p>
<label for="id_username">
Username:
</label>
<input id="id_username" type="text" name="username" maxlength="30"></input>
</p>
... and use the following CSS code to try to decorate labels and text inputs:
form.registration p label,
form.registration p input
{
width: 250px;
}
In the end, the navigator (Firefox) only changes the width of the input text boxes, but not the one of the labels. Does anybody know why?
Generally, the default display for label in most browsers is display: inline. This means that a set width will not effect any changes. Add display: inline-block to the properties (this won't affect the <input>, which are already display: inline-block)
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?
Currently I have the following HTML code.
<div class="field">
<label>E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip"></div>
</div>
However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field.
How should I do this using HTML and CSS?
Here's what is looks like now:
http://jsfiddle.net/pEJMD/embedded/result/
This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.
You can set a fixed size to the label. Than push the div to the right with the size of the label:
<div class="field">
<label style="width:100px;">E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip" style="margin-left:100px;">
The quick brown fox jumps over the lazy dog
</div>
</div>
And the result.
Well, either you use a <table>, putting in one cell the <label> and in the other the <input>, or you use fixed widths/margins or paddings.
Solution 1: Table
Table solution
In this solution you use a table to hold the form. On column is for labels, the other column is for inputs. In this case you will have the tip in the input column, and it will align automatically with the input.
This has the pro to be working for flexible dimensions of your label/inputs. And tables are not always evil. Just remember that, if you want to keep your label aligned with the input, add a vertical-align:top to your CSS.
Solution 2: Fixed width
Fixed-width solution
In this solution you give a fixed width to your label, and move the .tip div using either margin, padding or left.
This will hold your layout in place, so be careful of extremely long labels!
You don't need an explicit width at all, nor tables; just use CSS tables (see my answer to this related question):
CSS
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
HTML
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/
Use margin-left:
Change:
<div class="tip" id="emailTip">
To:
<div class="tip" id="emailTip" style="margin-left:95px;">
DEMO
Learn more about the CSS margin property here.
You can give a height to the label, give a width to the parent div and float your tip. See the demo: http://jsfiddle.net/pEJMD/4/
Here you go: http://jsfiddle.net/4sJ2t/
You just need to give your label a fixed width, and then your tip a left margin
label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}
I want to put a margin-left on only the text that is wrapped, i.e. text after the first line:
This is text with no margin left
this text has margin left
Example
click to see
The input and the label are in 1 div and text is wrapped on the second line, which is what I want
but is it possible to have like a margin left on only the text that is wrapped on the second line
jsfiddle example of my problem
Yeah, sort of — I’d suggest combining padding-left and text-indent:
HTML
<div class="test">
<label for="2question1">
<input type="checkbox" id="2question1" name="2question" title="Merknaam 1" /> Very long text which is wrapped on the next line
</label><br>
<label for="2question2">
<input type="checkbox" id="2question2" name="2question" title="Merknaam 2" /> Merknaam 2
</label><br>
<label for="2question3">
<input type="checkbox" id="2question3" name="2question" title="Merknaam 3" /> Merknaam 3
</label><br>
<label for="2question4">
<input type="checkbox" id="2question4" name="2question" title="Merknaam 4" /> Merknaam 4
</label><br>
</div>
CSS
.test {
width:200px;
}
.test label {
display: block;
padding-left: 1em;
text-indent: -1em;
}
text-indent applies only to the first line of text in a block-level element, so it should achieve what you want.
See http://jsfiddle.net/pauldwaite/qUvvv/
No, but you can apply CSS to the first line, so you could reverse your thinking to achieve the same effect.
Something like this:
.mytext {margin-left:-5em;}
.mytext:first-line {margin-left:0;}
Here's a JSFiddle example of it working: http://jsfiddle.net/4ckxJ/3/
See http://www.quirksmode.org/css/firstline.html for more info on the :first-line pseudo-class.
You could wrap the line you want to wrap in a span and apply:
display: block;
margin-left: 12px;
Giving it display: block will make it wrap to a new line and the margin pushes it off to the right.
as per your updated example, here's a fork JSFiddle
float the input and then make the label display block so it floats right in beside it - spacing created with padding and margin, overflow:hidden makes the text "not wrap" - then you also might want to remove the br's from your HTML
I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
I have viewed other questions similar to this, but aligning by row instead of by column.
You can wrap the labels around your inputs and display them as blocks:
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name" attribute.
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.
You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}