this button is affecting everything that is in the same line with it, how do i make it fixed without having it affect the things on the same line with it. the fields are affected by the save button. if the save button is is the same line as the form field, it affects the form field
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input type="hidden" asp-for="EmployeeCode" value="#EmpCode" />
</div>
<div class="form-group">
<label asp-for="IndustryId" class="control-label"></label>
<select asp-for="IndustryId" class="form-control" asp-items="ViewBag.IndustryId"></select>
</div>
<div class="form-group">
<label asp-for="SubIndustryId" class="control-label"></label>
<select asp-for="SubIndustryId" class="form-control" asp-items="ViewBag.SubIndustryId">
<option selected> - None - </option>
</select>
</div>
<div class="form-group">
<label asp-for="YearsExp" class="control-label"></label>
<input asp-for="YearsExp" class="form-control" />
<span asp-validation-for="YearsExp" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Proficiency" class="control-label"></label>
<input asp-for="Proficiency" class="form-control" />
<span asp-validation-for="Proficiency" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="BusinessArea" class="control-label"></label>
<input asp-for="BusinessArea" class="form-control" />
<span asp-validation-for="BusinessArea" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Feature" class="control-label"></label>
<input asp-for="Feature" class="form-control" />
<span asp-validation-for="Feature" class="text-danger"></span>
</div>
<div class="fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-right" style="margin-bottom:20px;">
<input type="submit" value="Save Changes" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-right" style="margin-bottom:20px;">
<input type="submit" value="Save Changes" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
I've created a preview here: https://www.bootply.com/eItE7SJoQb
Maybe if you were to place the 'things on the same line' that you don't want it to affect..?
Related
I want to align all the fields vertically which is exactly one below another. Currently all the fields are aligned randomly I am using bootstrap css The layout should be something like this:
Label1: Textbox1
Label2: Textbox2
Here is the code snippet:
Which class can i use to fix the alignment of textbox? Any help?
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="currentmonth">Total Work days in Current Month:</label>
<input class="col-md-4" type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="annualeave">Annual Leave :</label>
<input class="col-md-4" type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
This answer is different from the above answer given by Rafa Romero.
I have added different style for these.
Here is the 2 ways you can use this .
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<br><h1 class="text-center">OR</h1><br>
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" >
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
You are using bootstrap class so do one thing use columns and give .col-sm-8 and .com-sm-4 respectively and check.
<div class="form-group">
<label for="annualeave" class="col-sm-8">Annual Leave :</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</div>
You can try with absolute position for the texfields and aligning both at the same distance from the right or left side
input{
position: absolute;
left: 275px
}
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="currentmonth">Total Work days in Current Month:</label>
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
<div class="row">
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
I am facing this issue again with the alignment which I am unable to rectify. I don't know what I am missing out. Please find the plunkr [https://plnkr.co/edit/UD0YZQhgOjIoJ1nqg7sb?p=preview] .Please maximise the plunkr output for the actual output I am getting. Any help people?
Html code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="headerCtrl">
<div class="container" style="padding-top:20px;">
<div ng-app="TimeSheet" data-ng-controller="headerCtrl" class="container" style="margin-top:60px">
<div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<p>{{ error }}</p>
</div>
<!--<p><a data-ng-click="showadd()" href="javascript:;" class="btn btn-primary">Generate Report</a></p>-->
<div class="panel panel-default">
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-horizontal">
<div class="form-group">
<label for="title" class="col-sm-5 control-label">UserID</label>
<div class="col-sm-4">
<select data-ng-model="user.userid" class="form-control" id="title" required>
<option value="" selected="selected">(Select User ID)</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
<option value="user3">user3</option>
<option value="user4">user4</option>
</select>
<!--<input type="text" data-ng-model="user.userid" class="form-control" id="title" placeholder="Enter your User ID" required title="Enter your UserID" />-->
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-5 control-label">Status</label>
<div class="col-sm-4">
Active
<input name="Status" type="radio" data-ng-model="user.ResultStatus" value="Active" required title="Choose status"> In-Active
<input name="Status" type="radio" data-ng-model="user.ResultStatus" value="InActive" required title="Choose status">
</div>
</div>
<div class="form-group">
<label for="startDate" class="col-sm-5 control-label">Date</label>
<div class="col-sm-4">
<input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required />
<!--<input type="text" data-ng-model="user.projectid" class="form-control" id="title" placeholder="Enter your Project ID" required title="Enter your ProjectID" />-->
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-4">
<span data-ng-hide="editMode">
<input type="submit" value="Generate" ng-disabled="adduserform.$invalid" data-ng-click="add()" class="btn btn-primary" />
</span>
<span data-ng-show="editMode">
<input type="submit" value="Update" ng-disabled="adduserform.$invalid" data-ng-click="update()" class="btn btn-primary" />
</span>
<input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
you can see the alignment issue here in this image below
To make the date input span the whole width, you need the .form-control class on it.
<input name="startDate" data-ng-model="user.date" id="startDate" class="form-control date-picker" required />
Also note that the <input> tag must have a type attribute with it.
You have a container within a container for your timesheet div. Removing the .container class from the timesheet div fixes the alignment issue.
Also, put the <table> in a row and a column:
<div class="row">
<div class="col-md-12">
<!-- Your table here -->
<table class="table table-hover">
...
</table>
</div>
</div>
See it working here.
I want to create an inline form using bootstrap with labels above input text fields but the result looks so messed up.
This is what i tried:
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkin">check in</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkout">check out</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
this is what i got:
result
how do i get the submit button to right position and the glyphicons heights the same as the input fields what am i doing wrong?
I made some edits to your html : https://jsfiddle.net/05t4s041/
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="col-md-2">
<label for="checkin">check in</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<label for="checkout">check out</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
you could put divs with bootstrap classes around your label and control like:
<div class="col-md-2">
<div class="row">
<div class="col-md-6">
<label for="from">from:</label>
</div>
<div class ="col-md-6">
<input type="text" class="form-control form-text" />
</div>
</div>
</div>
The row div may be sufficient: it put's elements in a row put I like to put extra bootstrap classes around my controls so I can modify them. For example that the label has a smaller width than the control itself.
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div class="center-block text-center">
<form asp-controller="Account" asp-action="Login" asp-route-returnurl="#ViewData["ReturnUrl"]" method="post" class="form-horizontal" role="form">
<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>
<div class="form-group">
<div class="col-md-10">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>
</form>
<p>
<a asp-controller="Home" asp-action="Register">Sign up</a>
</p>
<p>
<a asp-action="ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-controller="Home" asp-action="Index">Return</a>
</p>
</div>
</div>
<div class="col-md-4">
</div>
</div>
The text is centered, but the form has a width 10/12(83%). You should change the col-md-10 to col-md-12.
<div class="form-group">
<div class="col-md-12">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>
I think that it will be the best to remove the col-md-10 class:
<div class="form-group">
<div class="">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>
I acurrently have two input controls on the same line however they do not seem to align properly with the other controls above it and it looks rather off. I am not sure how to get them to align properly. Here is what the modal currently looks like: http://gyazo.com/4060e39e20391f1e9561e654dc64f9bb It's almost there but not quite there yet. Here is the HTML that I have writtem
<div id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<div class="col-md-5">
<label class="col-md-4 control-label" for="valueMin">Value Range:</label>
<div class="col-md-8">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false">
</div>
</div>
<div class="col-md-2">
<p>-</p>
</div>
<div class="col-md-5">
<div class="col-md-8">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
and here is my css that was auto generated when created my MVC project in visual studio
input,
select,
textarea {
max-width: 280px;
}
It is good practice to use rows when making columns.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
I have fixed your code in a pen.
http://codepen.io/costh/pen/XbzGxL
Looks like your columns are a bit confused...
Try this :
<div class="col-md-12" id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true" />
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<div class="col-md-4">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true" />
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<div class="col-md-4">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="valueMin">Value Range:</label>
<div class="col-md-10">
<div class="col-md-4">
<div class="col-md-5" style="padding-left:0px;">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false" />
</div>
<div class="col-md-2">
<p style="text-align:center;">-</p>
</div>
<div class="col-md-5" style="padding-right:0px;">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false" />
</div>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
</div>
Please excuse the in-line styles!
Try this:
<div class="col-md-5">
<div class="input-daterange input-group" id="valuerang">
<span class="input-group-addon">Value Range:</span>
<input class="input-sm form-control" name="start" type="text" id="abc" required> <span class="input-group-addon"> - </span>
<input class="input-sm form-control" name="end" type="text" id="abc" required>
</div>
</div>
make sure you modify the tag names to suit your application.