0

我正在尝试使用 matDialog 以角度将组件显示为弹出窗口。在组件的 HTML 中，我已经形成了两个空白，基本样式为 width 和 bgcolor。但是在 matDialog 中，只有表单被显示，而不是空的 div。

谁能建议如何使用 matDialog 实现这一目标？下面是我的代码。参考类“曲线”，因为我希望这些 div 显示在弹出窗口中。

<div class="container">
    <div class="upload-section" mat-dialog-content>
        <div class="upload-form">
                <div class="curves">
                        <div class="first-curve" style="background-color: red;width: 10px;height: 100%;"></div>
                        <div class="second-curve" style="background-color: blue;width: 10px;height: 100%; "></div>
                    </div>
                <form (ngSubmit)="onUploadSubmit(uploadForm)" #uploadForm="ngForm">
                        <label>Category: </label>
                        <mat-form-field>
                            <input type="text" matInput placeholder="Category" required name="category"
                             ngModel #cat="ngModel">
                        </mat-form-field><br>
                        <label>Offer Percentage: </label>
                        <mat-form-field>
                            <input type="text" matInput placeholder="Offer Percentage" required name="offerPercentage"
                             ngModel #offerPercent="ngModel">
                        </mat-form-field><br>
                        <label>Additional Offer Available: </label>
                        <mat-form-field >
                            <mat-label>Additional Offer Available</mat-label>
                            <mat-select [(ngModel)]="selectedValue" name="isAdditionalOfferAvailable">
                              <mat-option *ngFor="let isAdditionalOffer of ['Yes','No']" [value]="isAdditionalOffer">
                                {{isAdditionalOffer}}
                              </mat-option>
                            </mat-select>
                          </mat-form-field><br>
                        <label>Offer Code: </label>
                        <mat-form-field>
                            <input type="text" matInput placeholder="Offer Code" required name="useCode"
                             ngModel #code="ngModel">
                        </mat-form-field><br><br>
                        <label>Select Image: </label>
                        <input type="file"  required (change)=" onFileSelected($event)" name="image" ngModel #image="ngModel"> 
                        <!-- <div class="error-box" *ngIf="!loginUsername.valid && loginUsername.touched">
                            <p>Please enter your registered email Id</p>
                        </div>
                        <mat-form-field>
                            <input type="password" matInput placeholder="Password" required minlength="8"
                                name="password" ngModel #loginPassword="ngModel">
                        </mat-form-field>
                        <div class="error-box" *ngIf="!loginPassword.valid && loginPassword.touched">
                            <p>Please enter valid password</p>
                        </div>-->
                       
                        <div class="submitBtn">
                            <button mat-raised-button color="accent" type="submit"
                                [disabled]="!uploadForm.valid">SUBMIT</button>
                        </div> 
                    </form>
        </div>
          <div class="curves-last" style="display:flex;width: 100%;height: 100%;justify-content: flex-end;">
              <div class="first-curve" style="background-color: red;width: 10px;height: 100%"></div>
              <div class="second-curve" style="background-color: blue;width: 10px; height: 100% "></div>
        </div>
        
    </div>
</div>
4

2 回答 2

0

CSSheight属性与百分比值一起使用时，是根据元素的包含块计算的。

假设你的body元素有height: 1000px. 然后一个孩子height: 90%会得到900px。

如果您没有为包含块设置显式高度（并且子元素不是绝对定位的），那么具有百分比高度的子元素将无事可做，高度将由内容和其他属性确定。

因此，如果要在 div 中使用百分比高度，请指定所有父元素的高度，包括根元素(e.g., html, body {height:100%;})

因此，在您的代码中，您应该设置父 div 的宽度、高度

<div class="curves" style="height:100px;width:100px">
    <div class="first-curve" style="background-color: red;width: 10px;height: 100%;"></div>
    <div class="second-curve" style="background-color: blue;width: 10px;height: 100%; "></div>
</div>
于 2021-05-30T08:29:13.260 回答
0

要么将一些内容放在 div 中，要么以 px 为单位给出高度，例如 10px 给第一曲线和第二曲线 div，而不是 100% -

<div class="curves-last" style="display:flex;width: 100%;height: 100%;justify-content: flex-end;">
              <div class="first-curve" style="background-color: red;width: 10px;height: 10px"></div>
              <div class="second-curve" style="background-color: blue;width: 10px; height: 10px "></div>
        </div>
于 2021-05-30T08:15:17.160 回答