Scope dialog to a subsection of the DOM rather than the whole page

[maxime1992]

Bug, feature request, or proposal:

Feature

What is the expected behavior?

It would be nice to have an option that set how a modal should be opened.

For example with material for AngularJS : https://material.angularjs.org/latest/demo/dialog

Give :

(it's not opened on the whole page).

There's an option for that :

(gives the following)

What is the current behavior?

A modal is opened in full page

[fxck]

You can do that with simple css. And by simple, I mean it's not that simple, since there's no way to add a class to md-dialog-container I don't think, but you can still set fixed width to the component displayed in the dialog itself. Also there recently was a PR to allow you to control the width of the dialog programatically, I think it was merged already.

[maxime1992]

@fxck I think we can agree that doing it by hand is not that simple.

you can still set fixed with to the component displayed in the dialog itself

Within my app, I do have a header that shouldn't be below the backdrop, so in my case it doesn't help to only set the size of the displayed component

@kara any news on this ? It might be reeeeally helpful :)

Cheers :beers:

[SylvainSimon]

The "fullscreen" and the "parent" option on the old material angular lib not present effectively. It's a good thing to make this options available to append the dialog to custom node.

I want to append my options dialog on my app but the dialog overlay and the dialog position is calculated on the body reference. I want to say : "Append my dialog in my app content div and let me the toolbar (close, minimize and maximize) buttons accessible".

[narendra-agashe]

Any updates on this feature request? This is exactly what I need.

Thanks, Naren

[giovannicandido]

There is a forced padding on the dialog that prevents creating the beautiful toolbar dialog in the example.

CSS doesn't help because removing padding creates a awkward behaviour

[WaterBleu]

@giovannicandido I was not able to remove the forced padding at all lol any suggestion? @maxime1992 did you get a chance to get it working? I'm stuck on the making the full length header without paddings

[maxime1992]

@WaterBleu nop sorry I don't have any solution to help you... :/

[jelbourn]

Closing this since I'm not really sure what specifically the original issue was asking for. Feel free to open a new issue that reflects the current state of the dialog.

[maxime1992]

@jelbourn

I'm not really sure what specifically the original issue was asking for

I'll try to be clearer but this hasn't been implemented so far, I think you should reopen :+1:

If you look on Material with AngularJs, it was possible to open a modal scoped to a given block (instead of taking the whole screen).

Demo: https://material.angularjs.org/latest/demo/dialog

Here, the dialog is opened within the "basic usage" block, not in full screen

[jelbourn]

Ah, scoping. This is something there have been sporadic requests for, but it's not immediately clear whether this makes sense from an a11y perspective. The answer here might be finally finishing cdk/dialog and letting people go that route for customization.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.