I'm having an issue getting the text in one of my input boxes to begin at the top of the input box. Instead, it is vertically centered. None of the other solutions on stackoverflow seemed to help.
I've recreated the issue here (ignore how bad the rest of the form looks ;): http://codepen.io/tim1017/pen/ofuhx
And here's the actual page it's located on: http://dev.longviewsources.com/contact/
Thanks!
For multi-line text, which it looks like you're going for, you probably want to use a <textarea>, not a text input tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
Also see: Multiple lines of input in <input type="text" />
You're using an input where you should use a textarea. Input elements only support one line of input, thus it is centering that one line vertically. Here's a working fork: http://codepen.io/anon/pen/LBvsd
corrected and forked you can check the css and example;
here
Related
I have the following problem. I made an input form with a height of 5vh (more than default) and when I want to type something inside, typing cursor is centered in the input field. I want to put it at the start of the input field.
Now is like this
I want this
Well I think you should make that a <textarea> tag with the "resize" to be none, like this:
`<textarea placeholder="Your message" style="height:7vh; resize:none;"></textarea>`
I hope this helped..
Basically I want to something like below:
It is a textbox that has some predefined text. What is the best way to make it to appear like two rows and allow the texts within to have a breakline? As I've mentioned this is predefined text, I tried with text="abcdef<br/>sss" but it is showing <br/> instead of breaking a new line
use a <textarea></textarea> and
for linebreaks
What about using
text="abcdef\nsss"
Use textarea
Look at the sample in w3schools:-
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea
All,
I have a text field that when it gets too full the line goes to the next line instead of extending horizontally.
On the right side of the following webpage you can type in an email address and make it long and the text wraps instead of going horizontally. Does anyone have any idea why it would be doing this? Is it something in my CSS? I inspected the element but didn't see anything that would be causing it.
Here is the URL:
http://tinyurl.com/bolsrcx
Thanks
Add word-break: initial; on the <input>
Its a new CSS 3 keyword, and luckily has -WebKit support :)
I've got a simple textarea in a form and for some reason when I click in the textarea to begin to type, it centers the first line. I can hit backspace until it lines up at the start of textarea but I don't know why it's doing that. I've Googled and can't seem to find a reason why it would do this. Here is my jsfiddle for it:
http://jsfiddle.net/4cVkn/
I've tried text-align:left in numerous places (inline HTML and CSS) and it doesn't seem to change anything. It seems like it should be a simple fix, thanks for the help.
It isn't centred, it just has a default value of a series of space characters.
Put </textarea> immediately after the start tag instead of filling it with whitespace.
The default content of a text area is the content between its tags. Your source has something like:
<textarea name="bio">
</textarea>
so the initial value of the text area is the newline and the spaces used for indentation – the characters you can backspace over.
To get rid of them, close the tag immediately:
<textarea name="bio"></textarea>
Aside: the kind of form layout you're going for should probably be done using tables – at least until the various shiny new CSS3 layouts are better supported. Your avoiding them actually made the code less readable what with all the <br/>s.
For a readonly view, I want to swap textboxes for plain text (because it looks nicer than disabled textboxes.
However, plain text doesn't have the same margin/border/padding values, so the text no longer aligns with labels, where the textbox did.
What's an appropriate technique for making the plain text still line up with the existing label?
Put it in an display:inline-block div. vertical-align:baseline might help as well. Depending on the markup of the label you would need to change the label to an inline-block as well.
(If you could provide some markup it might be easier to assist. jsfiddle maybe?)