I have been struggling with making the text input field 'txtProduct' larger. I have had some mild success but it seems the inline nature of the fields are prohibiting me from doing this properly using bootstrap. I'd imagine it's a simple fix but I am not a front end person. Please make any suggestions. I would like it to be something like col-md-10 or something around there...
I need the first text field much larger.
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<p class="lead">xxxxx</p>
<form class="form-inline">
<div class="form-group col-xs-push-10 col-md-pull-10">
<input class="form-control input-lg" id="txtProduct" name="txtProduct" type="text" placeholder="e.g. ALFALFA SPROUTS" autocomplete="on">
</div>
<div class="form-group">
#Html.DropDownListFor(x => x.Markets, new SelectList(Model.Markets, "Value", "Text"), new { #class = "form-control input-lg" })
</div>
<button type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-search"></span></button>
</form>
<div id="status" name="status"></div>
</div>
<div class="col-md-2"></div>
</div>
This might do it. Either incorporate into your CSS file, or paste it in the body at top:
<style>
.input-lg {font-size:2rem;padding:3px 7px;}
</style>
Experiment with font-size -- that is primarily what makes the input field larger, although you can also use height:2rem; and width:3rem; to size the field without changing text size.
Also, know the difference between px, em, rem and vw/vh in font-size. Lots of good explanation google-able, especially from css-tricks.com.
You can try this for making input type text element font size enlargement.
input[type='text']{
font-size: 20px;
}
Related
In Bootstrap, container-fluid has some padding, which I want. However, things inside a horizontal form seem to be ignoring the padding and getting pushed all the way to the edges of the container (I've added a border to the container here for illustration):
<div class="container-fluid" style="max-width:900px;border:1px solid black">
<div class="alert alert-danger">Correct, obeys container-fluid padding.</div>
<form class="form form-horizontal">
<div class="form-group alert alert-danger">Too Wide</div>
<div class="form-group panel panel-default">
<div class="panel-heading">Too Wide</div>
<div class="panel-body">Body</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Too far left</button>
</div>
</form>
</div>
A working example is on Bootply.
In that example, the first alert is as intended. Everything else inside the form is too wide.
Now, not shown in the Bootply, but if I add an input to the form:
<div class="form-group">
<label class="control-label col-sm-2" for="field">Label</label>
<div class="col-sm-10">
<input class="form-control" id="field" type="text"/>
</div>
</div>
The input is padded correctly, unlike the alerts and panels, which I don't understand.
How do I get all the things in the form to obey the padding? This is especially important to me because on small screens it pushes everything right to the edge and doesn't look that great.
The only thing I could think of to try was enclosing the form in a plain div, which had no effect.
I also achieved some success by manually setting the padding on the form, but that doesn't feel right, and it also breaks the properly padded input elements. Plus, it's not too robust in that I can't guarantee my hard-coded padding will match the container's usual padding which I have no control over.
//This will sort out your panels and alerts. (.less code)
//Or you could just put a .col-xs-12 on them.
.form-horizontal {
> .panel,
> .alert {
margin: 0 #grid-gutter-width / 2; //(or just 15px if your using bootstrap dist)
}
}
Then for your input groups, just using the col-sm-2 on your labels like you have done above.
And for your form group with the submit button simple put a col-xs-12 on it.
The reason for this is: .form-groups inside .form-horizontal receive margin-left: -15px; (The same as grid-gutter-width).
The intended design is that you use form-horizontal as a substitute for a .row and then use .cols inside. Or implement how you choose to fit your design.
Reference : bootstrap forms horizontal
Do your inputs like this
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
Do your submit button like this
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
You can do your alerts like this if you like
<div class="col-xs-12">
<!-- alert here -->
</div>
I am trying to make a textarea with 5 rows and a width defaulted to the width of the container below it, but also allow it to become more narrow if a user is on a small mobile device (e.g. a smart phone). I've been researching and I see that there is debate on whether to use CSS or HTML to alter the size of a textarea. I'm fairly new to web development (started last week), so if you know how to fix my problem could you tell me why you chose the method you did?
<form class="form-inline">
<div class="form-group">
<textarea class="form-control" rows="5"></textarea>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<button type="submit" class="btn btn-primary">Send!</button>
</form>
using form-inline makes the form-group display inline-block.. if you want the form-group to stretch the entire width you can use form-horzontal
or you can just set the display style of the form-group to block
<form class="form-inline">
<div class="form-group" style="display:block">
<textarea class="form-control" rows="5"></textarea>
</div>
</form>
make sure you site.css doesn't have a max-width value for textareas. this is in the default style sheet I believe
input,
select,
textarea {
max-width: 280px;
}
I'm pretty new to Bootstrap and CSS, so please excuse the probable immaturity of my question.
Ok, so here goes:
Context:
I'm using bootstrap and the [Grayscale theme] for a simple tool I'm building to help my students use coursera more effectively.
I have the following snippet of code:
<div>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-xl-4">
<input type="text" class="from-control" placeholder="Enter the link to your course">
<button type="button" class="btn btn-primary">Download Videos</button>
</div>
</div>
</div>
</form>
</div>
Problems:
The text entered in the textbox is not visible. I made sure text is actually entered in the box (by copy/pasting it to an editor) and I have not changed the default text color.
I can't seem to change the size of the text area. I've used col-xs-1, col-xs-2, and many more variations. It always takes the default size. The only thing that changes is the position of the textbox and button on the page. Do you know why that happens?
I would really appreciate your help! I've looked at some similar questions on the topic, but couldn't figure this out.
Many thanks!
Raf
The class for the textbox should be form-control, not from-control. Change that and try again?
EDIT: There is no such class as col-xl-4 in Bootstrap. Use col-xs-4 or col-lg-4.
#GertV is correct above in sying that you should be using form-control and that col-xl classes do not exist. The reason you cannot see the textarea though is that you have not declared its width.
Try this:
<div>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-md-4">
<input type="text" style="width: 300px;" class="form-control" placeholder="Enter the link to your course">
<button type="button" class="btn btn-primary">Download Videos</button>
</div>
</div>
</div>
</form>
</div>
Bootply codes can be seen here => http://www.bootply.com/QpvisrtAJR
I want the input box to be longer, however, the width:100% doesn't work for it.. And I don't want to use width: xxxpx or size=xxx to make it longer because it will be un-responsive in different resolution..
Does anyone have ideas about this?
Your input rule isn't actually being applied. It is not specific enough so is being overwritten by a default bootstrap rule. Try this instead:
.form-inline button.form-control,
#contain_word
{
display: block;
width: 100%;
}
http://www.bootply.com/Qh2VwydnHx
Also you have a an erroneous character in your html where you give the input field an id. Should be:
<input type="email" class="form-control" id="contain_word">
Not:
<input type="email" class="form-control" id="contain_word`">
You can use the calc() method to have the input field 100% in width but still float left to the label.
Updated Bootply: http://www.bootply.com/2K3ZIWsuWy
Calc() is compatible with most browsers except Opera Mini. For Blackberry you still need -webkit.
Check out the compatibility table here: http://caniuse.com/calc
You can add your class with a specified width
or override existing styles, but it is better to create your own style file
http://www.bootply.com/QpvisrtAJR#
div class="row">
<form class="form-inline" role="form">
<div class="form-group col-sm-6 no-padding">
<label for="contain_word`">Containing word(s): </label>
<input class="form-control test" id="contain_word`" type="email">
</div>
<div class="col-sm-2">
<button class="btn btn-primary form-control">Search</button>
</div>
<div class="col-sm-2">
<button class="btn btn-primary form-control">Clear</button>
</div>
</form>
</div>
I am struggling to create a textbox that fits the entire width of my container area.
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
<button type="submit" class="btn btn-lg">Search</button>
</form>
</div>
</div>
When I do the above, the two form elements are in-line, as I expect, but don't take up more than a few columns, at best. Hovering over the col-md-12 div in firebug shows it taking up the expected full width. It's just the text input that doesn't seem to fill. I even tried adding an in-line width value but it didn't change anything. I know this should be simple, just feeling really dumb now.
Here is a fiddle: http://jsfiddle.net/52VtD/4119/embedded/result/
EDIT:
The selected answer is thorough in every way and a wonderful help. It's what I ended up using. However I think my initial issue was actually a problem with the default MVC5 template within Visual Studio 2013. It contained this in Site.css:
input,
select,
textarea {
max-width: 280px;
}
Obviously that was blocking the text-input from expanding appropriately... Fair warning to future ASP.NET template users...
The bootstrap docs says about this:
Requires custom widths Inputs, selects, and textareas are 100% wide by
default in Bootstrap. To use the inline form, you'll have to set a
width on the form controls used within.
The default width of 100% as all form elements gets when they got the class form-control didn't apply if you use the form-inline class on your form.
You could take a look at the bootstrap.css (or .less, whatever you prefer) where you will find this part:
.form-inline {
// Kick in the inline
#media (min-width: #screen-sm-min) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;
}
[...]
}
}
Maybe you should take a look at input-groups, since I guess they have exactly the markup you want to use (working fiddle here):
<div class="row">
<div class="col-lg-12">
<div class="input-group input-group-lg">
<input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
<span class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit">Search</button>
</span>
</div>
</div>
</div>
have a look at something like this:
<form role="form">
<div class="row">
<div class="col-xs-12">
<div class="input-group input-group-lg">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="submit" class="btn">Search</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-xs-12 -->
</div><!-- /.row -->
</form>
http://jsfiddle.net/n6c7v/1/
As stated in a similar question, try removing instances of the input-group class and see if that helps.
refering to bootstrap:
Individual form controls automatically receive some global styling.
All textual , , and elements with
.form-control are set to width: 100%; by default. Wrap labels and
controls in .form-group for optimum spacing.
Try something like below to achieve your desired result
input {
max-width: 100%;
}
You can use flex-fill class for input
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<input type="text" class="form-control input-lg flex-fill" id="search-church" placeholder="Your location (City, State, ZIP)">
<button type="submit" class="btn btn-lg">Search</button>
</form>
</div>
With Bootstrap >4.1 it's just a case of using the flexbox utility classes. Just have a flexbox container inside your column, and then give all the elements within it the "flex-fill" class. As with inline forms you'll need to set the margins/padding on the elements yourself.
.prop-label {
margin: .25rem 0 !important;
}
.prop-field {
margin-left: 1rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12">
<div class="d-flex">
<label class="flex-fill prop-label">Label:</label>
<input type="text" class="flex-fill form-control prop-field">
</div>
</div>
</div>
I know that this question is pretty old, but I stumbled upon it recently, found a solution that I liked better, and figured I'd share it.
Now that Bootstrap 5 is available, there's a new approach that works similarly to using input-groups, but looks more like an ordinary form, without any CSS tweaks:
<div class="row g-3 align-items-center">
<div class="col-auto">
<label>Label:</label>
</div>
<div class="col">
<input class="form-control">
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
The col-auto class makes those columns fit themselves to their contents (the label and the button in this case), and anything with a col class should be evenly distributed to take up the remaining space.