[Modal] Modal Content Oversized when using components

[janielMartell]

When trying to use the modal component I encountered a problem where the content (div with content class) is oversized. It's very unclear as to what dependencies each component needs so I might be missing one. It would be nice to add each components dependencies this to the documentation or just make the component have everything it needs from the get go.

link to example: https://codepen.io/janielmartell/pen/qKemGg

[whoisryosuke]

It was a bit tricky to figure out 😅, but you're missing the reset CSS. That one, along with the site CSS, should always be included on every page at least once.

Here's a pen with all the component CSS files you need 👍
https://codepen.io/whoisryosuke/pen/JarMrV

I usually just use the entire minified CSS file, makes it easier ⚡️
https://codepen.io/whoisryosuke/pen/xaXpLB

And in case you'd like, this is my base template for Semantic UI on Codepen 🛠
https://codepen.io/whoisryosuke/pen/ZxNWzq

---

The Reset page does mention it should be included when using any component (albeit out of the way and not as user-friendly as directly listing).

I'm not sure how to handle the documentation page and including a list of dependencies. Not sure I've seen any other pages include a list.

Maybe it'd fit on the Usages tab, underneath Behavior in a new "Required Components"/"Required CSS" section?

[janielMartell]

Thank you very much!

…

On Thu, Sep 6, 2018, 2:07 PM Ryosuke ***@***.***> wrote: You're missing the reset CSS <https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/reset.min.css>. That one, along with the site CSS, should always be included on every page at least once. Here's a pen with all the component CSS files you need 👍 https://codepen.io/whoisryosuke/pen/JarMrV I usually just use the entire minified CSS file, makes it easier ⚡️ https://codepen.io/whoisryosuke/pen/xaXpLB And in case you'd like, this is my base template for Semantic UI on Codepen 🛠 https://codepen.io/whoisryosuke/pen/ZxNWzq ------------------------------ The Reset page <https://semantic-ui.com/globals/reset.html> does mention it should be included when using any component (albeit out of the way and not as user-friendly as directly listing). I'm not sure how to handle the documentation page and including a list of dependencies. Not sure I've seen any other pages include a list. Maybe it'd fit on the Usages tab, underneath Behavior in a new "Required Components"/"Required CSS" section? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6469 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Ai6xDdifr7mtf3vKpeMhQUtv-QAA2NcGks5uYWR-gaJpZM4VGcFR> .