search

Material-Blazor / Material.Blazor

Lightweight Material Theme components for Blazor
Other
247 stars 32 forks source link

Feature request for MBDialog: allow specification of width #283

Closed stefanloerwald closed 4 years ago

stefanloerwald commented 4 years ago

I'm trying to design a dialog that shows a large image (think web shop where you want to see the product image larger). Sadly, the dialog that opens is rather small. Setting a width on the MBDialog doesn't change this, as the width-style should actually be applied to mdc-dialog__container and mdc-dialog__surface, as far as I can tell.

A workaround is:

<style>
        .mdc-dialog__container {
            min-width: 80%;
            max-width: 80%;
        }

        .mdc-dialog .mdc-dialog__surface {
            min-width: 80%;
            max-width: 80%;
        }
</style>
<MBDialog>
   <Body>...</Body>
</MBDialog>

Could this be a built-in feature of the dialog component? Or am I perhaps using it wrong?

simonziegler commented 4 years ago

Hi Stefan, Material.Blazor deliberately doesn't do styling overrides for Material Components Web, and if you want to style you either use CSS or potentially SASS if you are building your own theme.

The relevant SASS is her: https://github.com/material-components/material-components-web/blob/v7.0.0/packages/mdc-dialog/_variables.scss#L34.

If you're using CDN CSS you'll find that maximum width is defined by

@media (min-width: 592px) {
  .mdc-dialog .mdc-dialog__surface {
    max-width: 560px;
  }
}

Ultimately there's little to no documentation provided by Google for styling Material Theme, which seems to make sense given how big it is. Instead I've found you just need to hunt around inside either the CDN CSS or better still the node packages to find what you want, coupled with inspection using your browser's developer tools.

I suggest applying a style overriding max-width as you suggest, but specifically using a media query. You may need to use !important to drive the point home.

I'll leave this to you to close if you think this answer is sufficient.

PS, it's interesting to note that Material Theme has full screen dialogs, however these are not implemented in Material Components Web. Let's hope this changes with future releases beyond 7.0.0.

stefanloerwald commented 4 years ago

Thanks a lot for the very detailed answer, @simonziegler. I guess I'll have to keep my additional styling until full screen dialogs arrive.