Im using the following code and I cannot change the size of the text box to make it bigger than 700,how can I change it to 1000?
<div class="form-group">
#Html.LabelFor(model => model.Service, new { #class = "col-md-2 oper-label" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Service, new { #style = "width: 700px;" })
</div>
</div>
</div>
I am not familiar with the language that you are using, but if you just use an HTML <textarea> it will work.
Bootply example
<div class="form-group">
<div class="col-md-10">
<textarea class="form-control" style="width: 700px;"></textarea>
</div>
</div>
This code will produce a <textarea> that is 700 pixels wide like this:
Adjust the width to change the width of the textarea. Another option would be to do this, which produces a textarea that will be approximately 80% of the browser width:
<div class="form-group">
<div class="col-md-10">
<textarea class="form-control"></textarea>
</div>
</div>
You cannot just change class="col-md-10" to class="col-md-11" (or col-md-12) or simply remove <div class="col-md-10"> ?
Check this link out for more information about bootstrap grid system : http://getbootstrap.com/css/#grid-example-basic
Related
I am new to using Bootstrap. I tried adjusting a 3-coulmn row to fit, with the last column divided into another 3, but it overlaps and having difficulty in making it look right.
My cshtml for the 1st row:
<div class="row">
<div class="col-md-4 col-sm-4">
<strong>Last Name</strong> <span class="required">*</span>
#Html.TextBoxFor(m => m.Patient_Lastname, new { #class = "text-primary", required = "required" })
</div>
<div class="col-md-4 col-sm-4">
<strong>First Name</strong> <span class="required">*</span>
#Html.TextBoxFor(m => m.Patient_Firstname, new { #class = "text-primary", required = "required" })
</div>
<div class="col-md-1 col-sm-1">
<strong>birth</strong> <span class="required">*</span>
#Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1900, 119).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
"--Year--", new { #class = "form-control", style = "width: 90px; height:30px;", required = "required" })
</div>
<div class="col-md-1 col-sm-1">
<strong>Month</strong> <span class="required">*</span>
#Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
"--Month--", new { #class = "form-control", style = "width: 90px; height:30px;", required = "required" })
</div>
<div class="col-md-2 col-sm-2">
<strong>Day</strong> <span class="required">*</span>
#Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
"--Day--", new { #class = "form-control", style = "width: 80px; height:30px;", required = "required" })
</div>
</div>
The 2nd and 3rd row are straight forward with col-md-4
Could you help me fix this ?
TIA
Ron.
I think the problem is the input filled width is bigger than available try resizing it.
There is no fixed layout you have to follow so that your screen will look nice automatically! It's your job to try and experiment what's the best to fit your need.
Obviously there is no way for col-sm-1 to fit a dropdown perfectly so you have to think of different layouts for different breakpoints. And bootstrap has many nice CSS classes you can use out of the box already for that purpose.
Extra Small Devices
For extra small devices, you might still be able to put year, month and day dropdown in a single row.
HTML Structure
<form>
<div class="form-row">
<div class="form-group">Last Name Label & Input</div>
<div class="form-group">First Name Label & Input</div>
<div class="form-group">
<div class="form-row">
<div class="form-group col">Year Label & Input</div>
<div class="form-group col">Month Label & Input</div>
<div class="form-group col">Day Label & Input</div>
</div>
</div>
</div>
</form>
I used .form-row here instead of .row because it gives you tighter gutters between columns.
.form-group is used to give each input group a nice margin-bottom.
Use of .col is to give you auto width.
How it looks like
Now you have a layout that works for extra small devices. You kind of start building up from this layout for each different devices with different screen sizes and add necessary CSS classes.
Small Devices
For small devices, you might want to put last name and first name input as 2 columns in a row.
HTML Structure
<form>
<div class="form-row">
<div class="form-group col-sm-6">Last Name Label & Input</div>
<div class="form-group col-sm-6">First Name Label & Input</div>
<div class="form-group col-sm-12">
<div class="form-row">
<div class="form-group col">Year Label & Input</div>
<div class="form-group col">Month Label & Input</div>
<div class="form-group col">Day Label & Input</div>
</div>
</div>
</div>
</form>
See those .col-sm-* classes are added?
How it looks like
...
...
...
Extra Large Devices
HTML Structure
<form>
<div class="form-row">
<div class="form-group col-sm-6 col-xl-4">Last Name Label & Input</div>
<div class="form-group col-sm-6 col-xl-4">First Name Label & Input</div>
<div class="form-group col-sm-12 col-xl-4">
<div class="form-row">
<div class="form-group col">Year Label & Input</div>
<div class="form-group col">Month Label & Input</div>
<div class="form-group col">Day Label & Input</div>
</div>
</div>
</div>
</form>
How it looks like
So I have some text, an Html.LabelFor on the left, and some raw text (as #Html.DisplayText simply does not work).
I end up with the above awfulness. I've tried to set the div alignment explicitly, to no avail. What am I missing here?
<div class="form-group" style="align-items:center">
#Html.LabelFor(model => model.seniority, htmlAttributes: new { #class = "control-label col-md-2" })
#Model.seniority.ToString()
</div>
Here is the approach you should use when using bootstrap
<div class="form-group" style="align-items:center">
<div class="col-md-2">
#Html.LabelFor(model => model.seniority)
</div>
<div class="col-md-3">
#Model.seniority
</div>
</div>
I want to use label as used "Static Control" label on that page. However, although I use the same Bootstrap version, I cannot aligned my form controls like that (I want the label is right float, data fields is left float -side by side - and there is a ":" sign between them. Howwver, the result is as shown on the image below. Could you please have a look at my code and inform what is wrong?
The code on that page:
<div class="form-group">
<label class="col-md-3 control-label">Static Control</label>
<div class="col-md-9">
<p class="form-control-static"> email#example.com </p>
</div>
</div>
The code I use on my Razor page:
<div class="form-group">
#Html.LabelFor(m => m.Name, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>
<br />
<div class="form-group">
#Html.LabelFor(m => m.Surname, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Surname, new { #class = "form-control-static" })
</div>
</div>
You have two elements which equal 100% width plus the colon, so it pushes the value down a line. You'll need to just code the label instead of using an HtmlHelper to add the colon. Change it to this:
<div class="form-group">
<label class="col-md-3 control-label">#Model.Name:</label>
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>
Here is the final solution fixed the problem. Thanks a lot for all of your helps...
<style>
.col-sm-3 .control-label {
float: right !important;
margin-top: 0 !important;
}
/*Add colon ( : ) to the end of labels */
.col-sm-3 > label:after {
content: " :";
}
</style>
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Name, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Name)
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Surname, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Surname)
</div>
</div>
<br />
I have a form and im getting confused with rows.
Where should I put in rows? Do I need them? Do I need one for a modal? One for the entire form or each form input?
Here's what I have:
<div class="container">
<div id="modal" class="modal fade">
//modal stuff
</div><!-- /.modal -->
<h1>Title Here</h1>
<form id="content-add-form" class="form-horizontal" role="form" name="content-add-form" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-md-2 control-label">Title:</label>
<div class="col-md-4">
<input name="title" type="text" class="form-control" placeholder="Title">
</div>
</div>
<div class="form-group">
<label for="date" class="col-md-2 control-label">Date:</label>
<div class="col-md-2">
<div class='input-group date' id='date-picker'>
<input type='text' class="form-control" name="date" value="{{ date("d-m-Y") }}" data-format="dd-MM-yyyy" readonly/>
<span class="input-group-btn">
<button class="btn btn-default datepicker-invoker" type="button"><i class="icon-calendar"></i></button>
</span>
</div>
</div>
</div>
</form>
You use <div class="row"> whenever you start a section of cols for an example, lets say I have have 3 sections. The first row I require 12 columns. I wrap those twelve columns in a row I listed below an example counting to 12. The second I need 3 columns, In those columns lets say for an example I need a nav-menu, some text-content and an image, I will wrap the columns in a row. Same like the first two, the third column I need only a image and some content. I follow the same rules.
<div class="row">
<div class="col-md-1">one</div>
<div class="col-md-1">two</div>
<div class="col-md-1">three</div>
<div class="col-md-1">four</div>
<div class="col-md-1">five</div>
<div class="col-md-1">six</div>
<div class="col-md-1">seven</div>
<div class="col-md-1">eight</div>
<div class="col-md-1">nine</div>
<div class="col-md-1">ten</div>
<div class="col-md-1">eleven</div>
<div class="col-md-1">twelve</div>
</div>
<div class="row">
<div class="col-md-4">nav-menu</div>
<div class="col-md-4">content</div>
<div class="col-md-4">image</div>
</div>
<div class="row">
<div class="col-md-6">image</div>
<div class="col-md-6">content</div>
</div>
You do need the rows because if you don't follow the structure defined in the documentation-
<div class="container-fluid">
<div class="row">
<div class="col-md-12">form</div>
</div>
</div>
-the grid won't behave as expected. There are a couple ways of working around this, neither of them ideal.
You can wrap the form around the container and then create the whole grid structure inside that container putting your form groups inside the columns. You might have to set the form width to 100%. Another limitation is that your form groups need to be inside columns and can't wrap them. Therefore if you really need to control widths inside form groups then you need to create a new container inside the group. This is fairly easily managed if you wrap containers in columns with factors of 2, 4 or 6 then in is clear where the columns in your new container will align with the columns in the outer container.
Send your inputs using javascript. Then you don't need a form.
I think I can see the confusion. A form has many fields, on different rows, but you wouldn't necessarily use a Bootstrap "row" for each.
What we can do is use just one Bootstrap "row", and then put each label/field pair in its own div. Within that div the label and the field have their own divs, with Boostrap col- information. This will give us a form with many rows, and will give the desired wrapping effect you are expecting with Bootstrap.
The example below is an MVC form. Don't let the MVC syntax confuse you - you can replace the #Html.Label & Editor with HTML labels & input fields.
<div class="container">
<div class="row">
#using (Html.BeginForm("MyAction", "MyController", Model))
{
#Html.AntiForgeryToken()
<div class="form-group">
<div class="col-md-4">
#Html.LabelFor(model => model.PersonFirstName)
</div>
<div class="col-md-8">
#Html.EditorFor(model => model.PersonFirstName, new { htmlAttributes = new { #class = "form-control", placeholder = "Enter your first name" } })
#Html.ValidationMessageFor(model => model.PersonFirstName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-4">
#Html.LabelFor(model => model.PersonSurname)
</div>
<div class="col-md-8">
#Html.EditorFor(model => model.PersonSurname, new { htmlAttributes = new { #class = "form-control", placeholder = "Enter your surname" } })
#Html.ValidationMessageFor(model => model.PersonSurname, "", new { #class = "text-danger" })
</div>
</div>
}
</div>
</div>
I have the following HTML:
#using (Html.BeginForm("Create", "BicycleSellerListing", FormMethod.Post, new { enctype = "multipart/form-data" })) {
#Html.ValidationSummary(true)
<fieldset style="margin:5px;">
<legend>List a Bicycle for Sale</legend>
<div style="display: inline">
<div style="display: inline">
#Html.LabelFor(model => model.BicycleManfacturer)
</div>
<div style="display: inline">
#Html.DropDownList("ManufacturerList")
</div>
<div style="display: inline">
#Html.LabelFor(model => model.BicycleType)
</div>
<div style="display: inline">
#Html.DropDownList("TypeList")
</div>
<div style="display: inline">
#Html.LabelFor(model => model.BicycleModel)
</div>
<div style="display: inline">
#Html.EditorFor(model => model.BicycleModel)
#Html.ValidationMessageFor(model => model.BicycleModel)
</div>
....
....
I cannot make the labels and the edit field appear next to each other (by using inline). The edit fields always appear below the label. Anyone know what I might be doing wrong?
Inline style means that if space permits than the div will align inline. Now on the parent div you haven't given any width. So it will take up space according to its Child. Now lets suppose first child is inserted. The parent div will take up it's Child's space. Now you want to insert another Child. Even though the next Child has display inline, it will not find any space next to its sibling because the sibling and the parent div are taking same space. Hence it will render in the next line.
Try doing this:
#using (Html.BeginForm("Create", "BicycleSellerListing", FormMethod.Post, new { enctype = "multipart/form-data" })) {
#Html.ValidationSummary(true)
<fieldset style="margin:5px;">
<legend>List a Bicycle for Sale</legend>
<div style="display: inline; width: 1000px;">
<div style="display: inline">
#Html.LabelFor(model => model.BicycleManfacturer)
</div>
<div style="display: inline">
#Html.DropDownList("ManufacturerList")
</div>
...