This is my first post on stackoverflow, so forgive me if I make mistakes.
Would like to reverse these 2 columns in bootstrap and it doesn't work. Tried with order-2 but no luck.
<div class="flexbox">
<div class="container list">
<div class="row">
<h1>Customers</h1>
</div>
<div class="row">
<div class="col-sm-3 order-2">
<div class="list-group" id="supplier-list">
</div>
</div>
<div class="col-sm-6 order-">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">Name</div>
</div>
<input type="text" id="supplier-name" class="form-control" aria-label="Input group example">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">CUI</div>
</div>
<input type="text" id="supplier-cui" class="form-control" aria-label="Input group example">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">ID</div>
</div>
<input type="text" id="supplier-id" class="form-control" aria-label="Input group example">
</div>
<br>
<button type="button" id="suppliers-update" class="btn btn-success">Update</button>
<button type="button" id="suppliers-delete" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
Related
<div formArrayName="partners" style="margin-top:15px;" *ngIf="partner">
<div *ngFor="let partner of partners().controls; let i = index" [formGroupName]="i">
<div class="partner-background">
<div class="row">
<div class="col col-12">
<h6 style="padding:5px;">Manage Partner <button id="remove" class="btn" style="float:right;" *ngIf="partners().length > 1 && i>0" (click)="removePartner(i)"><i class="fas fa-minus-circle"></i></button></h6>
</div>
<div class="col col-6">
<div class="input-group mb-3 mt-1">
<div class="input-group-prepend">
<span class="input-group-text">Full Name</span>
</div>
<input type="text" class="form-control" formControlName="p_first_name">
</div>
</div>
<div class="col col-6">
<div *ngFor="let type of types().controls; let j = index" [formGroupName]="j">
<div class="row" style="margin-top:5px;">
<div class="col col-3">
<label for="type" style="font-size:18px;">Type</label>
</div>
<div class="col col-4">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="partner" formControlName="p_type" style="width:16px;height:16px;" value="urban">
<label class="form-check-label">Urban</label>
</div>
</div>
<div class="col col-4">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="partner" formControlName="p_type" style="width:16px;height:16px;" value="rural">
<label class="form-check-label">Rural</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">DOB</span>
</div>
<input type="text" class="form-control" formControlName="p_dob">
</div>
</div>
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Sex</span>
</div>
<!-- <input type="text" class="form-control" formControlName="p_sex"> -->
<select class="form-control" formControlName="p_sex">
<option value="" selected>Select sex</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Email</span>
</div>
<input type="text" class="form-control" formControlName="p_email">
</div>
</div>
<div class="col col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Phone No</span>
</div>
<input type="text" class="form-control" formControlName="p_phone">
</div>
</div>
</div>
</div>
</div>
In most cases, you need to add multiple form controls inside one form group or multiple form controls inside the form array.
For checkbox, you need to add multiple form controls inside one formArray like this.
const arr = [this.fb.control(false), this.fb.control(false)];
fbArray = this.fb.array(arr);
const form = this.fb.group({
checkbox: fbArray,
});
I am trying to create a form of sorts with overlapping content. I created all the elements of the form, the idea is to position them absolute and visible:hidden and then use JS to toggle the visibility when buttons are clicked.
My issue is the when I apply position:absolute on any div, its will mess up the layout of the children in that div
Any fix?
<div class="row justify-content-center">
<form id="form-bizOwner">
<div class="container" id="B-firstQ">
<div class="row justify-content-center mb-3">
<div class="col-12">
<div class="row">
<div class="col-2 B-red-circle-div px-0">
<div class="B-red-circle">01</div>
</div>
<div class="col-8 B-input-field form-group">
<label for="B-firstQ">Age</label>
<input type="number" class="form-control" id="B-firstQ" min="18" placeholder="Enter your age">
</div>
</div>
</div>
<div class="col-4 mt-4">
<button type="button" class="btn btn-danger px-5 py-2" id="B-firstNext">NEXT</button>
</div>
</div>
</div>
<div class="container" id="B-secondQ">
<div class="row justify-content-center mb-3">
<div class="col-12">
<div class="row">
<div class="col-2 B-red-circle-div px-0">
<div class="B-red-circle">02</div>
</div>
<div class="col-10 B-input-field form-group">
<label>Are you a business owner in Nigeria?</label>
<div class="row">
<div class="col-12">
<div class="form-check form-check-inline">
<input class="form-check-input d-none" type="radio" name="B-secondQOptions" id="secondQYes" value="option1">
<label class="form-check-label btn btn-outline-info px-4" for="secondQYes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input d-none" type="radio" name="B-secondQOptions" id="secondQNo" value="option2">
<label class="form-check-label btn btn-outline-info px-4" for="secondQNo">No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mt-4">
<button type="button" class="btn btn-danger px-5 py-2" id="B-secondNext">NEXT</button>
</div>
</div>
</div>
</form>
</div>
I'm using visual studio 2019 and bootstrap4 (which I'm new to) to develop a web page for account registration. The render does not seem right. I remove ASP tags from the code below. I use a combination of codes from www.w3schools.com/bootstrap4. Below is the code I tried.
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Country</span>
</div>
<select class="form-control"><option>1</option></select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Business Name</span>
</div>
<input type="text" class="form-control" placeholder="Business Name">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Street</span>
</div>
<input type="text" class="form-control" placeholder="Street, including Building number and Suite">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
City</span>
</div>
<input type="text" class="form-control" placeholder="City">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
State</span>
</div>
<select class="form-control"><option>1</option></select>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Zip code</span>
</div>
<input type="text" class="form-control" placeholder="Zip code"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Telephone</span>
</div>
<input type="text" class="form-control" placeholder="Telephone">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Email Address</span>
</div>
<input type="text" class="form-control" placeholder="Email address">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Website</span>
</div>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</div>
</div>
The input fields do not properly align. Can anyone help why the render does not properly align?
After reading the question and the comments it seems you are having trouble with form-control as it is not going up to its full width. That is because you have a custom css file in Content folder of your project structure that overrides the behavior of few tags. See:
Here you can see input,select,textarea tags have been overridden and you can just remove it or comment it out to make it go full width:
UPDATE:
I also noticed that your html for input controls is also incorrect and not well formatted. Here is the correct version of it:
<style>
.input-group {
width: 100% !important;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Country</span>
</div>
<select class="form-control">
<option>1</option>
</select>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Business Name</span>
</div>
<input type="text" class="form-control" placeholder="Business Name">
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Street</span>
</div>
<input type="text" class="form-control" placeholder="Street, including Building number and Suite">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">City</span>
</div>
<input type="text" class="form-control" placeholder="City">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">State</span>
</div>
<select class="form-control">
<option>1</option>
</select>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Zip code</span>
</div>
<input type="text" class="form-control" placeholder="Zip code">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Telephone</span>
</div>
<input type="text" class="form-control" placeholder="Telephone">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Email Address</span>
</div>
<input type="text" class="form-control" placeholder="Email address">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-4">
<div class="form-inline">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Website</span>
</div>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</div>
</div>
</div>
See the output here.
Specifically, the problems are:
The first row wraps to a second line
The input fields do not line up vertically
It might be possible to use a table, but that might break responsiveness on mobile devices. Is there a clean/elegant way to align these input fields?
https://codepen.io/dtgq/pen/rwQRoK
For posterity, a copy of the HTML on the codepen:
<div class="modal fade" id="fjFilterModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Filter</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-form-label col-md-2">Cost</label>
<div class=col-md-10>
<div class="form-inline">
<div class="form-group mx-2">
<div class=input-group>
<span class=input-group-addon>$</span>
<input class=form-control name="max_cost-gte" type=number placeholder="Minimum" step=1 min=0>
<span class=input-group-addon>.00</span>
</div>
</div>
to
<div class="form-group mx-2">
<div class=input-group>
<span class=input-group-addon>$</span>
<input class=form-control name="min_cost-lte" type=number placeholder="Maximum" step=1 min=0>
<span class=input-group-addon>.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-2">Start date</label>
<div class=col-md-10>
<div class="form-inline">
<div class="form-group mx-2">
<input class="form-control" type="date" name="min_date-gte">
</div>
to
<div class="form-group mx-2">
<input class="form-control" type="date" name="min_date-lte">
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-2">Available units</label>
<div class=col-md-10>
<div class="form-inline">
<div class="form-group mx-2">
<div class=input-group>
<input class=form-control name="sum_vacant-gte" type=number min=0 placeholder="Minimum">
<span class=input-group-addon>units</span>
</div>
</div>
to
<div class="form-group mx-2">
<div class=input-group>
<input class=form-control name="sum_vacant-lte" type=number min=0 placeholder="Maximum">
<span class=input-group-addon>units</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn" data-toggle="modal" data-target="#fjFilterModal">
Filter
</button>
This is my code :
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body" >
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div> <!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
The only thing that I changed is <div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
And here is before/after :
Before I inserted col-md-6 col-md-offset-3, the blue-shaded box looks balanced.
After I inserted col-md-6 col-md-offset-3, it looks unbalanced.
Why does it happen? I think that grid should work well(login box should be located at center" because it means `3(offset) - 6 - 3(offset)'.
Need your help.
Its because your loginbox does not have 12 columns in total as you specified 6+3(offset) =9
I would suggest this way as I dont like using offset
<div class="col-md-3 "></div>
<div id="loginbox" class="mainbox col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body" >
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div> <!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
<div class="col-md-3 "></div>
Here's my take: giving it a fluid container and a couple extra rows to center things up:
<div class="container-fluid">
<div class="row">
<div class="brown-row col-md-8 col-md-offset-2">
<div class="row">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body">
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
<!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
</div>
</div>
</div>
</div>
and css:
body {
background: #634a16;
}
.brown-row {
background: #9e7623;
}
#loginbox {
margin-top: 50px
}