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.
Related
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>
i need to add font-icon inside input field so i used this method
<input type="text" name="your name" placeholder=" YOUR NAME" style="font-family:Flaticon" class="restrict">
as you see placeholder=" YOUR NAME" this display font-icon but my problem is when user types some text place holder disapper so i need font icon to be placed permanent inside input field like <lable>
can someone help me
You can't. What do you expect it to look like? placeholder disappears by design.
If you want to prefix an icon in front of your input field, put them together in a container, give this container the needed style and put there your icon and your input-tag. That's the way, how bootstrap your problem solves.
Shortened example:
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
Of course, you need CSS.
I am new to html. This is a very simple question. I am dealing with forms. I want all the input text fields to start at the same x-axis point regardless of the size of the label. I want the labels to be left aligned and all the text fields to start at the same x-axis point.I don't want to use tables or " ". Is there a simple solution or Should I use separate divisions for labels and input fields? I don't mind using css but I prefer it to be simple.
<form>
<label>Name</label>
<input type="text" name="n1"><br>
<label>Phone No.</label>
<input type="text" name="p1">
</form>
I want "n1" and "p1" to start at the same x-axis point.
Add this style to your page:
label{
display:inline-block;
min-width:80px
}
Check here Fiddle
You can use paragraph tags for every input element.
<p><input type="text" name="your name"></p>
<p><input type="email" name="your email"></p>
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/
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.