Search code examples
javascriptjqueryhtmlcsssemantic-ui

Semantic UI Modal Height too long

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:

Image for my code

How it is supposed to behave:

Standard Image

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; } as explained here: semantic-ui modal stretching window height
  3. Code explained in this Fiddle (Not my fiddle): http://jsfiddle.net/MrLogical/2hda8e18/

Thanks!!

Solution

  • 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.