Semantic UI Modal Height too long

Question

I am using semantic UI to create a webpage (No React, NPM or anything fancy, just plain HTML/CSS). I am trying to add modal to my page but it behaves very strange as the modal height is too long. I don't have any other framework like Bootstrap included in my code.

How it behaves:

How it is supposed to behave:

Semantic UI Version: 2.4.2

Is Semantic UI Installed correctly? Yes, other components work.

My Code

HTML:

<div id="myModal" class="ui basic modal">
        <div class="ui icon header">
            <i class="archive icon"></i>
            Archive Old Messages
        </div>
        <div class="content">
            <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
        </div>
        <div class="actions">
            <div class="ui red basic cancel inverted button">
                <i class="remove icon"></i>
                No
            </div>
            <div class="ui green ok inverted button">
                <i class="checkmark icon"></i>
                Yes
            </div>
        </div>
    </div>

JS:

$('.ui.basic.modal')
  .modal('show')
;

What I tried till now:

1. #myModal { position: relative;} and then adding id to my modal, as explained in this answer: https://stackoverflow.com/a/40774996/10934182
2. body{ max-height: 100vh; } body{ max-height: 100vh; } as explained here: semantic-ui modal stretching window height
3. Code explained in this Fiddle (Not my fiddle): http://jsfiddle.net/MrLogical/2hda8e18/

Thanks!!

Answer 1

In your JSfiddle I noticed your div inside of .modal-content has min-height: 1000px . I removed this and the modal is normal height now.

Answer 2

This is not the problem with the height of the modal. This is because of the version of 'semantic-ui-css' latest version. You can solve this issue by installing the 2.2.14 version of the semantic-ui-css *

npm install semantic-ui-css@2.2.14

* It did for me and many other. So hope it'll work for you also