I'm struggling to get inputted text to align with the top of an input textarea, on an HTML form, and have searched forums extensively, so I thought I'd post here.
I've tried using:
textarea{
vertical-align:top;}
and
input["textarea"]{
vertical-align:top;}
I've also tried adding autoflow:auto;
I think you are wanting to use a <textarea> instead of an <input>. Here's some background for you too, but you use different form elements for different things.
HTML
<input type="text" placeholder="input" value="input">
<br />
<textarea rows="10">Textarea that has text aligned to the top. No css needed</textarea>
Demo Here
Im not sure what your issue is but I will try and give an answer to what I believe is your problem :)
When you do like this:
<form>
<textarea cols="25" rows="5" required>
</textarea>
</form>
The spaces between your textarea is already rendered when you run the code - this means that when you wanna type in the textarea there is 100 different places you can begin texting.
I think what you wanna do is this:
<form>
<textarea cols="25" rows="5" required></textarea>
</form>
This way the texting in the textarea will begin in the top-left corner of the textarea, that is because you have not rendered any lines when you run this code.
DEMO of the two Versions:
http://jsfiddle.net/2thMQ/4/
Related
I am trying to create a textarea where it shows text but when you click on it and write something the text disappears. For example, on some websites is says "Search" on the textbar and when you click it and write something, the text disappears (like Google). Here is the code that i wrote:
<textarea style="resize:none;" cols="35" rows="1" wrap="virtual">Search</textarea>
Sadly this code didnt work. It just writes some text on the textarea and it doesn't create a read-only text. I did my research and i couldn't find a question with a answer to my question. They were either not about HTML or they were about other things and not read-only. So can someone please help me with this? Thank you for your time. Have a wonderful day.
You can use the placeholder attribute.
<textarea style="resize:none;" cols="35" rows="1" wrap="virtual" placeholder="Search"></textarea>
You can use the placeholder attribute for that:
<textarea style="resize:none;" cols="35" rows="1" placeholder="Type something..." wrap="virtual"></textarea>
I have a form with typical inputs for name, address, age... using the standard textbox:
<input class="form-control" id="inputdefault" type="text">
For one of my inputs I require a bigger text area type control that I don't see a bootstrap version for and my UI looks to be not uniform.
Is there an element that is in line with the rest of the bootstrap textboxes as far as look and feel goes but allows for the input to be very wide (almost the entire form width) and tall(about 10x taller than a textbox)?
<textarea class="form-control" id="inputdefault" rows="4" cols="50">
</textarea>
You could just use the HTML textarea tag and use the rows and cols to control the size yourself
rows="#" controls how may lines of text your box can hold and
cols="#" controls the width of the box
Bootstrap has styling for a textarea. See: http://getbootstrap.com/css/#textarea.
Taking the example from the Bootstrap documentation, it's used like:
<textarea class="form-control" rows="3"></textarea>
Where the rows attribute determines how many lines of text it shows. In your case, it sounds like you might want something like:
<textarea class="form-control" rows="1"></textarea>
Use this:
<textarea class="form-control">
It's inline with the other Bootstrap input types where you're probably using form-control as well.
Im using VS and created html page with textarea, I need to put the text in two rows from the start one above one like
row1:mytext
row2:mytext2
in order to make it work I should put it exactly like following and If I doing formatting to the page the text was removed from where I want it to be, there is a way to put the text in specific position in text area?
<div>
<textarea rows="2" cols="700" disabled="disabled" class="path-width">Expire: #ViewBag.CertExpireDate
Subject: #ViewBag.Cert</textarea>
</div>
Try this;
<textarea rows="2" cols="700" disabled="disabled" class="path-width">Expire: #ViewBag.CertExpireDate#(Environment.NewLine)Subject: #ViewBag.Cert</textarea>
#(Environment.NewLine) will add new line and it will bot be removed when you do the formatting.
Add
ancii code between line. Demo
<textarea rows="2" cols="700" disabled="disabled">
Expire: #ViewBag.CertExpireDate
Subject: #ViewBag.Cert
</textarea>
UPDATED
You can remove whitespaces using jquery trim(). Example
var text = $('textarea').val().trim();
$('textarea').html(text);
It works for me.
<textarea rows="2" cols="700" disabled="disabled" class="path-width">
Expire: #ViewBag.CertExpireDate
Subject: #ViewBag.Cert
</textarea>
Maybe the css class
class="path-width"
causes this problem. Check http://jsfiddle.net/7SqHc/
I am trying to code an input form with instructions throughout. I would like the text to not be selectable, but of course I would like the input to be selectable so that the users can modify their text easily.
My HTML looks something like this:
<div id="form">
<header> Some header text </header>
Instructions on what to do.
<form>
<label>first name:</label><input type="text" name="fname" />
<label>last:</label><input type="text" name="lname" />
<label>email:</label><input type="text" name="email" />
</form>
<div id="extras"> A bunch of separate notes and maybe a textarea box</div>
</div>
and my CSS looks something like this:
#form{ user-select:none; }
#form form input{user-select:auto}
A couple of notes:
I included all the css for various browsers in my actual code.
I tried user-select:text, and it did not work.
I have many bits of text separated into different sections, so I very much prefer to remove the ability to select as the default behavior and just apply the ability to select to the inputs. Applying code to make each little bit of text unselectable would be a pain.
Even if I did the above fix, I would still be curious about this issue.
Anyone know why this is happening?
There's no such thing as user-select: auto; You should use user-select: text;
Your given code works, so you may want to include the rest of the code or link to it.
I have an input field, in which a user will enter text inside. When the text becomes too long, the input field extends horizontally instead of dropping down vertically.
I tried adding this CSS:
overflow: hidden;
word-wrap: break-word;
but I had no luck. Any other suggestions on how to accomplish this?
I think you should use a multiline input field as TextArea:
http://htmlhelp.com/reference/html40/forms/textarea.html
Sample code:
<textarea rows="10" cols="30"></textarea>
Xtian - You shouldn't have any restriction on where you need to use an <input> or a <textarea>. Just give the text area the same name that you would've used for the input and you'll be fine.
For example, I just replaced
<input type="text" name="reply" />
With
<textarea rows="1" cols="26" name="reply"></textarea>
Much better now.
This is a soultion i found, Just use a hidden input and use a button for the text with a action for the form.
<form method="post" action="nextpage.php">
<input style="display: none;" name="name" type="text" value=“somedata"></input>
<button>Some text that you want to wrap but also submit the form </button>
</form>