Semantic-ui: [Modal] Add Scrollable Content instead of scrolling screen

[mikocot]

With long content, scrolling the screen seems not to be obvious for the users, they don't see the scroll on the side of the window don't know how to progress without the action buttons.

On the other hand it's pretty easy to scroll only the content of the modal. Instead of setting the body/dimmer size on window resize one could set the height of the content and overflow: auto. All the variables are there, All could be set with additional scrollableclass added to div.conent.

That's how it would look like:

instead of:

Unofrtunately this seems to be impossible to add on top of the library, without code changing, as there is a conflict of current logic that happens on resize and what we could trigger afterwards (adding scrolling class etc)

[jlukic]

Yeah, absolutely. And the good thing is its really easy to implement.

[v3ss0n]

Is that added in version 2.2.4 ? I didn't see it in changelog.
How to use it ?

[mike-feldmeier]

I'm using 2.2.4 and also very interested in this enhancement!

[v3ss0n]

@jlukic is it available in 2.2.4 (since marked as 2.2.4 milestone)

[jlukic]

It has been pushed to a later milestone, 2.2.6

[v3ss0n]

thanks alot.

With this , semantic will have official support for scroll-able container in non-modal containers too ? I do not see any scrollable container UI types.

[jr69]

Hi,

I am wondering if this is implemented yet or not? How about for non-modals, i.e. a normal div?
Thanks

[mikocot]

So far it looks like it's only moving between the milestones :)

[v3ss0n]

semantic ui had a lot of potential , we seems to need more contributor since @jlukic seems busy.
It is most pleasurable CSS framework to work , comparing to bootstrap and MDL .

[sammich]

Also interested in this from the aspect of multiple modals.

If I have a tall modal as my first, scroll down a bit, and open a secondary modal, that second modal is positioned at the top of the dimmer div, so the user can't see it unless they scroll up. I fixed that bit of UX with a animate:scrollTop but that means the user loses their previous scroll position. Scrollable content should fix that well.

[sammich]

What if you want the action buttons always visible?

I presume you mean the action buttons under the topmost modal (assuming >2). In my case, the nesting was just for display of arbitrary-depth nested data. Users can back out a level by clicking the 'Close' present on each popup, or back out completely by clicking on the backdrop.

[kannextic]

@sammich I'm so sorry I misread your comment. Please ignore my question.

But I'm glad mikocot's pushed a commit. Hope it'll get released soon.

[mikocot]

Hey, you can find the mentioned feature as PR: https://github.com/Semantic-Org/Semantic-UI/pull/5214

It's fully functional in our environment, however the implementation is not the prettiest. I found no css-only way to achieve content scrolling effect and modal fitting nicely in the screen. Therefore I set the content max-height on resize. This works fine, but requires knowing the sizes of the header and action buttons. Those are unfortunately not known until the modal is shown, so either the resize needs to wait till then (doesn't look good) or a fixed value needs to be used in between.
As alternative I could see the solution in using flex for the modals layout, but that would have stronger side effects.

[jlukic]

I've added an internally scrolling version of modal in next version, as well as new docs.

The code looks like this

<div class="ui modal">
  <div class="header">Header</div>
  <div class="scrolling content">
    <p>Very long content goes here</p>
  </div>
</div>