Angular matDialog should display with two empty div's with styles

Question

I am trying to display a component as a popup using matDialog in angular. Inside the component's HTML, I have formed along with two empty with basic styles as width and bgcolor. But in matDialog, only the form is getting displayed but not the empty div.

Can anyone please suggest how to achieve this using matDialog? Below is my code. refer class 'curves' as I want those div's to be displayed in the popup.

<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>

score 0 · Answer 1 · answered May 30 '21 at 08:15

either put some content in divs or give height in px for example 10px to first-curve and second-curve divs not as 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>

score 0 · Answer 2 · answered May 30 '21 at 08:29

The CSS height property, when used with a percentage value, is calculated with respect to the element's containing block.

Let's say your body element has height: 1000px. Then a child with height: 90% would get 900px.

If you have not set an explicit height to the containing block (and the child is not absolutely positioned), then your child element with percentage height will have nothing to go on and height will be determined by content and other properties.

Hence, if you want to use percentage heights in your divs, specify the height of all parent elements, up to and including the root element (e.g., html, body {height:100%;})

So in your code you should be set width,height of parent 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>

Angular matDialog should display with two empty div's with styles

2 Answers2