is there a helper class that i can use to bottom align the "Search" button below. I am using Boostrap 3.2.
<div class="input-group col-md-2">
<label for="FirstName">First Name</label>
<input class="form-control" id="FirstName" maxlength="10" name="FirstName" placeholder="First Name" type="text" value="" />
</div>
<div class="input-group col-md-2">
<label for="LastName">Last Name</label>
<input class="form-control" id="LastName" maxlength="10" name="LastName" placeholder="Last Name" type="text" value="" />
</div>
<div class="input-group col-md-2">
<label for="RecordNo">Record No</label>
<input class="form-control" id="RecordNo" maxlength="6" name="RecordNo" placeholder="Record No" type="text" value="" />
</div>
<div class="input-group col-md-3">
<label for="Department">Department</label>
<select id="Department" class="form-control">
<option value="">CHOOSE DEPARTMENT</option>
</select>
</div>
<div class="col-md-3 input-group">
<button id="Search" class="btn btn btn-success pull-right">
Search <span class="glyphicon glyphicon-search"></span>
</button>
</div>
By default, bootstrap column is position relativeso to position your button just use:
button{
position:absolute;
bottom:0
}
.col-lg-4, .col-lg-8
{
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
OR use this
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
Related
I'm actually new in asp.net core and don't know much about it
My question is.
I want to populate a text field on Razor view when an enum item is selected from dropdown list but have no idea about how to do it
I have searched about this but didn't find any thing
I want to populate Price field when item is selected from FightClass
View
#model Airline.Models.BookingModel
#{
ViewData["Title"] = "Buy";
}
<h2>Buy</h2>
<h4>BookingModel</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Buy">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="FlightSkyMiles" type="hidden" value="#ViewBag.Flight.SkyMiles" />
<div class="form-group">
<label asp-for="FlightName" class="control-label"></label>
<input asp-for="FlightName" value="#ViewBag.Flight.FlightName" class="form-control" readonly />
<span asp-validation-for="FlightName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="FlightNo" class="control-label"></label>
<input asp-for="FlightNo" value="#ViewBag.Flight.FlightNo" class="form-control" readonly />
<span asp-validation-for="FlightNo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="OriginCity" class="control-label"></label>
<input asp-for="OriginCity" value="#ViewBag.Flight.OriginCity" class="form-control" readonly />
<span asp-validation-for="OriginCity" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DestinationCity" class="control-label"></label>
<input asp-for="DestinationCity" value="#ViewBag.Flight.DestinationCity" class="form-control" readonly />
<span asp-validation-for="DestinationCity" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Departure" class="control-label"></label>
<input asp-for="Departure" type="datetime" value="#ViewBag.Flight.Departure" class="form-control" readonly />
<span asp-validation-for="Departure" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Adult" class="control-label"></label>
<input asp-for="Adult" type="text" name="seats" value="0" class="form-control" />
<span asp-validation-for="Adult" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Children" class="control-label"></label>
<input asp-for="Children" type="text" name="seats" value="0" class="form-control" />
<span asp-validation-for="Children" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Senior" class="control-label"></label>
<input asp-for="Senior" type="text" name="seats" value="0" class="form-control" />
<span asp-validation-for="Senior" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Travelers" class="control-label"></label>
<input asp-for="Travelers" type="text" name="TotalSeats" class="form-control" />
<span asp-validation-for="Travelers" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="FlightClass" class="control-label"></label>
<select class="form-control" asp-for="FlightClass" name="fclass" asp-items="Html.GetEnumSelectList<Classtype>()">
<option selected="selected" value="">Please select</option>
</select>
<span asp-validation-for="FlightClass" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" class="form-control" readonly />
<span asp-validation-for="Price" class="text-danger"></span>
</div>
<div class="form-group">
<input type="radio" name="Reservation" value="Buy" /> Buy
<input type="radio" name="Reservation" value="Block" /> Block
<span asp-validation-for="ReservationType" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-default" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
If anyone can help me I will be very thankful
You can set onchange event to select :
<select onchange="getPrice()" class="form-control" asp-for="FlightClass" name="fclass" asp-items="Html.GetEnumSelectList<Classtype>()">
<option selected="selected" value="">Please select</option>
</select>
So that when select changed , you can make ajax call to server side to get price based on Classtype:
<script>
function getPrice() {
$.ajax
({
url: '/home/getPrice',
type: 'post',
data: { 'id' : $("#FlightClass").val() },
success: function (result) {
$("#Price").val(result.price);
},
error: function () {
alert("Error")
}
});
}
</script>
On controller side , you can query the price by id :
public IActionResult getPrice(string id)
{
//get price by id
var price = "";
return new JsonResult(new { price = price });
}
I am trying to put on same line firstname,lastname inputs and button.
The total width of the above 3, should be equal to the 'xxxxxxx' input.
you can find the code here
http://jsfiddle.net/zxb53wjq/1/
<div class="container">
<form role="form" action="" method="post">
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<div class="form-group">
<input maxlength="200" type="text" class="form-control" placeholder="xxxxxxxx"/>
</div>
<div class="form-group">
<label class="control-label">Application:</label>
<div class="input-group">
<input style="width:50% " class="form-control " placeholder="first name" name="firstname" type="text" />
<input style="width:50% " class="form-control " placeholder="last name" name="lastname" type="text" />
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
using bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Bootstrap 4 is not the same as bootstrap 3. Most of the classes have been renamed and unlike bootstrap 3, bootstrap 4 uses flex box.
Bootstrap 4
Remove the two inputs' inline styles
Use input-group-append instead of input-group-btn.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<input class="form-control " placeholder="last name" name="lastname" type="text" />
<div class="input-group-append">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</div>
</div>
http://jsfiddle.net/fhg3qx96/
Bootstrap 3
Use input-group-btn inside input-group
<div class="input-group mb-3">
<input class="form-control" style="width:50%" placeholder="first name" name="firstname" type="text" />
<input class="form-control" style="width:50%" placeholder="last name" name="lastname" type="text" />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
https://codepen.io/anon/pen/dQrJeW
I have inline form, in which for each line I want to have label on the left side, and input on the right side. I have tried pull-right, align-right, text-right, but none of them works.
Fiddle is here !
Here is what I do:
<style>
.form-group label{
text-align: left!important;
}
</style>
<form action="" class="form-horizontal" method="post" role="form">
<div class="form-group">
<label class="col-md-2 control-label" for="FirstName">First name</label>
<div class="col-md-4">
<input class="form-control" id="FirstName" name="FirstName" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label pull-left" for="LastName">Last name</label>
<div class="col-md-3">
<input class="form-control" id="LastName" name="LastName" type="text" value="" />
</div>
</div>
</form>
I have a multi-step reg form with each step in a fieldset,i am using bootstrap validator for validation.I made the 'next' button in first step to toggle validation.And it works well...
The problem i have is,i have to prevent going to next step on an error.
Now, validation works on clicking 'next'in first step but immediately passes to next step.
I want to stay there until validation is success...
How to do this?
i m giving my chunk of code...i have all libraries included...
...
<fieldset id="first_step">
<h2 class="fs-title">Create your account</h2>
<div class="form-group">
<label class="col-md-3 control-label">Username</label>
<div class="col-md-9">
<input type="text" class="form-control" name="uname" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm Password</label>
<div class="col-md-9">
<input type="password" class="form-control" id="cpwd" />
</div>
</div>
<input type="button" name="next" id="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle"></h3>
<div class="form-group">
<label class="col-md-3 control-label">*Register Number</label>
<div class="col-md-9">
<input type="text" class="form-control" id="Text1" name="reg" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">*Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="Text2" name="stname" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-offset-3 col-md-12">
</div>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" id="sub_but" name="submit" class="submit action-button" value="Submit" />
</fieldset>
<script type="text/javascript">
$(".next").click(function() {
$('#msform').data('bootstrapValidator').validate();
//prevent here????
//Script to slide first fielset
}
$(".previous").click(function() {
//Script to slide back to first fieldset
}
</script>
I have a form elements using the following markup.. And the current look of the form you can find in the following screenshot:
How can I set the "In" and"Lbs" right after their corresponding textbox?
<div class="form-group">
<label for="BI16" class="col-md-1 col-md-offset-1 control-label">Height:</label>
<div class="col-md-1">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />In
</div>
<label for="BI16" class="col-md-1 control-label">Weight:</label>
<div class="col-md-1">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
</div>
<label for="BI16" class="col-md-1 control-label">BMI:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />Lbs
</div>
<label for="BI16" class="col-md-1 control-label">Waist:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
</div>
</div>
You can use Bootstrap's input groups to attach the units to the inputs:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="BI16" class="col-md-1 col-md-offset-1 control-label">Height:</label>
<div class="col-md-1">
<div class="input-group">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
<span class="input-group-addon">In</span>
</div>
</div>
<label for="BI16" class="col-md-1 control-label">Weight:</label>
<div class="col-md-1">
<div class="input-group">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
<span class="input-group-addon">Lbs</span>
</div>
</div>
<label for="BI16" class="col-md-1 control-label">BMI:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
</div>
<label for="BI16" class="col-md-1 control-label">Waist:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
</div>
</div>