Modal layout

[druppy]

I have been trying to get may way around in Quasar, and the bast way is still just to make some code

I need to have a modal for my layout (not all pages need login), and I tried to see if I could make a nice looking modal, using the q-layout as suggested in the docs, but then things got strange.

When making a normal q-modal with some html inside, it works but was not pretty, then I tried to put a q-layout inside, and then … it became invisible. It disables the background, it has inserted all the proper things in the dom tree, but I cant see them.

Need I do something special to use a q-layout inside a q-modal

PS: where are all the nice demos in the doc ?

[s.molinari]

Do you mean this demo? http://quasar-framework.org/components/modal.html

Scott

[druppy]

@s.molinari Yes, it was not there yesterday I am happy to see it back and working again.

[rstoenescu]

@druppy It wasn’t removed at all

[druppy]

@rstoenescu Scary ! I just discovered that the page is responsive …

[druppy]

@druppy To answer my own post, when making a modal that holds another q-layout tag inside, the q-modal need to specify a size of the modal, using content-css property.

I am sure there is some logic to that, but not in my head at the moment

[s.molinari]

According to the docs thecontent-cssproperty

Applies CSS style Object to Modal container.

So, probably without it, the modal can’t be rendered.

However, I too am wondering how that property is used. It looks like some Quasar magic?

Scott

[druppy]

@s.molinari I think q-layout uses 100% of parent, and parent i as big as the child dictates … and then both got confused

content-css just apply the style to the div modal wrapper, so no real magic .