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

Attempting to simulate the behavior of Angular2 Token during testing

The HttpClient.get('/') request with {observe: 'response'} is failing to retrieve some headers

Struggling to position the newest messages at the bottom of the list

Use `$$state: {…}` within the request rather than the data

Redirecting an angular application to a designated URI using nginx

Guide on aligning a child div directly beneath its parent without specifying the parent's height

Is it necessary to include a module in another module if it is not utilized in the template?

How to use jQuery to set a background image using CSS

When attempting to assign a variable in my ngModel, what issue could be causing a problem?

Spinner loading - stays centered on screen even when scrolling up or down

How do I resolve the issue of a non-iterable 'int' object?

How to Customize the Select Dropdown in Angular Material 2

Which is more efficient for rendering performance: using images, CSS gradients, or box shadows with borders?

Optimizing Your Angular2 Bundle with Webpack: Best Practices for Minimizing Code Size

Issues with using a personalized font in a Stenciljs project

Content hidden by spoiler buttons may overlap with other spoiler buttons

Maintain the basic structure while ensuring divs are properly aligned

The Google Maps feature encountered an error (ReferenceError: google is not defined)

Switching services in test cases with ReflectiveInjector

ESLint encountered an issue while attempting to load the configuration "plugin:@angular-eslint/ng-cli-compat" for extension