This is the issue
I need to prevent over-write rows using bootstrap 3. This is my code
<div class="col-md-6">
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Location</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Salary</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.salaryDetails}}</label>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Recruiter</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
<div class="row form-group">
<div class="container col-md-4">
<label class="control-label">Type</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
</div>
I need set auto height in every rows by bootstrap 3.
You are overwriting the .row class with properties from the form-group class.
Change all of your input rows.
from
<div class="row form-group">
<div class="col-md-4">
<label class="control-label">Location</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
to
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label class="control-label">Location</label>
</div>
<div class="col-md-8">
<label class="control-label">{{draftJobPost.location}}</label>
</div>
</div>
</div>
You can use the Bootstrap-Clearfix attribute.
https://v4-alpha.getbootstrap.com/utilities/clearfix/
Related
I am trying to make a Sign-UP form in html and CSS with notepad++ but whenever I try to run it on chrome, it loads very slowly. Is it a configuration error or something? What am I doing wrong? Is there a plugin needed? This is my entire code:
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add the bootstrap and jQuery plugins.
In HTML page link the external files properly.
In head section add the external links.
Maintain the folder structure neat so that linking extrnal files is easy.
If everything is correct go to this link to set up Chrome: https://www.webnots.com/fix-slow-page-loading-issue-in-google-chrome/
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In this above image, there are 3 column having 3 input fields each, in the second column one div is remove which is showing as blank space, I want that div from next column should be shifted to 2nd column and If there will be another row then div from the column of that row also be shifted, So on..
Above image is of component.html
If there is any programmatic way to do this in component.ts file.
No need to add multiple <div class="row"> make it simple. Thanks
<div class="row">
<div class="col-sm-4" *ngIf="isCompanyname">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isRatingstatus">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isIndustry">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isClientclassificationbd">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isSector">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isSubindustry">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isCompanycode">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isIndustrygroup">
<div class="form-group"></div>
</div>
<div class="col-sm-4" *ngIf="isSilmapping">
<div class="form-group"></div>
</div>
</div>
Change Your HTML
<div class="container">
<div class="row">
<div class="col-sm-4" *ngIf="isCompanyname">
<div class="form-group">
<input class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<input class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<input class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" *ngIf="isCompanyname">
<div class="form-group">
<input class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<input class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<input class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" *ngIf="isCompanyname">
<div class="form-group">
<input class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<input class="form-control" />
</div>
</div>
</div>
</div>
https://jsfiddle.net/7u96mhp3/1/
I have small issue with bootstrap grid system , I have a row that has grid setup with two sections with col-md-6 , Now problem is when i zoom my browser more than 100% my Close label and input is moving to next line. I want them to stay same place all the time zoom should not effect the position of the rows.I tried to use col-xs-1 but it does not work. How can i achieve that task using bootstrap ?
main.html
<div class="row">
<div class="container col-md-6">
<div class="form-group">
<label class="col-md-5">Actual Cycle Start:</label>
<div class="col-md-7">
<div class="row">
<div class="col-xs-5">
<input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
k-format="'MM/dd/yyyy'" disabled />
</div>
<div class="col-xs-1">
<label class="control-label"> Close:</label>
</div>
<div class="col-md-5 changeWdh">
<input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
</div>
</div>
</div>
<div class="form-group col-md-6 fieldHeight">
<label for="challengeOutstand" class="col-md-5">Challenges
Outstanding:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="challengeOutstand"
name="challengeOutstand" maxlength="256"
ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
</div>
</div>
</div>
main.css
.changeWdh{
width: 152px;
}
EDIT: try this:
<div class="container">
<div class="row">
<div class="col-6-md">
<div class="col-md-7">
<div class="row">
<div class="col-xs-1">
<label class="col-md-5">Actual Cycle Start:</label>
</div>
<div class="col-xs-5">
<input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
<div class="row">
<div class="col-xs-1">
<label class="control-label"> Close:</label>
</div>
<div class="col-xs-5 changeWdh">
<input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 fieldHeight">
<label for="challengeOutstand" class="col-xs-5">Challenges
Outstanding:</label>
<div class="col-xs-7">
<input type="text" class="form-control" id="challengeOutstand"
name="challengeOutstand" maxlength="256"
ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
</div>
</div>
</div>
place your col-5 and col-1 into row div's or make them both into xs, not one md and one xs, and place them into a div container class "col-md-6"
I have the following fiddle which is a cut down sample of a page I am working on utilising bootstrap for the styling.
NOTE: When viewing the fiddle, make sure the Result pane is wide enough to have the first 3 controls on a single row!
The issue that I have is that the 'Free Text Search' row of controls seem to be offset to the right more than I would like. I want the 'Free Text Search' label to be directly under the 'Store Number' label and the same width. Along with that I wand the corresponding input to start at the beginning of the 'Store Number' input and finish at the end of the 'Parent Category' select.
I can't quite see where I have gone wrong with the bootstrap classes.
Here is my html:
<form class="form-horizontal">
<h3 style="padding-left: 20px; padding-bottom: 20px">A pointless title</h3>
<div class="row form-group">
<div class="col-md-4">
<label for="storeNumber" class="col-sm-4 control-label">Store Number</label>
<div class="col-sm-6">
<input id="storeNumber" class="form-control" type="text"
name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="col-md-4">
<label for="actionedTo" class="col-sm-4 control-label">Actioned To</label>
<div class="col-sm-6">
<select id="actionedTo" class="form-control"></select>
</div>
</div>
<div class="col-md-4">
<label for="parentCategory"
class="col-sm-4 control-label">Parent Category</label>
<div class="col-sm-6">
<select id="parentCategory" class="form-control"></select>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="freeTextSearch"
class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text"
name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</form>
Your general structure is counter to your classes. You're structuring for your inputs to position inline but you're using form-horizontal and you're nesting columns.
You don't need any of that markup for this. Just use the form-group class and columns.
See working Snippet.
*The CSS I've added isn't needed to make everything work but I believe it looks better on larger viewports with it.
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</form>
</div>
Alternative Layout for Multiple Controls
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</div>
</form>
</div>
I don't think I quite understand how bootstrap works with the grid. I want the name and actual field to match up unless the screen size is xs so every field is its own row. For each row, I want the text boxes always aligned.
Here's what I've tried.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="width:80vw">
<form role="form">
<div class="row top-buffer">
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="inputLabel3" placeholder="date">
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputname" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 ">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">Initials:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputInitials" placeholder="Initials">
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
<div class="col-sm-10 ">
<input type="text" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-5">
<div class="form-group">
<label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Actual" class="col-sm-2 control-label">Actual:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
<div class="col-sm-10 ">
<textarea id="descript" class="col-sm-10 "></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div
Bonus points for someone who can also help me make the description field larger - enough height for at least 20 new lines.
this includes the extra 20 spaces in despcription
Add this to your .css
.col-sm-4 {
display: inline-block;
vertical-align: middle;
float: none;
}
<div class="container" style="width:80vw">
<form role="form">
<div class="row top-buffer">
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="inputLabel3" placeholder="date">
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputname" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 ">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">Initials:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputInitials" placeholder="Initials">
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
<div class="col-sm-10 ">
<input type="text" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-5">
<div class="form-group">
<label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Actual" class="col-sm-2 control-label">Actual:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
<div class="col-sm-10 ">
<textarea id="descript" class="col-sm-10" rows="20"></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div