Tips for arranging columns and rows in a mat-dialog box

Question

Tips for arranging columns and rows in a mat-dialog box

In my Angular project, I am working on a mat dialog box and trying to achieve a layout with 1 row at the top and 3 rows at the bottom, similar to the image below. However, I am facing issues in making it work properly. Additionally, I want to hide the horizontal scroll bar by adjusting the width property, but for some reason, it is still visible. Any suggestions?

HTML

<div mat-dialog-content class="dialog-container">
  <div class="column">
    <div class="header">Tops</div>
  </div>
  <div class="parent">
      <div class="left">
          <div class="sub-header">Left</div>
          <div style="background-color: darkblue;">
            <div></div>
          </div>
      </div>
      <div class="center">
        <div class="sub-header">Center</div>
    </div>  

      <div class="right">
          <div class="sub-header">Right</div>
      </div>
  </div>
</div>

CSS

.dialog-container{
    width: 1000px;
    height:1000px;
    overflow-x:hidden;
}   
.header{
    position: relative;
    font-size: 20px;
    text-align: center;
    font-family: 'Raleway';
}
.button{
    margin-top: 15px;
    align-items: center;
}
.clickable {
    cursor: pointer;
}

.parent {
    display: flex;
    overflow: hidden;
}

.column{
    display: flex;
    flex-direction: column;
    background-color: blue;
}

.left {
    width: 200px;
    background-color: green;
}

.right {
    width: 300px ;
    background-color: blue;
}

.center{
    width: 300px;
    background-color: red;
}

.header{
    font-size: 30px;
    font-family: "Raleway-ExtraLight";
    padding: 30px;
}

.sub-header{
    font-size: 20px; 
    margin-top: 25px;
    font-weight: bold;
}

Current View

Desired Layout

I'm experimenting with different column and row configurations to match the final design. Any recommendations would be greatly appreciated.

css angular layout angular-material

Answer 1

Answer №1

To create a grid layout, you can utilize mat-grid where you define the number of rows and columns required. In this case, 4 columns and 4 rows are specified. The buttons at the bottom can be placed within the mat-dialog-actions div specifically designed for them. If you want to see an example using mat-grid-list, check out this Demo on StackBlitz

In case the demo link isn't working, here is the code snippet for you to try:

html:

<mat-grid-list cols="18" rowHeight="1:3">
  <mat-grid-tile [colspan]="3">Map Insights</mat-grid-tile>
  <mat-grid-tile [colspan]="7">
    <input type="text" placeholder="blablabla" />
  </mat-grid-tile>
  <mat-grid-tile></mat-grid-tile>
  <mat-grid-tile [colspan]="7"><i>Blablablabla your text in italic</i></mat-grid-tile>


  <mat-grid-tile [rowspan]="5" [colspan]="3">Your side bar</mat-grid-tile>
  <mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
  <mat-grid-tile [rowspan]="5">=></mat-grid-tile>
  <mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
</mat-grid-list>

css:

mat-grid-tile {
  background: lightblue;
}

The CSS styling is included solely for visualization purposes ;)

Answer 2

To create a grid layout, you can utilize mat-grid where you define the number of rows and columns required. In this case, 4 columns and 4 rows are specified. The buttons at the bottom can be placed within the mat-dialog-actions div specifically designed for them. If you want to see an example using mat-grid-list, check out this Demo on StackBlitz

In case the demo link isn't working, here is the code snippet for you to try:

html:

<mat-grid-list cols="18" rowHeight="1:3">
  <mat-grid-tile [colspan]="3">Map Insights</mat-grid-tile>
  <mat-grid-tile [colspan]="7">
    <input type="text" placeholder="blablabla" />
  </mat-grid-tile>
  <mat-grid-tile></mat-grid-tile>
  <mat-grid-tile [colspan]="7"><i>Blablablabla your text in italic</i></mat-grid-tile>


  <mat-grid-tile [rowspan]="5" [colspan]="3">Your side bar</mat-grid-tile>
  <mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
  <mat-grid-tile [rowspan]="5">=></mat-grid-tile>
  <mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
</mat-grid-list>

css:

mat-grid-tile {
  background: lightblue;
}

The CSS styling is included solely for visualization purposes ;)

Tips for arranging columns and rows in a mat-dialog box

Answer №1

Similar questions

Issue with compatibility of Angular Elements across Chrome and IE11 at the same time

Karma Jasmin is puzzled as to why her tests are failing intermittently, despite the absence of any actual test cases

Guide to generating a text string by utilizing the foreach loop

Using HTML to load an image is not possible, as it can only be done using CSS

When attempting to replace the outdated Angular 2 router with the new Router, I encountered an error

Using observable object fields as query parameters in Firestore allows for dynamic filtering and retrieval

Navigating Using URL Paths in Angular 2 Application

What is the best way to extract information from an observable stream?

The Bootstrap navbar collapse fails to expand in the appropriate location

Creating a Sticky Header and Footer with Responsive Design: Ensuring Content Div Expansion between Them

Dynamic flexibility for content scrolling across components

Is there an alternative to using CSS units of measurement when using the .css() method?

Unable to load dynamic JSON data in ag-grid for Angular 2

Step-by-step guide for setting up automatic Tslint in IntelliJ

Find the length of time in Typescript (measured in hours, minutes, and seconds)

Using Angular to access HTML content through the .ts file

Does the a:hover:not() exception only apply to elements with the .active class?

Is there a callback or event that can be used to ensure that getComputedStyle() returns the actual width and height values?

Verify if the page was generated as a regular Page or a modal page

Tips for implementing 'transloco' on the 'pie-chart' component in an Angular project