I am trying to make a pretty form that will work boostrap-responsive.css for mobile use. Before I used tables, and it worked fine without bootstrap-responsive, but now it becomes very ugly when scaled down.
What I'm trying to accomplish:
Get headline/label for each input to be in top(horizontal).
Aligned right side(so it will look pretty on a phone).
Have glyphicons prepended - this is what it makes difficult, since with them I can't format it correctly
If I am too unclear of what I want to accomplish, you can also take a look at my super hightech picture that describes the form:
http://i.imgur.com/xcvL0hp.jpg
My code half working code is:
<form class="form-vertical" ....>
<fieldset>
<div class="row-fluid">
<div class="span8 input-prepend">
<label class="control-label" for="title">Title</label>
<span class="add-on"><i id="titleicon" class="icon-minus-sign"></i></span>
<input type="text" name="title" id="title" />
</div>
<div></div>
<div class="span2 input-prepend">
<label class="control-label" for="price">Price</label>
<span class="add-on"><i id="priceicon" class="icon-minus-sign"></i></span>
<input type="text" id="price" name="price"/>
</div>
</div>
<div class="controls">
<label class="control-label" for="description">Description</label>
<div class="input-prepend">
<span class="add-on"><i id="descriptionicon" class="icon-minus-sign"></i>/span>
<textarea name="description" rows="6" class="field span6" id="descriptionfield"></textarea>
</div>
</div>ยจ
</fieldset>
</form>
I am not sure I formatted it correctly for stackoverflow(this is my first question) so it is here too with syntax highlighting: http://pastebin.com/LzN1vbYi
I know there are tons of answers to very similar question, but that prepended glyph makes none of the code work. I tried around 15 different approaches.
you should try this form
<div class="row-fluid>
<div class="span12>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<span class="add-on"><i id="titleicon" class="icon-minus-sign"></i></span>
<input type="text" name="title" id="title" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="price">Price</label>
<div class="controls">
<span class="add-on"><i id="priceicon" class="icon-minus-sign"></i></span>
<input type="text" id="price" name="price"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>`
</form>
</div>
</div>
Related
I am having troubles with this particular form when it comes to trying to format the page, adding a header and moving the rest of the content down 10% of the screen so headings aren't hidden underneath the header that I am putting in. This CSS works properly for other pages, simply moving content down 10% (I have tried using padding as well):
.content{
position: absolute;
top: 10%;
}
however when I put it to this particular form, it squishes all of my form elements Picture of Squished form elements. I am not quite sure what would be causeing this, as I am just trying to add space above the form.
Here is the form code on that .cshtml page(this form is 90% pre-generated code by Visual Studios 2019 and works prior to the <div class="content"> tag):
<div class="content">
<div class="row">
<div class="col-md-4">
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="#Model.id" class="form-control" />
<div class="form-group">
<label asp-for="FirstName" class="control-label"></label>
<input asp-for="FirstName" class="form-control" value="#Model.FirstName" />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="LastName" class="control-label"></label>
<input asp-for="LastName" class="form-control" value="#Model.LastName" />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Username" class="control-label"></label>
<input asp-for="Username" class="form-control" value="#Model.Username" />
<span asp-validation-for="Username" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password" class="control-label"></label>
<input asp-for="Password" class="form-control" value="#Model.Password" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="StreetAddress" class="control-label"></label>
<input asp-for="StreetAddress" class="form-control" value="#Model.StreetAddress" />
<span asp-validation-for="StreetAddress" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="City" class="control-label"></label>
<input asp-for="City" class="form-control" value="#Model.City" />
<span asp-validation-for="City" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="State" class="control-label"></label>
<input asp-for="State" class="form-control" value="#Model.State" />
<span asp-validation-for="State" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ZipCode" class="control-label"></label>
<input asp-for="ZipCode" class="form-control" value="#Model.ZipCode" />
<span asp-validation-for="ZipCode" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ApprovalStatus" class="control-label"></label>
<input asp-for="ApprovalStatus" class="form-control" value="#Model.ApprovalStatus" />
<span asp-validation-for="ApprovalStatus" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary" />
<input type="reset" value="Cancel" class="btn btn-primary" asp-action="ManageVolunteers" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Landing">Back to List</a>
</div>
</div>
FYI: the remaining html on this page (Directly above the form).
<div class="header">
<img src="~/Images/BitworksLogo.png" id="header-img" />
<h2>Volunteer Management System</h2>
</div>
<h1>Edit</h1>
<hr />
Edit: I have now tried it on multiple forms of the same nature (ASP.Net-core .cshtml model-bound forms) and the same pattern happens with those fields and labels, in terms of them being squished. Id this a possible but between model-bound forms themselves? Is there another way that works and shows the same output?
It likely shrinks due to the fact that the content class has absolute positioning, but has no parent element that is full width. You could simply add the property width: 100%; to the .content class and then it would look more normal.
But you can (and probably should) avoid using position absolute all together in this case.
A better way would be to set header to have a fixed height and remove the position property from content.
.header {
height: 100px;
}
.content {
// removed all properties.
}
Now this results in the header and the content being relatively positioned to each other, and so they will stack on top of each other.
Today I wrote the code:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="first">FIRST</label>
<input class="form-control" id="first" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="second">SECOND</label>
<input class="form-control" id="second" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="third">THIRD</label>
<input class="form-control" id="third" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="fourth">FOURTH</label>
<input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />
</div>
</form>
</div>
The purpose of this code is to get a form that all of its element are in the same line. In order to make this happen, I used the class "form-inline", which is a part of Bootstrap directory. However, since I didn't loaded the Bootstrap files in the header, I got the elements in separate lines.
So I spent a lot of time to understand what is wrong with my file.
What I expect is that my browser/IDE gives an error for using an unknown class. Do you know how I can get this feature?
I have been trying to use horizontal form layout like below:
Enter Email: [field] Enter password: [prepend+field]
I've been trying for an hour but couldn't find any solution. Please tell how I can do that.
I have tried:
<form class="form-horizontal">
<!--<span class="offset2">Sign Into the Email</span>-->
<div class="control-group">
<div class="controls"><span>Welcome to My Email</span></div>
</div>
<div class="control-group input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" />
<span class="add-on">#</span>
</div>
</div>
<div class="control-group input-append">
<label for="passwd" class="control-label">Password</label>
<div class="controls">
<input type="password" />
<span class="add-on">***</span>
</div>
</div>
<div class="control-group">
<div class="controls" >
<label class="checkbox">
<input type="checkbox" />Remember Me
</label>
<button class="btn">Sign In</button>
</div>
</div>
</form>
You're looking for the form-inline class.
you can use this css to add spacing between the form groups:
.form-inline .form-group {
margin-right: 10px;
}
I am using Bootstrap3 in my project. I have enclosed my form in a jumbotron.
Here is how my form looks (not good looking as of now):
I tried to make it better. but it is getting worse. I want all the fields to be in one-line and
the submit button centered below them. I have no idea how to do it. I am very new using Bootstrap3.
Here is my html code:
<form action="" id="id-exampleForm" class="form-inline" method="post" >
<input type='hidden' name='csrfmiddlewaretoken' value='1bfhNFINdeJVpSNBBQd0X7zLWLVwm1bB' />
<div id="div_id_price_order" class="form-group">
<label for="id_price_order_0" class="control-label col-lg-2 requiredField">
price order
<span class="asteriskField">*</span>
</label>
<div class="controls col-lg-12">
<label class="radio">
<input type="radio" checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >lowest</label>
<label class="radio">
<input type="radio" name="price_order" id="id_price_order_2" value="highest_price" >highest</label>
</div>
</div>
<div class="form-group">
<div id="div_id_newest_entry" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_newest_entry" class=" requiredField">
<input class="checkboxinput checkbox" id="id_newest_entry" name="newest_entry" type="checkbox" />
latest date
</label>
</div>
</div>
</div>
<div class="form-group">
<div id="div_id_latest_year" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_latest_year" class=" requiredField">
<input class="checkboxinput checkbox" id="id_latest_year" name="latest_year" type="checkbox" />
latest year
</label>
</div>
</div>
</div>
<input type="submit" name="submit" value="Submit" class="btn btn-primary button white" id="submit-id-submit" />
</form>
EDIT:
I want something like this: I have edited this on powerpoint. so it does not look very good.
EDIT AFTER COMMENT
Please see the fiddle for an inline form in a Jumbotron with the button in-line (not below centered), and fieldset.
Note : that I changed the vertical alignment of the checkbox and radio + add some right margin, and an extra small button. The form will go as block if the screen is extra-small as a bootstrap behavior.
JsFiddle
<div class="jumbotron">
<form class="form-inline">
<fieldset class="radiogroup">
<legend>Sorting Criteria</legend>
<label for="id_price_order_0">
price order
<span class="asteriskField">*</span>
</label>
<label class="radio" for="id_price_order_1">
lowest
<input type="radio" checked="checked" id="id_price_order_1" />
</label>
<label class="radio" for="id_price_order_2">
highest
<input type="radio" id="id_price_order_2" />
</label>
<label for="id_newest_entry" class="requiredField checkbox">
latest date
<input id="id_newest_entry" type="checkbox" />
</label>
<label for="id_latest_year" class="requiredField checkbox">
latest year
<input id="id_latest_year" type="checkbox" />
</label>
<input type="submit" name="submit" value="Submit" class="btn btn-primary btn-xs" />
</fieldset>
</form>
Add the class form-control to ALL of your input elements for a start:
<input type="radio" class='form-control' checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >
Also, what I do to make my life easier is to pre-wrap the elements in the correct sized divs instead of doing it in the labels and inputs like so:
<div class='row'>
<form ... >
<div class='col-lg-2>
<label ... ></label>
<input ... >
</div>
<div class='col-lg-2'>
...
</div>
...
</form>
</div>
Its a tiny bit slower to load but it makes the code so much more readable I think it is worth it. Also I feel that there is a lot of extra in your code that shouldn't be there and is confusing check out the code here: http://getbootstrap.com/css/#forms. They show you exactly how to format an in-line form.
Could being inside a .jumbotron be causing the issues? Why don't you try a panel or a well This should work for you:
<div class='panel panel-default'>
<div class="panel-heading">In-line Form</div>
<div class="panel-body">
<form action='anotherScript.php' method='post' class='form-inline'>
<div class='row'>
<div class='col-md-4'>
<strong>Price:</strong>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="low" checked>
Lowest
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="high">
Highest
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='date' value='date'>
Latest Date
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='year' value='year'>
Latest Year
</label>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<center><button type='submit' class='btn btn-primary'>Submit</button></center></form>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/52VtD/5046/
Make sure you stretch the results panel to full width to see the form in-line.
I am using Twitter Bootstrap. In the forms I can do horizontal layouts and vertical layouts but the class is on the <form> tag. So, how to I do a little of both where I want to save space and put a couple of input boxes horizontally and the rest vertically?
I have a form that looks like this:
Address [__________________]
City [___________]
State [__]
Zip [_____]
Country [____]
But I want it to look something like this:
Address [__________________]
City [___________]
State [__] Zip [_____] Country [____]
Please help with the CSS.
Here is my code:
<form class="form-horizontal">
<fieldset>
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label" for="Address">Mailing Address</label>
<div class="controls">
<input data-val="true" data-val-required="Required" id="mailing" name="Address" type="text" value="1313 Mockingbird Lane" class="valid">
</div>
</div>
<div class="control-group">
<label class="control-label" for="City">City</label>
<div class="controls">
<input class="span3 valid" id="city" name="City" type="text" value="Kaysville">
</div>
</div>
<div class="control-group">
<label class="control-label" for="State">State</label>
<div class="controls">
<input class="span2" id="state" name="State" type="text" value="UT">
</div>
</div>
<div class="control-group">
<label class="control-label" for="PostalCode">Zip</label>
<div class="controls">
<input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Country">Country</label>
<div class="controls">
<input class="span3" id="country" name="Country" type="text" value="US">
</div>
</div>
</div>
</div>
</fieldset>
</form>
This worked for me
<div class="control-group">
<label class="control-label" for="inputPLZ">PLZ*</label>
<div class="controls">
<input type="text" class="input-mini" id="inputPLZ">
Ort*
<input type="text" class="input-medium" id="inputOrt">
</div>
</div>
It is rendered like this
Wrap state, zip and country in a div, then float the child elements left and they should align. Though I have no experience with Bootstrap so don't know if that will affect anything
Helps to understand how bootstrap is set up.
The .control-label class is the left side indicator of a form. This takes the left 140px of the form and floats left. The .controls class is the right side of container of a form, and simply applies a margin left of 160px to itself without floating.
Knowing this, you can treat Bootstrap like normal HTML. You can simply include all the inputs in the same control, like so:
<div class="control-group">
<div class="controls">
State: <input class="span2" id="state" name="State" type="text" value="UT">
Zip: <input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
Country: <input class="span3" id="country" name="Country" type="text" value="US">
</div>
</div>
If you want the alignment to match up, use a little bit of trickery by making the first label in your horizontal set the .control-label like so:
<div class="control-group">
<label class="control-label">State:</label>
<div class="controls">
<input class="span2" id="state" name="State" type="text" value="UT">