Блог

Я создал HTML-интерфейс для своего приложения angular, и, к сожалению, он не реагирует. Когда я сворачиваю экран, элементы управления выпадают за пределы окна. Кто-нибудь может сказать мне, что я делаю не так

Скриншот — модальное окно при открытии в обычном размере окна

Скриншот — модальное окно при открытии с уменьшенным размером окна

Код

 <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;" />amp;nbsp;amp;nbsp;{{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>