I am a bit new to angular 2. Using a form and have an <input type="text"> field, but it seems like its limited to 1 line view. Can I use something similar to textarea where I can increase the box by number of lines? Basically need to show a larger paragraph field for a form using input.
Yes we can use <textarea> element in angular.
<textarea name="text" cols="40" rows="5"></textarea>
You can increase the height of the input field also through the style. Quite handy for reach text inputs like comments.
<mat-form-field>
<mat-label>Description</mat-label>
<textarea style="height: 150px" matInput></textarea>
</mat-form-field>
Related
Ok, so basically i have an form which edits data in my database. I have the following inputs:
<input value="#title" type="text" asp-for="#Model.ProjName" class="form-control" placeholder="Ticket1" />
<textarea value="#description" type="text" asp-for="#Model.ProjDescription" class="form-control" rows="3"></textarea>
I can pre-populate the input just fine, however value doesn't work on the textarea. What is the correct way of populating it?
This will solve your problem. Text area acts differently from input tag . So instead of using value parameter, add your value between open and close tag of text area
<textarea type="text" asp-for="#Model.ProjDescription" class="form-control" rows="3">#Model.description</textarea>
Here is a .net fiddle with an example
https://dotnetfiddle.net/2TYEOk
Since you use asp-for="#Model.ProjDescription",so the default value will be #Model.ProjDescription,if you want to bind value with #description,you can try to use id and name to replace asp-for="#Model.ProjDescription".Here is the sample code:
<textarea type="text" id="ProjDescription" name="ProjDescription" class="form-control" rows="3" >#description</textarea>
Not sure if this is React specific, but, why does the following work in React and render some text to the element:
<textarea value="Some text."></textarea>
but the same in plain HTML does not:
<textarea value="Some text."></textarea>
maybe I am missing something or done something foolish? Apologies and thanks in advance!
In HTML the text area is a non-self-closing tag and has content. It defines its text by children.
textarea
<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>
In React it uses the value attribute. Note that is also self-closing and takes no children.
textarea tag
This keeps the textarea element consistent with other form elements such as input and select.
<textarea
id="story"
name="story"
rows="5"
cols="33"
value="It was a dark and stormy night..."
/>
The textarea child content represents the default value of a text area, but the value property represents the current value.
It is the current value that needs to be manipulated via JS, not the default value.
When click middle position of the HTML textarea tag , it automatic takes 4 space. I want,dont take any space in textarea.
<textarea rows="2" cols="40" name="chief_complaints" class="form-control" value="">
</textarea>
How to solve this problem?
According to the standard, the textarea element does not support the value attribute, instead of that everything between <textarea> and </textarea> belongs to the value of the text area. To get rid of any spaces and newlines you have to write <textarea></textarea> without anything between the start and the end tag.
<textarea>[DON NOT USE BREAK LINES AND SPACES HERE, LET IT BE BLANK]</textarea>
For example:
<textarea rows="2" cols="10">Your Content</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.
i was designing a webpage form which has couple of textboxes and textarea fields in it, and noticed that certain alignment issues with these fields.
The code is as below -
<textarea rows="4" cols="30" name="details"></textarea>
<input type="text" name="username" size="30"></input>
Although both fields have col width set to 30, i see that the textarea width extends over the width of the textbox. I used overflow:hidden using css for the textarea field, and then tried resizing it using the cols property set to 25, 26 etc.., but still see that the alignment is not perfect (though very close).
Question - Is there a better way to align all the fields in the form to have a standard width of say 30cols?
Using CSS to style the elements is the usual way:
<textarea style="width:400px;" rows="4" cols="30" name="details"></textarea><br/>
<input style="width:400px;" type="text" name="username" size="30"/>
I'm using inline styles as example only, you'd want to assign classes, use a stylesheet, etc. Plus I fixed the typo on the text input element as it is a self closing tag.
Good luck!
Try adding this to your css stylesheet:
textarea#styled {
width: 600px;
}
Then add the id to your textarea:
<textarea rows="4" id="styled" name="details"></textarea>
You could also try putting both of these elements inside of an html table with the table's alignment set to middle.