显示和隐藏控件时控件对齐中断

时间：2019-06-03 13:58:39

标签： html css twitter-bootstrap

我已经在angular 7中实现了UI。我有一个复选框控件，该控件显示和隐藏其下方的textarea控件。我的问题是，只要控件在其左侧显示控件，该控件就会被按下。有人可以告诉我可能是什么问题吗？因此，在此处选择补充信协议时，会显示附带信的详细信息，但会向下推左侧的NAV报告周期

之前 enter image description here

之后 enter image description here

html代码

<style>
    label {
        margin-left: 0.5rem;
        vertical-align: middle
    }


    .panel-heading {
        color: black;
        /* background-color: #F5F7F7; */
        border-color: #ddd;
        overflow: hidden;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .panel-heading .left-label {
        display: inline-block;
        padding-top: 5px !important;

    }

    .panel-heading label {
        margin-bottom: 0px !important;
    }
</style>



<div class="card" style="height: 100%; width: 100%;">
    <div class="card-header panel-heading">
        <span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Terms</span>
        <div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
            <label style="text-align: center; vertical-align:middle" class="btn btn-primary"
                [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input type="checkbox"
                    [(ngModel)]="EditMode" class="hidden" />Edit Mode</label>
        </div>
    </div>

    <div *ngIf="Fund">
        <div class="card-body">

            <div class="form-group row">
                <label for="inputName" class="col-md-2 col-form-label">Name</label>
                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{Fund.Name}}</div>
                    <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="Fund"
                        class="form-control  form-control-sm" [data]="Funds" [filterable]="false" textField="Name"
                        [valuePrimitive]="true" valueField="Id" (valueChange)="fundChanged($event)">
                    </kendo-dropdownlist>
                </div>

                <label for="inputTitle" class="col-md-2  col-form-label ">Plan Asset Fund</label>
                <div class="col-md-3">

                    <div *ngIf="!EditMode">{{Fund.PlanAssetFund === 'true' ? 'Yes' : 'No'}}</div>
                    <label *ngIf="EditMode" style="font-size: 13px;font-weight: normal;cursor: pointer">
                        <input type="checkbox" [(ngModel)]="Fund.PlanAssetFund" style="width: 13px; height: 13px;" />
                        Yes </label>
                </div>
            </div>

            <div class="form-group row">
                <label for="inputTitle" class="col-md-2  col-form-label ">Vehicle Type</label>
                <div class="col-md-3" style="height: 30px">
                    <div>{{Fund.VehicleTypeName}}</div>
                </div>

                <label for="inputOffice" class="col-md-2 col-form-label ">Side Letter Agreement</label>
                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{Fund.SideLetterAgreement === 'true' ? 'Yes' : 'No'}}</div>
                    <label *ngIf="EditMode" style="font-size: 13px;font-weight: normal;cursor: pointer">
                        <input type="checkbox" #myId checked="checked" (click)="isSideLetterAgreementSelected($event)"
                            value="{{Fund.SideLetterAgreement}}" [(ngModel)]="Fund.SideLetterAgreement"
                            style="width: 13px; height: 13px;" /> Yes </label>

                </div>
            </div>

            <div class="form-group row">
                <label for="inputEmail" class="col-md-2  col-form-label ">Investment Manager (Firm)</label>
                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{Fund.InvestmentManager}}</div>
                    <input *ngIf="EditMode" [(ngModel)]="Fund.InvestmentManager" kendoTextBox [readonly]="false"
                        class="form-control form-control-sm" />
                </div>

                <ng-container *ngIf="isAgreement">
                    <label for="inputEmail" class="col-md-2  col-form-label ">Side Letter Details</label>
                    <div class="col-md-3">
                        <div *ngIf="!EditMode">{{Fund.SideLetterText}}</div>
                        <textarea *ngIf="EditMode" [(ngModel)]="Fund.SideLetterText" style="width:100%" kendoTextArea></textarea>
                    </div>
                </ng-container>

            </div>

            <div class="form-group row">
                    <label for="inputEmail" class="col-md-2  col-form-label ">NAV Reporting Cycle</label>
                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{Fund.NavReportingCycleName}}</div>
                    <kendo-dropdownlist *ngIf="EditMode" style="width:100%" class="form-control form-control-sm"
                        [data]="ReportingCycle" [(ngModel)]="Fund.NavReportingCycleId" [filterable]="false"
                        [textField]="'Name'" [valuePrimitive]="true" [valueField]="'Id'">
                    </kendo-dropdownlist>

                </div>
            </div>


            <div class="form-group row">
                <label for="inputName" class="col-md-2  col-form-label ">Fund Currency</label>
                <div class="col-md-3" style="height: 30px">
                    <div>{{Fund.CurrencyName}}</div>
                </div>
            </div>

            <div class="form-group row">
                <label for="inputName" class="col-md-2  col-form-label ">Audit Year End</label>
                <div class="col-md-3">
                    <div *ngIf="!EditMode">{{Fund.AuditYearEndString}}</div>
                    <kendo-dropdownlist *ngIf="EditMode" style="width:100%" class="form-control form-control-sm"
                        [(ngModel)]="Fund.AuditYearEnd" [data]="AuditYearEnd" [filterable]="false"
                        [valuePrimitive]="true" [textField]="'Name'" [valueField]="'Id'">
                    </kendo-dropdownlist>
                </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)="Update()">Save</button>

                </span>
            </div>
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分：1)

您正在做的是使用Bootstrap设置彼此相邻的项目。您基本上是这样做的

<div class="row">
  <div class="col-md-2">Label</div>
  <div class="col-md-3">Form element</div>
  <div class="col-md-2">Label</div>
  <div class="col-md-3">Form element</div>
</div>

导致这样的事情

+-------+--------------+-------+--------------+
| Label | Form element | Label | Form element |
+-------+--------------+-------+--------------+

如果其中一列的高度增加，则整行将相应地升高

+-------+--------------+-------+--------------+
| Label | Form element | Label | Form element |
|       |              |       | Form element |
|       |              |       | Form element |
|       |              |       | Form element |
+-------+--------------+-------+--------------+

这是由于Bootstrap使用display: flex（或版本4之前的display: inline-block）导致的。这些都是一维显示设置。在您的情况下，应使用display: table或display: grid进行真正的二维布局

答案 1 :(得分：0)

问题在于，使用* ngIf删除后，您的DOM元素将保留边距和填充DOM。因此，请尝试删除它，并使用[ngClass]并在条件为真且文本区域可见时添加带有padding和magin的类。

相关问题
最新问题