SolvedSemantic UI SCROLLING not working with modal

Open this link below in Chrome:

http://jsfiddle.net/6oony3xu/4/

After 2 seconds the script appends content to the modal BUT the scrolling does not show up. Your screen has to be at last 768px tall (height) so you can reproduce this bug.

Scrolling should be automatically added if needed, I mean, if the content does not fit the window the scroll bars should appear as soon as content gets bigger than viewport.

This bug is really really really anoying cause it's very common that you want to display some that in the modal after it show up. If you have a form inside the modal and the user sends it with errors, you want to be able to show those errors inside the modal, thus, it gets taller but semantic ui does not add scrolling :(

33 Answers

✔️Accepted Answer

Have a look here: http://jsfiddle.net/h76wmu47/.

You need to call modal('refresh') after changing your modals content in order for it to be recentered and possibly scrollbars to be attached/removed.

Related Issues:

15
Semantic UI How to add Semantic-ui to Webpack with vue-cli
For me I use semantic-ui-css package and add: In my main.js file. yesterday im have a problem with s...
13
Semantic UI [build] gulp build command not working
Hi gulp build can't complete the 'build-assets' phase due to the following error: And is NOT fixed b...
13
Semantic UI Active owner badly needed
@jlukic The project needs lifesaving measures as it's community is dissatisfied enough to be discuss...
13
Semantic UI [Modal] Scrolling broken for mobile devices from recent 2.3.2 changes
To make it to work again in my Angular app (with Semantic-UI 2.4.2) I had to add the following code:...
4
Semantic UI SCROLLING not working with modal
Have a look here: http://jsfiddle.net/h76wmu47/ Open this link below in Chrome: http://jsfiddle.net/...
324
tailwindcss npx tailwindcss init not working
I had trouble generating the configuration file while using the compatibility package I updated my t...
101
bootstrap Navbar .sticky-top doesn't work
My setup: Bootstrap@4.0.0-beta.2 macOS Sierra - Version 10.12.6 Google Chrome - Version 62.0.3202.62...
71
tailwindcss outline-none doesn't work on button with focus in chrome
You only need focus:outline-none for all browsers: Hi First of all a big thank's for your work on Ta...
70
bootstrap Responsive Card Decks
I've managed to find a way of having cards in the responsive system while having equal heights just ...
55
tailwindcss [Feature Request/Discussion] @apply with media queries and pseudo selectors
Hey @MattRogowski! That's actually totally possible already @apply currently does not work with pseu...
54
bootstrap Bootstrap dropdown require Popper.js (https://popper.js.org)
For laravel projects using laravel mix window.Popper = require('popper.js').default; does the trick ...
54
bootstrap table-responsive class does not take full width
simple solution use a wrapping <div> with the table-responsive class. This was previously reported i...
53
tailwindcss Allow configuration for using px instead of rem
I had this problem as well so I did the conversion for font size spacing and line height (assuming b...
48
bootstrap v4.0.0-alpha.6 - Activating tooltips breaks modals (stuck "transitioning")
Had the same issue fixed by adding data-animation=false to my html elements. Operating systems and b...
45
tailwindcss TypeError: getProcessedPlugins is not a function
Check your nodejs version (node -v) I had v10.19.0 then made global update to v14.15.1 ...
37
bulma [Feature] SASS division without slash
I've just created a fix/divide branch Will merge and release today. This is about Bulma ...
33
tailwindcss New purge option not working with webpack
The issue is that webpack doesn't set process.env.NODE_ENV for some stupid reason: https://github.co...
33
tailwindcss TypeError: Invalid PostCSS Plugin found at: plugins[1]
@michalhudecek try with: npm uninstall tailwindcss postcss autoprefixer npm install tailwindcss@comp...
29
materialize Changes for v1.0.0
There are some more issues I would consider to be included in v1.0.0 I think we should consider to r...
29
bootstrap Uncaught ReferenceError: Popper is not defined
It's because you included both bootstrap.min.js and bootstrap.bundle.min.js you should just include ...
28
tailwindcss Import does not work like documented
Some people reading this far might find this summary useful I'm trying to include a component In the...
27
bootstrap Modal background scrollable (iOS Safari)
Add to html: overflow: scroll; -webkit-overflow-scrolling: touch; System iOS 10.2 (iPad Mini 3) Brow...
26
bulma Importing Bulma in Create React App
For posterity's sake When importing Bulma in Create React App if you do this: You'll receive this er...
26
bootstrap [v4] Modal flickering when within .list-group-item
Quick fix for now: .list-group-item .list-group-item:hover{ z-index: auto; } Hi In some cases the mo...
25
bootstrap Util is not defined when referencing individual jQuery plugins (modal.js) via webpack
I find that code in 'bootstrap/js/src/util.js' was written in ES6 style: So instead of importing fil...
23
bootstrap v4 Custom File Input Dynamic "Choose file..." ::after pseudo selector
Got bitten by this today It's very strange to me to support styling something into being dysfunction...
21
materialize Can't select options or scroll in select input on mobile
I found the solution! With the meta viewport like this work fine for me <meta name=viewport content=...
18
materialize [1.0.0.alpha1] Side nav doesn't work with turbolinks 5
seem like instance still alive when turbolinks:load page it works if we destroy the existing instanc...
18
tailwindcss @apply doesn't work inside <style jsx></style>
@loicnestler @alexvilchis This works perfectly fine in latest next.js and tailwindcss packages: BTW ...
17
materialize different colors for different toasts
In Updated Version It's something like: I would like to show the toast like Saved Successfully Pleas...
16
materialize Can't check RadioButtons or Checkbox inside input-fields div
The best solution is to not wrap the checkboxes in the .input-field class Another solution is to add...
16
tailwindcss Poor performance as part of a webpack PostCSS build system
I did a little more research on this tonight and removing Tailwind CSS entirely from the project res...
15
tailwindcss Tailwind 2.0 poor performance as part of a webpack PostCSS build system
@gremo Look at the difference in the size of the bundles there.. 8.8mb for webpack 4/Tailwind 1.x ...
15
tailwindcss Flex-box "order" with responsive helpers
Thanks I would recommend wrapping it in @responsive like this so you can use it for various breakpoi...
15
bootstrap Add support for horizontal card
Bump! This would be awesome! 💯 I think it's very common use case that you want to have card content...
15
bootstrap V4.beta Argument $color of darken($color, $amount) must be a color
@derkjn you need to import the functions scss before variables I have update bootstrap to 4.0.0-beta...
14
tailwindcss resolve-url-loader cannot operate: CSS error when using @apply
Hey @thestepafter! This is unfortunately a known issue with resolve-url-loader due to one of its dep...
13
Fomantic UI Fomantic and yarn - install issues
@mathieutu I just did some more research into this and figured out a way around the issue ...
13
bootstrap _custom.scss alternatives
@supergithubo Marking a variable with !default will make the previous variable assignment important ...
12
materialize Error with Meteor 1.6-rc7 and node-sass 4.5.2
Not resolved for me I also did a fresh install of Meteor 1.6.0.1 and meteor add materialize:material...
9
materialize Swipeable tabs carousel height limited to 400px
The problem is that the swipeable tabs are styled by the carousel css Reference #4148 ...
9
bulma .table-container not working on desktop
Thanks @james-wasson It is the same as mentioned above Here you go: https://jsfiddle.net/89jesr6g/7/...
9
tailwindcss Latest version breaks application v2.2.12
Same issue here set the link to https://unpkg.com/tailwindcss@2.2.10/dist/tailwind.min.css and it wo...
7
tailwindcss How to webpack on VueJS project?
Hey I don't know a ton about this but I did manage to get an example project working ...
4
bootstrap carousel is sliding on ios when clicking whitout controls
what @happy-dev means is that on iOS when you just tap on the carousel it also slides which i can co...
3
materialize Cannot update to 0.100.1
It makes no sense if everyone writes: I have the same problem Just upvote the actual issue :) We are...
3
mui Proposal: Minimizing use of global CSS rules
Hi @amorey IMO having a MUI version without global style rules makes MUI more flexible and may incre...
3
tailwindcss [2.1] JIT mode break style with Next.js and webpack 5
Ugh I feel so dumb My issue was caused when migrating from @tailwindcss/jit What version of Tailwind...
3
tailwindcss Setting default max-width and height for img tag
Even if the height: auto is not the main problem here i would remove it by default because there is ...
147
ng bootstrap No provider for NgbActiveModal! => "Components as content"
try to provide NgbActiveModal on app.module Bug description: When trying to implement the Modal usin...