If we could change the size of ui.dialog() with a custom value

[v479038280]

Besides the prop full-width, full-height, maxized , is there a way to define a dialog with a custom width and height like width=500px,height=300px

[falkoschindler]

with ui.dialog(value=True), ui.card().classes('w-[500px] h-[300px]'):
    ui.label('Hello, world!')

[v479038280]

it seems w-[value] the value can't be greater than 1/3 of the screen.

with ui.dialog().props('position="right"' value=True) as dialog, ui.card().classes('w-[1000px] h-[700px]'):
    ui.label('hello,NiceGui')

the 1000px doesn't work as expected.

[falkoschindler]

Ok, there seems to be a maximum width defined by Quasar:

@media (min-width: 600px) {
    .q-dialog__inner--minimized>div {
        max-width: 560px;
    }
}

We can reset it forcefully like this:

with ui.dialog(value=True), ui.card().classes('w-[1000px] h-[700px] !max-w-full'):
    ui.label('Hello, world!')

[zhangguolin333]

@falkoschindler That's great. I've been troubled by this problem for a long time today. I should have browsed discussions earlier.

[python-and-novella]

Quasar website has many examples, the most example of quasar,nicegui could do the same.
https://quasar.dev/vue-components/dialog