Tom
Reputation: 8681
Columns not getting aligning correctly on the screen using bootsrap 4
I am implementing a UI for angular 7 application using bootstrap. The UI form contains four elements per row. You have label and input control on the left and similar on the right. So I tried setting col-md-2 for both the labels and col-md-3 for both the forms. When I do that there is space on the right and presume thats because the total amounts to 10 columns. If I increase the input of both the left and right side by 1 that is col-md-4 , the rightmost control touches the border. I need the left and right to be equal with little margin on the left and right side of the border.
I have managed to create a stackblitz to replicate the issue. Have also solved the right spacing issue. You can see the style is commented on stackblitz. How do i create spacing between the control as at the moment it is too cluttered. Also I want to make it looked stacked on small screen. Please see the updated screenshot below for reference. Its labeled Updated output
stackblitz.com/edit/angular-uypvsy
Here are the screenshots
with col-md-3
With cold-md-4 just applied to the first row
Html code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
<input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<div *ngIf="FundDetails" class="card-body" style="width:100%">
<div class="form-group row">
<label for="inputName" class="col-md-2 col-sm-11 col-form-label modal-label header">Name</label>
<div class="col-md-4 col-sm-11 ">
<div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
</div>
<label for="inputOffice" class="col-md-2 col-sm-11 col-form-label header">Investment Status</label>
<div class="col-md-4 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputTitle" class="col-md-2 col-sm-11 col-form-label header">Make Anonymous</label>
<div class="col-md-3 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
style="width: 13px; height: 13px;" /> {{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
</div>
<label for="inputEmail" class="col-md-2 col-sm-11 col-form-label header">Flagship</label>
<div class="col-md-3 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
Updated html based on suggestion
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
<input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<div *ngIf="FundDetails" class="card-body" style="width:100%">
<div class="form-row">
<label for="inputName" class="col-md-2 col-form-label modal-label header">Name</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
</div>
<label for="inputOffice" class="col-md-2 col-form-label header">Investment Status</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<label for="inputTitle" class="col-md-2 col-form-label header">Make Anonymous</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
style="width: 13px; height: 13px;" /> {{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Flagship</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<!-- <label for="inputFax" class="col-md-2 col-form-label header">Inception Date</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{formatInceptionDate}}</div>
<kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd MMM, yyyy'" [(ngModel)]="getInceptionDate">
</kendo-datepicker>
</div> -->
<label for="inputFax" class="col-md-2 col-form-label header">Inception Date</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails.InceptionDate}}</div>
<kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd-MMM-yyyy'" [value]="getInceptionDate" [(ngModel)]="FundDetails.InceptionDate" (valueChange)="inceptionDateChanged($event)">
</kendo-datepicker>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Account Mandate</label>
<div class="col-md-4 ">
<div *ngIf="!EditMode">{{FundDetails?.AccountMandateName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.AccountMandateId" [data]="FundDetails.AccountMandates" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<label for="inputEmail" class="col-md-2 col-form-label header">Vehicle Type</label>
<div class="col-md-4 ">
<div *ngIf="!EditMode">{{FundDetails?.VehicleTypeName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.VehicleTypeId" [data]="FundDetails.VehicleTypes" [filterable]="false" textField="NAME" [valuePrimitive]="true" (valueChange)="vehicleTypeChanged($event)">
valueField="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Bloomberg Ticker</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.BloombergTicker}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.BloombergTicker" />
</div>
</div>
<div class="form-row">
<label for="inputEmail" class="col-md-2 col-form-label header">Primary Class</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.PrimaryClassDescripton}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.PrimaryClassId" [data]="FundDetails.PrimaryClasses" [filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<div class="col-md-8" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
<div class="desc-header">Details</div>
<div class="divEditor">
<ckeditor [editor]="Editor" [id]="'ckDetails'" *ngIf="EditMode" style="font-size: 11px;" debounce="500" [config]="EditorConfig" [(ngModel)]="FundDetails.AccountMandateCustomisation">
</ckeditor>
<div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FundDetails.AccountMandateCustomisation">
</div>
</div>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<!-- <span> <button class="btn btn-default btn mr-3">
<i class="fa fa-file-pdf-o"></i>
View Fund Snapshot
</button>
</span> -->
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="updateFund()">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelFund">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteFund()">Delete</button>
</span>
</div>
</div>
</div>
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
<input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<div *ngIf="FundDetails" class="card-body" style="width:100%">
<div class="form-group row">
<label for="inputName" class="col-md-2 col-sm-11 col-form-label modal-label header">Name</label>
<div class="col-md-4 col-sm-11 ">
<div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
</div>
<label for="inputOffice" class="col-md-2 col-sm-11 col-form-label header">Investment Status</label>
<div class="col-md-4 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputTitle" class="col-md-2 col-sm-11 col-form-label header">Make Anonymous</label>
<div class="col-md-3 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
style="width: 13px; height: 13px;" /> {{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
</div>
<label for="inputEmail" class="col-md-2 col-sm-11 col-form-label header">Flagship</label>
<div class="col-md-3 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
Updated html based on suggestion
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
<input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<div *ngIf="FundDetails" class="card-body" style="width:100%">
<div class="form-row">
<label for="inputName" class="col-md-2 col-form-label modal-label header">Name</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
</div>
<label for="inputOffice" class="col-md-2 col-form-label header">Investment Status</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<label for="inputTitle" class="col-md-2 col-form-label header">Make Anonymous</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
style="width: 13px; height: 13px;" /> {{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Flagship</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<!-- <label for="inputFax" class="col-md-2 col-form-label header">Inception Date</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{formatInceptionDate}}</div>
<kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd MMM, yyyy'" [(ngModel)]="getInceptionDate">
</kendo-datepicker>
</div> -->
<label for="inputFax" class="col-md-2 col-form-label header">Inception Date</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails.InceptionDate}}</div>
<kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd-MMM-yyyy'" [value]="getInceptionDate" [(ngModel)]="FundDetails.InceptionDate" (valueChange)="inceptionDateChanged($event)">
</kendo-datepicker>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Account Mandate</label>
<div class="col-md-4 ">
<div *ngIf="!EditMode">{{FundDetails?.AccountMandateName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.AccountMandateId" [data]="FundDetails.AccountMandates" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<label for="inputEmail" class="col-md-2 col-form-label header">Vehicle Type</label>
<div class="col-md-4 ">
<div *ngIf="!EditMode">{{FundDetails?.VehicleTypeName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.VehicleTypeId" [data]="FundDetails.VehicleTypes" [filterable]="false" textField="NAME" [valuePrimitive]="true" (valueChange)="vehicleTypeChanged($event)">
valueField="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Bloomberg Ticker</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.BloombergTicker}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.BloombergTicker" />
</div>
</div>
<div class="form-row">
<label for="inputEmail" class="col-md-2 col-form-label header">Primary Class</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.PrimaryClassDescripton}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.PrimaryClassId" [data]="FundDetails.PrimaryClasses" [filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<div class="col-md-8" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
<div class="desc-header">Details</div>
<div class="divEditor">
<ckeditor [editor]="Editor" [id]="'ckDetails'" *ngIf="EditMode" style="font-size: 11px;" debounce="500" [config]="EditorConfig" [(ngModel)]="FundDetails.AccountMandateCustomisation">
</ckeditor>
<div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FundDetails.AccountMandateCustomisation">
</div>
</div>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<!-- <span> <button class="btn btn-default btn mr-3">
<i class="fa fa-file-pdf-o"></i>
View Fund Snapshot
</button>
</span> -->
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="updateFund()">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelFund">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteFund()">Delete</button>
</span>
</div>
</div>
</div>Updated output based on suggestion on big screen
Updated output based on suggestion on small screen
Upvotes: 1
Views: 227
Answers (3)
zesak
Reputation: 76
Just deleting or commenting on the header class improves considerably in mobile view:
On the other hand, there are div like <div *ngIf ="IsVehicleDependent"> that behave like a column even if they do not have the class col-sm -.... I am learning ReactJS and for these cases there is <React.Fragment>. I looked for something similar for Angular and I found <ng-container>. I applied it and improved the desktop view.
Upvotes: 1
BugsArePeopleToo
Reputation: 2996
You need to add a responsive CSS rule to .header elements. I see they are set to width: 8%; currently which looks fine when the layout is wide but goes squirrelly at narrow width. Change width to 100% and it actually looks fine. Something like this:
@media (max-width: 'YOUR_BREAKPOINT_WIDTH_HERE') {
.header {
width: 100%;
}
}
Upvotes: 0
zesak
Reputation: 76
Without doing the test with the angle itself, and looking at the code, I would change "form-group row" to "form-row". It would also eliminate "col-sm-11". And additionally, close at least 3 div (). The structure should be more like this:
<div class="card">
<div class="card-header panel-heading">
Fund Details
</div>
<div class="card-body">
<div *ngIf="FundDetails">
<div class="form-row">
<label class="col-md-2 col-form-label">Label 1</label>
<div class="col-md-4">
<input type="text" class="form-control" value="Input 1">
</div>
<label class="col-md-2 col-form-label">Label 2</label>
<div class="col-md-4">
<input type="text" class="form-control" value="Input 2">
</div>
</div>
<div class="form-row">
<label class="col-md-2 col-form-label">Label 3</label>
<div class="col-md-4">
<input type="text" class="form-control" value="Input 3">
</div>
<label class="col-md-2 col-form-label">Label 4</label>
<div class="col-md-4">
<input type="text" class="form-control" value="Input 4">
</div>
</div>
</div>
</div>
</div>
On the other hand, will two DIV with "card-body" class be necessary?
Upvotes: 0
Related Questions
- bootstrap - aligning columns within a div
- bootstrap columns not on aligned within row
- Bootstrap columns not aligning besides each other despite of being in the same row
- How can I align and resize bootstrap columns?
- Bootstrap columns not aligning correctly
- Columns won't horizontally align with Bootstrap
- Bootstrap 4 columns not aligning as expected
- aligning columns in bootstrap 4
- Bootstrap columns not aligning in the same row
- Bootstrap columns does not align correctly