我已经为我的角度应用程序创建了一个html UI,不幸的是它没有响应。当我最小化屏幕时,控件将落在窗口之外。有人可以告诉我我在做什么错
屏幕截图-以正常窗口大小打开时的模式窗口
屏幕截图-以最小的窗口尺寸打开时的模式窗口
代码
<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>