Bootstrap : Form controls not responsive Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) The Ask Question Wizard is Live! Data science time! April 2019 and salary with experience Should we burninate the [wrap] tag?How do you disable browser Autocomplete on web form field / input tag?What does enctype='multipart/form-data' mean?How to make Twitter Bootstrap menu dropdown on hover rather than clickCenter a column using Twitter Bootstrap 3Change navbar color in Twitter BootstrapWhat is sr-only in Bootstrap 3?vertical-align with Bootstrap 3Btn-group not stretching width of tableCannot display HTML stringHow to Set Responsive Height of DIV in Bootstrap 3 My code attached?
What is this single-engine low-wing propeller plane?
When is phishing education going too far?
Does surprise arrest existing movement?
What's the purpose of writing one's academic bio in 3rd person?
Is above average number of years spent on PhD considered a red flag in future academia or industry positions?
How widely used is the term Treppenwitz? Is it something that most Germans know?
Java 8 stream max() function argument type Comparator vs Comparable
Should I discuss the type of campaign with my players?
Is 1 ppb equal to 1 μg/kg?
Did Kevin spill real chili?
Why is "Captain Marvel" translated as male in Portugal?
Examples of mediopassive verb constructions
What are 'alternative tunings' of a guitar and why would you use them? Doesn't it make it more difficult to play?
What is the longest distance a 13th-level monk can jump while attacking on the same turn?
Is a manifold-with-boundary with given interior and non-empty boundary essentially unique?
Should gear shift center itself while in neutral?
What makes black pepper strong or mild?
What are the motives behind Cersei's orders given to Bronn?
What would be the ideal power source for a cybernetic eye?
How to bypass password on Windows XP account?
When to stop saving and start investing?
3 doors, three guards, one stone
Do you forfeit tax refunds/credits if you aren't required to and don't file by April 15?
How discoverable are IPv6 addresses and AAAA names by potential attackers?
Bootstrap : Form controls not responsive
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
The Ask Question Wizard is Live!
Data science time! April 2019 and salary with experience
Should we burninate the [wrap] tag?How do you disable browser Autocomplete on web form field / input tag?What does enctype='multipart/form-data' mean?How to make Twitter Bootstrap menu dropdown on hover rather than clickCenter a column using Twitter Bootstrap 3Change navbar color in Twitter BootstrapWhat is sr-only in Bootstrap 3?vertical-align with Bootstrap 3Btn-group not stretching width of tableCannot display HTML stringHow to Set Responsive Height of DIV in Bootstrap 3 My code attached?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I have created an html UI for my angular application and unfortunately it is not responsive. When I minimize the screen, the controls fall outside of the window. Could somebody tell me what am i doing wrong
Screenshot - modal window when opened in normal window size
Screenshot - modal window when opened with minimized window size
Code
<style>
.desc-header
background-color: #FAE7D6;
color: black
.header
width: 8%;
.panel-heading
color: white;
background-color: #F59850;
border-color: #ddd;
.scrollClass
height: 800px;
overflow-y: scroll;
overflow-x: hidden;
</style>
<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-form-label modal-label header">Name</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">FundDetails.Entity.NAME</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
[(ngModel)]="FundDetails.Entity.NAME" />
</div>
<label for="inputOffice" class="col-md-2 col-sm-12 col-form-label header">Investment Status</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">FundDetails.InvestmentStatus.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.INVESTMENT_STATUS_ID"
[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-form-label header">Make Anonymous</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.Entity.IS_ANONYMOUS ? "Yes" : "No"</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.Entity.IS_ANONYMOUS"
value="FundDetails.Entity.IS_ANONYMOUS" [(ngModel)]="FundDetails.Entity.IS_ANONYMOUS"
style="width: 13px; height: 13px;" /> FundDetails.Entity.IS_ANONYMOUS ? "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.FlagShipFund?.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.FLAGSHIP_FUND_ID" [data]="FundDetails.FlagshipFunds"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group 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="inputEmail" class="col-md-2 col-form-label header">Account Mandate</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.AccountMandate?.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.ACCOUNT_MANDATE_ID" [data]="FundDetails.AccountMandates"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label header">Vehicle Type</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.VehicleType.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.VEHICLE_TYPE_ID" [data]="FundDetails.VehicleTypes"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Bloomberg Ticker</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.Entity.BLOOMBERG_TICKER</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
[(ngModel)]="FundDetails.Entity.BLOOMBERG_TICKER" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label header">Primary Class</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.PrimaryClasses.DESCRIPTION</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.PRIMARY_CLASS_ID" [data]="FundDetails.Classes"
[filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<!-- Flagship needs to be disable based on user role -->
<div class="form-group row">
</div>
<div class="form-group 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.Entity.ACCOUNT_MANDATE_CUSTOMISATION">
</ckeditor>
<div style="padding: 10px" *ngIf="!EditMode"
[innerHTML]="FundDetails.Entity.ACCOUNT_MANDATE_CUSTOMISATION">
</div>
</div>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="saveManager()">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelManager">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteManager()">Delete</button>
</span>
</div>
</div>
</div>
html css bootstrap-4
asked Mar 8 at 16:17
TomTom
75873279
add a comment |
1
I have created an html UI for my angular application and unfortunately it is not responsive. When I minimize the screen, the controls fall outside of the window. Could somebody tell me what am i doing wrong
Screenshot - modal window when opened in normal window size
Screenshot - modal window when opened with minimized window size
Code
<style>
.desc-header
background-color: #FAE7D6;
color: black
.header
width: 8%;
.panel-heading
color: white;
background-color: #F59850;
border-color: #ddd;
.scrollClass
height: 800px;
overflow-y: scroll;
overflow-x: hidden;
</style>
<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-form-label modal-label header">Name</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">FundDetails.Entity.NAME</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
[(ngModel)]="FundDetails.Entity.NAME" />
</div>
<label for="inputOffice" class="col-md-2 col-sm-12 col-form-label header">Investment Status</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">FundDetails.InvestmentStatus.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.INVESTMENT_STATUS_ID"
[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-form-label header">Make Anonymous</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.Entity.IS_ANONYMOUS ? "Yes" : "No"</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.Entity.IS_ANONYMOUS"
value="FundDetails.Entity.IS_ANONYMOUS" [(ngModel)]="FundDetails.Entity.IS_ANONYMOUS"
style="width: 13px; height: 13px;" /> FundDetails.Entity.IS_ANONYMOUS ? "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.FlagShipFund?.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.FLAGSHIP_FUND_ID" [data]="FundDetails.FlagshipFunds"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group 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="inputEmail" class="col-md-2 col-form-label header">Account Mandate</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.AccountMandate?.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.ACCOUNT_MANDATE_ID" [data]="FundDetails.AccountMandates"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label header">Vehicle Type</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.VehicleType.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.VEHICLE_TYPE_ID" [data]="FundDetails.VehicleTypes"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Bloomberg Ticker</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.Entity.BLOOMBERG_TICKER</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
[(ngModel)]="FundDetails.Entity.BLOOMBERG_TICKER" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label header">Primary Class</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.PrimaryClasses.DESCRIPTION</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.PRIMARY_CLASS_ID" [data]="FundDetails.Classes"
[filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<!-- Flagship needs to be disable based on user role -->
<div class="form-group row">
</div>
<div class="form-group 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.Entity.ACCOUNT_MANDATE_CUSTOMISATION">
</ckeditor>
<div style="padding: 10px" *ngIf="!EditMode"
[innerHTML]="FundDetails.Entity.ACCOUNT_MANDATE_CUSTOMISATION">
</div>
</div>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="saveManager()">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelManager">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteManager()">Delete</button>
</span>
</div>
</div>
</div>
html css bootstrap-4
asked Mar 8 at 16:17
TomTom
75873279
1
Why are you using tables for layout rather than the Bootstrap grid system?
– Turnip
Mar 8 at 16:24
I would highly reccomend you don't use tables for layout, Bootstrap has a very good grid system you can use for layout. Looking at your HTML however its likley the fixed width you have is causing the issue - try changing it to a % or auto i.e.<kendo-dropdownlist style="width:100%" [(ngModel)]="ManagerStrategyDetails.InvestmentStatus" [data]="ManagerStrategyDetails.InvestmentStatuses" [filterable]="false" textField="Name" valueField="Id"></kendo-dropdownlist>
– MikeS
Mar 8 at 16:28
removing fixed width works but thinking of using the grid system as you suggested. Could you show me an example of atleast one row using the grid styles please. You know how my UI looks
– Tom
Mar 8 at 17:04
Sorry I wasnt using table as I just updated the post. I had initially posted the wrong html
– Tom
Mar 8 at 17:15
add a comment |
1
1
1
I have created an html UI for my angular application and unfortunately it is not responsive. When I minimize the screen, the controls fall outside of the window. Could somebody tell me what am i doing wrong
Screenshot - modal window when opened in normal window size
Screenshot - modal window when opened with minimized window size
Code
<style>
.desc-header
background-color: #FAE7D6;
color: black
.header
width: 8%;
.panel-heading
color: white;
background-color: #F59850;
border-color: #ddd;
.scrollClass
height: 800px;
overflow-y: scroll;
overflow-x: hidden;
</style>
<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-form-label modal-label header">Name</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">FundDetails.Entity.NAME</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
[(ngModel)]="FundDetails.Entity.NAME" />
</div>
<label for="inputOffice" class="col-md-2 col-sm-12 col-form-label header">Investment Status</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">FundDetails.InvestmentStatus.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.INVESTMENT_STATUS_ID"
[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-form-label header">Make Anonymous</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.Entity.IS_ANONYMOUS ? "Yes" : "No"</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.Entity.IS_ANONYMOUS"
value="FundDetails.Entity.IS_ANONYMOUS" [(ngModel)]="FundDetails.Entity.IS_ANONYMOUS"
style="width: 13px; height: 13px;" /> FundDetails.Entity.IS_ANONYMOUS ? "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.FlagShipFund?.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.FLAGSHIP_FUND_ID" [data]="FundDetails.FlagshipFunds"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group 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="inputEmail" class="col-md-2 col-form-label header">Account Mandate</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.AccountMandate?.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.ACCOUNT_MANDATE_ID" [data]="FundDetails.AccountMandates"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label header">Vehicle Type</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.VehicleType.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.VEHICLE_TYPE_ID" [data]="FundDetails.VehicleTypes"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Bloomberg Ticker</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.Entity.BLOOMBERG_TICKER</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
[(ngModel)]="FundDetails.Entity.BLOOMBERG_TICKER" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label header">Primary Class</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.PrimaryClasses.DESCRIPTION</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.PRIMARY_CLASS_ID" [data]="FundDetails.Classes"
[filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<!-- Flagship needs to be disable based on user role -->
<div class="form-group row">
</div>
<div class="form-group 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.Entity.ACCOUNT_MANDATE_CUSTOMISATION">
</ckeditor>
<div style="padding: 10px" *ngIf="!EditMode"
[innerHTML]="FundDetails.Entity.ACCOUNT_MANDATE_CUSTOMISATION">
</div>
</div>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="saveManager()">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelManager">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteManager()">Delete</button>
</span>
</div>
</div>
</div>
html css bootstrap-4
asked Mar 8 at 16:17
TomTom
75873279
I have created an html UI for my angular application and unfortunately it is not responsive. When I minimize the screen, the controls fall outside of the window. Could somebody tell me what am i doing wrong
Screenshot - modal window when opened in normal window size
Screenshot - modal window when opened with minimized window size
Code
<style>
.desc-header
background-color: #FAE7D6;
color: black
.header
width: 8%;
.panel-heading
color: white;
background-color: #F59850;
border-color: #ddd;
.scrollClass
height: 800px;
overflow-y: scroll;
overflow-x: hidden;
</style>
<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-form-label modal-label header">Name</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">FundDetails.Entity.NAME</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
[(ngModel)]="FundDetails.Entity.NAME" />
</div>
<label for="inputOffice" class="col-md-2 col-sm-12 col-form-label header">Investment Status</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">FundDetails.InvestmentStatus.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.INVESTMENT_STATUS_ID"
[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-form-label header">Make Anonymous</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.Entity.IS_ANONYMOUS ? "Yes" : "No"</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.Entity.IS_ANONYMOUS"
value="FundDetails.Entity.IS_ANONYMOUS" [(ngModel)]="FundDetails.Entity.IS_ANONYMOUS"
style="width: 13px; height: 13px;" /> FundDetails.Entity.IS_ANONYMOUS ? "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.FlagShipFund?.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.FLAGSHIP_FUND_ID" [data]="FundDetails.FlagshipFunds"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group 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="inputEmail" class="col-md-2 col-form-label header">Account Mandate</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.AccountMandate?.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.ACCOUNT_MANDATE_ID" [data]="FundDetails.AccountMandates"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label header">Vehicle Type</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.VehicleType.NAME</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.VEHICLE_TYPE_ID" [data]="FundDetails.VehicleTypes"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Bloomberg Ticker</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.Entity.BLOOMBERG_TICKER</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
[(ngModel)]="FundDetails.Entity.BLOOMBERG_TICKER" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label header">Primary Class</label>
<div class="col-md-3">
<div *ngIf="!EditMode">FundDetails.PrimaryClasses.DESCRIPTION</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%"
[(ngModel)]="FundDetails.Entity.PRIMARY_CLASS_ID" [data]="FundDetails.Classes"
[filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<!-- Flagship needs to be disable based on user role -->
<div class="form-group row">
</div>
<div class="form-group 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.Entity.ACCOUNT_MANDATE_CUSTOMISATION">
</ckeditor>
<div style="padding: 10px" *ngIf="!EditMode"
[innerHTML]="FundDetails.Entity.ACCOUNT_MANDATE_CUSTOMISATION">
</div>
</div>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="saveManager()">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelManager">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteManager()">Delete</button>
</span>
</div>
</div>
</div>
html css bootstrap-4
html css bootstrap-4
asked Mar 8 at 16:17
TomTom
75873279
asked Mar 8 at 16:17
TomTom
75873279
edited Mar 8 at 17:13
Tom
asked Mar 8 at 16:17
TomTom
75873279
asked Mar 8 at 16:17
TomTom
75873279
asked Mar 8 at 16:17
TomTom
75873279
75873279
1
Why are you using tables for layout rather than the Bootstrap grid system?
– Turnip
Mar 8 at 16:24
I would highly reccomend you don't use tables for layout, Bootstrap has a very good grid system you can use for layout. Looking at your HTML however its likley the fixed width you have is causing the issue - try changing it to a % or auto i.e.<kendo-dropdownlist style="width:100%" [(ngModel)]="ManagerStrategyDetails.InvestmentStatus" [data]="ManagerStrategyDetails.InvestmentStatuses" [filterable]="false" textField="Name" valueField="Id"></kendo-dropdownlist>
– MikeS
Mar 8 at 16:28
removing fixed width works but thinking of using the grid system as you suggested. Could you show me an example of atleast one row using the grid styles please. You know how my UI looks
– Tom
Mar 8 at 17:04
Sorry I wasnt using table as I just updated the post. I had initially posted the wrong html
– Tom
Mar 8 at 17:15
add a comment |
1
Why are you using tables for layout rather than the Bootstrap grid system?
– Turnip
Mar 8 at 16:24
I would highly reccomend you don't use tables for layout, Bootstrap has a very good grid system you can use for layout. Looking at your HTML however its likley the fixed width you have is causing the issue - try changing it to a % or auto i.e.<kendo-dropdownlist style="width:100%" [(ngModel)]="ManagerStrategyDetails.InvestmentStatus" [data]="ManagerStrategyDetails.InvestmentStatuses" [filterable]="false" textField="Name" valueField="Id"></kendo-dropdownlist>
– MikeS
Mar 8 at 16:28
removing fixed width works but thinking of using the grid system as you suggested. Could you show me an example of atleast one row using the grid styles please. You know how my UI looks
– Tom
Mar 8 at 17:04
Sorry I wasnt using table as I just updated the post. I had initially posted the wrong html
– Tom
Mar 8 at 17:15
1
1
Why are you using tables for layout rather than the Bootstrap grid system?
– Turnip
Mar 8 at 16:24
Why are you using tables for layout rather than the Bootstrap grid system?
– Turnip
Mar 8 at 16:24
I would highly reccomend you don't use tables for layout, Bootstrap has a very good grid system you can use for layout. Looking at your HTML however its likley the fixed width you have is causing the issue - try changing it to a % or auto i.e.
<kendo-dropdownlist style="width:100%" [(ngModel)]="ManagerStrategyDetails.InvestmentStatus" [data]="ManagerStrategyDetails.InvestmentStatuses" [filterable]="false" textField="Name" valueField="Id"></kendo-dropdownlist>– MikeS
Mar 8 at 16:28
I would highly reccomend you don't use tables for layout, Bootstrap has a very good grid system you can use for layout. Looking at your HTML however its likley the fixed width you have is causing the issue - try changing it to a % or auto i.e.
<kendo-dropdownlist style="width:100%" [(ngModel)]="ManagerStrategyDetails.InvestmentStatus" [data]="ManagerStrategyDetails.InvestmentStatuses" [filterable]="false" textField="Name" valueField="Id"></kendo-dropdownlist>– MikeS
Mar 8 at 16:28
removing fixed width works but thinking of using the grid system as you suggested. Could you show me an example of atleast one row using the grid styles please. You know how my UI looks
– Tom
Mar 8 at 17:04
removing fixed width works but thinking of using the grid system as you suggested. Could you show me an example of atleast one row using the grid styles please. You know how my UI looks
– Tom
Mar 8 at 17:04
Sorry I wasnt using table as I just updated the post. I had initially posted the wrong html
– Tom
Mar 8 at 17:15
Sorry I wasnt using table as I just updated the post. I had initially posted the wrong html
– Tom
Mar 8 at 17:15
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55067061%2fbootstrap-form-controls-not-responsive%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55067061%2fbootstrap-form-controls-not-responsive%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Why are you using tables for layout rather than the Bootstrap grid system?
– Turnip
Mar 8 at 16:24
I would highly reccomend you don't use tables for layout, Bootstrap has a very good grid system you can use for layout. Looking at your HTML however its likley the fixed width you have is causing the issue - try changing it to a % or auto i.e.
<kendo-dropdownlist style="width:100%" [(ngModel)]="ManagerStrategyDetails.InvestmentStatus" [data]="ManagerStrategyDetails.InvestmentStatuses" [filterable]="false" textField="Name" valueField="Id"></kendo-dropdownlist>– MikeS
Mar 8 at 16:28
removing fixed width works but thinking of using the grid system as you suggested. Could you show me an example of atleast one row using the grid styles please. You know how my UI looks
– Tom
Mar 8 at 17:04
Sorry I wasnt using table as I just updated the post. I had initially posted the wrong html
– Tom
Mar 8 at 17:15