https://drive.google.com/file/d/0B6M34Ej8NH0hd2xDNlJyeEh1ZE0/edit?usp=sharing
http://jsfiddle.net/54end/
<textarea name="incomes" id="in" rows="2" cols="88" class="form-control" rows='1' style="width: 100px; margin-bottom:0px; resize: none;">1</textarea>
▲ this is the part of my project..
As you see the page, My textarea has extra padding under it but I can't find the source of it.
Please someone fix this..
You have two rows attribute on your textarea, maybe try to just set one row attribute to 1?
<textarea name="incomes" id="in" rows="1" cols="88" class="form-control" style="width: 100px; margin-bottom:0px; resize: none;">1</textarea>
Edit: there is also a height: 42px on your textarea, maybe it's what cause the extra padding at the bottom?
The problem relates to vertical alignment.
The textarea's default value for the display property is inline-block, and the default value for the vertical-align property is baseline. Change it to middle, for example, and compare the difference.
Further reading:
vertical-align at MDN
What is Vertical Align? (an article that explores the different values)
Related
Current behavior is, when i add text in textarea till the end, i am still able to add texts in bottom wherein the lines in first move top. I want the number of characters be limited to width and height of textbox. I couldn't find a way yet.
resize:none and overflow:hidden only disabled resize and hided scrollbars. Please favour with a solution.
My current html:
<textarea rows="10" cols="50" name="status" class="input" autofocus></textarea>
CSS:
.input{
outline: 0;
font-weight: 1000;
text-align: center;
resize: none;
overflow: hidden;
padding: 20px;
}
JSFiddle: https://jsfiddle.net/hsodfkzu/11/
To demonstrate:
This is the right amount of characters this textarea can accomodate
But, it still accept even more characters and as a result, textarea doesn't look good like below:
I don't want more text being added beyond tenth line. Not sure if there's a way to restrict.
An <input> element with a maximum length of 10 characters:
<input maxlength="number">
<textarea rows="10" cols="50" name="status" class="input" maxlength="10" autofocus></textarea>
Let's say I have an input field and I make its height:25px. If I increase the font-size inside that text field, although the box size is constant, it appears as it I added a whole lot of padding. When the font size is normal, it looks something like this:
BEFORE
But now when I increase the size of the font, it looks something like extra padding added something this:
AFTER
However, the padding is unchanged when I debug. I tried adding the box-sizing:border-box, but still it is unchanged. I would really appreciate if someone can help me. Thanks.
A simple demonstration can be achieved by just changing the size of the font-size.
<body>
<div>
<input type="text" value="HI"/>
<input type="text" value="HELLO" style="font-size: 900px; height: 30px; width: 100%;"/>
<input type="text" value="HI"/>
</div>
</body>
You can reset the vertical-align propertie .
Defaut is baseline , line- height is equal to font-size if not reset.
example with vertical-align: (added text and reduced some value from your funny example ;) )
input {
vertical-align:middle;
}
/* see div middle center. Notice: the tallest input gives the line-height on the line it stands */
div {
background:linear-gradient(to top,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%) ,linear-gradient(to left,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%);
<div>
<input type="text" value="HI"/> text
<input type="text" value="HELLO" style="font-size: 90px; height: 30px; width:50px;"/> text
<input type="text" value="HI"/>
</div>
I want the text that sits next to a one row textarea to be centered vertically with the textarea.
This is the default behavior if I put text next to an input of type="text".
Id like to stick with the single row textarea rather than an input here because this field is there for the user to paste a fair amount of pre formatted data into. The user wont normally care what the data says or need to see it unless the program finds a problem. If a problem is found an error is shown, at which point its helpful if the user can drag out the text area to view the data and research the issue.
My Code:
<tr>
<td class="vert" > New PNR Info
<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></td>
<td align="center">Change Fee
<input type="text" size="4" id="fee"name="fee"></td>
</tr>
Ive Tried:
css like this:
.vert {
vertical-align: middle;
}
and this vertical-align: top;
and wraping the two in a p tag like this
<p>New PNR Info<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></p>
to no avail.
If my question is not clear maybe a screenshot will help. I want the offending text by the red arrow to be cetered like the text by the green arrow.
Apply the vertical alignment to all elements like this
Demo
<p class="whatever">
<label for="alignme">Label Text</label>
<textarea id="alignme"></textarea>
</p>
.whatever * {
vertical-align: middle;
}
.whatever * is equivalent to
.whatever label, .whatever textarea {
vertical-align: middle;
}
It doesn't seem logical at first, but the vertical-align property needs to go on the taller element:
http://jsfiddle.net/N5NuA/
textarea {
vertical-align: middle;
}
I believe the problem is you are setting the parent (td or p) to align to the top and since your textarea is inside that element it aligns according to parent, not the text.
What I think will work is setting the textarea vertical alignment.
<textarea style="vertical-alignment:middle">
If that does not work, also change the parent element to middle. Also try text-top or text-bottom for the text-area if those changes do not work also.
i am trying to remove the white space between two imput fields for all my form elements.
i decreased the height but after that the next label goes up
can you tell me how to remove it
http://jsfiddle.net/DA9gK/18/
<div class="control-group">
<label class="control-label" for="inputEmail">Company Name</label>
<div class="controls">
<input type="text" id="inputEmail">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Contact Name</label>
<div class="controls">
<input type="text" id="inputEmail">
</div>
</div>
I don't think anyone could help You by now. You have big mess here. Update jsfiddle with HTML and CSS windows. Btw - you're writing about padding or margin styles imo in labels. (margin-bottom:0)
I think this should solve your problem, I have answered it there. Thank you. button alignment in form fields
Damn! I apologize for the uncorrect fast answer, ok I have zeroed in on your problem, and the problem lies in the css file that you are importing viz. "http://twitter.github.com/bootstrap/assets/css/bootstrap.css" and your elements are inheriting the style attribute from it, and your white space problem is exactly on 'line no 1945' where its explicitly defined
.form-horizontal .controls {
*display: inline-block;
*padding-left: 20px;
margin-left: 180px;
*margin-left: 0;
so either you have to manually override those or use the good old "!important" attribute.
PS: you have to edit the 'margin-left' attributes value to maybe 160px or something which you are comfortable with.
It's because of the padding and margin on label.control-label. Remove the top padding or bottom margin. (I think removing the margin looks better.)
label.control-label {
margin-bottom: 0;
}
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/