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>
Related
I have an input and when a user enters a value like 5,1 the text and the cursor/caret are uncomfortable close depending on the font:
Example code to play around with below. Experiment with your own fonts to find a similar one as I can't share the one in the image.
<input
type="text"
style="text-align: right; font-family: 'SuperSecret';"
value="5.1"
/>
How can I separate the two a bit? I don't want to alter the data in any way, so JS solutions/hacks like adding a whitespace character to the end of the sentence are not preferred.
Edit: As discussed in the comments of the accepted answer, it's actually not possible to do this with CSS.
Use letter-spacing
input {
letter-spacing: 10px;
}
<input
type="text"
style="text-align: right; font-family: 'SuperSecret';"
value="5.1"
/>
As described in the comments by #zgood, using padding-right will add some space between the last most character and the right side of the input field;
input {
padding-right: 20px;
}
<input
type="text"
style="text-align: right; font-family: 'SuperSecret';"
value="5.1"
/>
Is it possible to set space at the beginning of input?
when I open input field with ng-model there, the text should have space between input beginning and text.
like shown on img
You can add a class to your input and give it padding. You could also do it on the input directly, but that would affect all input fields, so not sure if that's what you are looking for.
.space {
padding-left: 10px
}
<input class="space" type="text" value="Need space there">
Just adding text-indent style will do..
<input type="text" style="text-indent:20px;">
you can use padding-left css to give space between text and input.
input{
padding-left:10px
}
<input type="text" placeholder="space ">
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>
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)
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/