I have a text input field with a fixed height, I want the box to look big because of the considerable amount of text that has to be typed in it. The problem is, when the height is set and the user clicks in the box, the text starts right at the center of the box, I would like the text to start on top. My code:
#mainText {
width: 400px;
height: 300px;
}
<div>
<form>
<input type="text" id="mainText" value="Your text">
<button>Submit Text</button>
</form>
</div>
Try using an input type called textarea. It's better for large amounts of text. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
Example usage:
<textarea id="mainText" name="mainText">Your text</textarea>
You can use textarea instead of input which will allow you to enter multiple lines and it will start writting from top left
Related
Why can't I write from the beginning of the box when i modify input text size? ?
That s my code:
<input type="text" style="width:600px; height:300px;" value="" placeholder="Introdu textul tau:">
Use textarea instead of input.
<textarea style="width:600px; height:300px;" placeholder="Introdu textul tau:"></textarea>
By "beggining of box" you meaning corner "0,0"?
You have to use padding to do the trick since vertical-align doesn't work on text inputs.
padding-bottom: 250px;
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>
When I use the following code, text box size is increased to 300px, but when I type the text in it, it aligns at the top left corner. I want text to be aligned vertically in the center left rather than the top left.
<input type="text" style="valign:middle; with:250px;height:300px;">
Where am I going wrong? Is there any other solution for this?
you want this?
<input type="text"
style="text-align:center;valign:middle; width:250px;height:300px;">
otherwise it's unclear for me..
Try adding line-height
<input type="text" style="valign:middle; with:250px;height:300px;line-height:300px;">
After some research found this:
input { line-height: normal; }
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?
For example I have limited space and I want the submit button to appear in the bottom right of the text area. Something like this?:
<textarea value='text message' name='messageSMS' id='messageSMS' onfocus='clearInput(this)' onblur='clearInput(this)'>
<input value='send' id='sendSMS' type='submit' name='submit' />
</textarea>
No.
Instead, you could use CSS to move it over the textbox.
For example: (Tested in Firefox on Windows 7; DEMO)
#sendSMS{
width: 40px;
position: relative;
left:-47px;
top: -7px;
}
You might want to make the button cover the entire height of the textbox.
You can use CSS positioning.