Geek Answers Handbook

Semantic-ui modal size continues to expand to page height

I am trying to implement a basic modal, but its size grows to the height of the page.

Launch Code:

$('.ui.modal.apply-modal').modal('show');

Modal Code:

 <div class="ui modal apply-modal"> <i class="close icon"></i> <div class="header"> Modal Title </div> <div class="content"> facebook </div> <div class="actions"> <div class="ui button">Cancel</div> <div class="ui button">OK</div> </div>

Modal window

+7
source share
3 answers

It turns out that the Bootstrap package contradicts the Semantic-UI that I use.

Just do:

 meteor remove twbs:bootstrap

Things resolved. Of course, this is not an ideal solution, but in any case, I should not use both frameworks at any time.

enter image description here

Well, after about two hours of debugging ....

+7
source

I had the same problem. My solution was to modify the CSS of the modal component from the semantic interface as follows:

  .modal { position: relative;} or #myModal { position: relative;} <div id="myModal" class="ui small modal"></div>

This works for me, I hope to help you. I agree with Michael Hait, this question may arise for any conflict between Boostrap and Semantic UI

+2
source

This is because the rules of semantics and bootstrap Modal CSS are contradictory. So what you can do is simply assign the following CSS rules to your main div class or wrapper

 top: auto; bottom: auto; right: auto; left: auto;
0
source

More articles:


All Articles