发表新帖
发表新帖

Angular2 Material Dialog css, dialog size

前端 未结
关注
11 946
甜味超标
甜味超标 2020-12-25 10:52

Angular2 material team recently released the MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

I\'d like to change the looking and f

相关标签:
11条回答
  • 醉酒成梦
    2020-12-25 11:16

    You can also let angular material solve the size itself depending on the content. This means you don't have to cloud your TS files with sizes that depend on your UI. You can keep these in the HTML/CSS.

    my-dialog.html

    <div class="myContent">
  <h1 mat-dialog-title fxLayoutAlign="center">Your title</h1>
  <form [formGroup]="myForm" fxLayout="column">
    <div mat-dialog-content>
    </div mat-dialog-content>
  </form>
</div>

    my-dialog.scss

    .myContent {
    width: 300px;
    height: 150px;
}

    my-component.ts

    const myInfo = {};
this.dialog.open(MyDialogComponent, { data: myInfo });
    0 讨论(0)
  • 时光取名叫无心
    2020-12-25 11:20

    On smaller screen's like laptop the dialog will shrink. To auto-fix, try the following option

    http://answersicouldntfindanywhereelse.blogspot.com/2018/05/angular-material-full-size-dialog-on.html

    Additional Reading https://material.angular.io/cdk/layout/overview

    Thanks to the solution in answersicouldntfindanywhereelse (2nd para). it worked for me.

    Following is needed

    import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'

    0 讨论(0)
  • 我在风中等你
    2020-12-25 11:24

    sharing the latest on mat-dialog two ways of achieving this... 1) either you set the width and height during the open e.g. 

    let dialogRef = dialog.open(NwasNtdSelectorComponent, {
    data: {
        title: "NWAS NTD"
    },
    width: '600px',
    height: '600px',
    panelClass: 'epsSelectorPanel'
});

    or 2) use the panelClass and style it accordingly.

    1) is easiest but 2) is better and more configurable.

    0 讨论(0)
  • 一向
    2020-12-25 11:25

    Content in md-dialog-content is automatically scrollable.

    You can manually set the size in the call to MdDialog.open

    let dialogRef = dialog.open(MyComponent, {
  height: '400px',
  width: '600px',
});

    Further documentation / examples for scrolling and sizing: https://material.angular.io/components/dialog/overview

    Some colors should be determined by your theme. See here for theming docs: https://material.angular.io/guide/theming

    If you want to override colors and such, use Elmer's technique of just adding the appropriate css.

    Note that you must have the HTML 5 <!DOCTYPE html> on your page for the size of your dialog to fit the contents correctly ( https://github.com/angular/material2/issues/2351 )

    0 讨论(0)
  • 北海茫月
    2020-12-25 11:30

    You can inspect the dialog element with dev tools and see what classes are applied on mdDialog.

    For example, .md-dialog-container is the main classe of the MDDialog and has padding: 24px

    you can create a custom CSS to overwrite whatever you want

    .md-dialog-container {
      background-color: #000;
      width: 250px;
      height: 250px
}

    In my opinion this is not a good option and probably goes against Material guide but since it doesn't have all features it has in it's previous version, you should do what you think is best for you.

    0 讨论(0)
  • 春和景丽
    2020-12-25 11:32

    This worked for me:

    dialogRef.updateSize("300px", "300px");
    0 讨论(0)
 看不清?
提交回复
热议问题