@clayui/modal Enable modal-dialog-scrollable about clay HOT 11 CLOSED

@edalgrin I might be misunderstanding the issue, but we have size="full-screen". It will make it expand to the edges of the viewport and the body will have a scrollbar if content overflows. It looks like the screenshot:

from clay.

Hey @pat270 , yes I think it's very similar to that but I'm not sure it's what we need. @ugeortiz?

from clay.

Ideally, we'd like to be able to have scrollable behavior in modals not rendered full-screen. DXP use case for this is the data set field mapping modal, where user needs to go through a potentially long list of fields and select which ones wants to map. As opposed to other scrollable modals such as permissions, this list is not wide enough to be rendered full width

from clay.

@dsanz @edalgrin we also have the class modal-height-full. You can set the width via size="md" and add the className to ClayModal. It would look something like:

<ClayModal
    className="modal-height-full"
    size="md"
>

One thing I noticed is we're not adding overflow: auto for modal-height-full. I can add it through this issue. It will look like this once I add the overflow.

from clay.

Hey @pat270 yeah I tried also that one, and we talked about it, the problem with it is the height doesn't have to be always full, if the body content is short, the height must be short as well.

In any case, taking a look at the ClayModal component code, I noticed I can use either the size or the status to set a custom class in the modal-dialog, in our case modal-dialog-scrollable which is working but it feels like a "wrong" workaround.

from clay.

Hey guys, I'm not sure this fix is working because I don't have DXP updated and in the Clayui website is not working either, but from the code https://github.com/liferay/clay/blob/master/packages/clay-css/src/scss/variables/_modals.scss#L284 it looks like the modal will always take the viewport height available as its height, which is not the required behavior.

If the content inside the modal-body is a few lines, the modal should be shorter:

if the content is several lines, the modal-body will expand until it reaches the viewport height and then the scroll inside of it will start working

from clay.

Hey @edalgrin can you test this on https://next.clayui.com/docs/components/modal.html? We had a small change that didn't make it into the release that might affect this behavior. There is also a package update that includes these changes for DXP liferay-platform-experience/liferay-portal#195.

from clay.

Testing it

Adjusting it

The Modal is still always full height

from clay.

Hey @edalgrin I don't think you're supposed to change the size param to "height-full". If I set it to "md" and increase the text content I think I get the behavior you're wanting:

Does that look right?

from clay.

Actually, it does! I'm going to test it on our ticket, thanks!

from clay.

it's working on DXP, thanks!

from clay.