Semantic UI Modal Dimmer Remains After Hiding

1

I have a template that contains a login form inside a semantic UI modal (notably the useraccounts:semantic-ui package). On submission, I made it so that it hides the modal if the login is a success. It does hide the modal, however, it keeps the dimmer there.

main.html

<template name="LoginForm">
	<i class="close icon"></i>
	<div class="ui segment">
		{{> atForm}}
	</div>
</template>

<template name="main">
	{{#unless currentUser}}
	<div id="loginModal" class="ui modal">
		{{> LoginForm}}
	</div>
	{{/unless}}
</template>

main.js

Template.atForm.events({
   'submit #at-pwd-form'() {
      if (Meteor.userId() !== null) {
         $('#loginModal').modal('hide');
      }
   }
});
2

I have the same problem, have you found any solution yet?

Your support post here, 1 year no one care to reply. Meteor seems dead. Itā€™s like 10 active developer is using it and around this forumā€¦ Sad sceneā€¦

3

No need to be dramatic, questions go unanswered in every community if there are nobody around at the time who knows the answer at the to the question, regardless of the number of active users.

Now, where in the DOM is the dimmer? What I think happens is that semantic moves the modal outside the normal flow, and there becomes a conflict between what blaze does with the DOM and what Semantic tries to do. Combining the semantic jquery commands like hide and open with blazeā€™s conditional rendering of the modal could cause issues. Iā€™d therefore use one or the other.

Try removing the unless clause, keeping the modal there, and open the modal with jquery in an onRendered callback.

4

HI,

Well you may say Iā€™m being dramatic. But Iā€™m with Meteor for years and I do see a very active forum getting slower and slower then more and more unanswered post. That is true. I donā€™t wish this to happen but it does.

Iā€™m still with Meteor and I do hope community will be more active and involve.

For now, thank you very much for your suggestion. Appreciate it much.

Regards,
Lesz

5

We gotta turn the tide then, donā€™t we :wink: There is no reason to be pessimistic about Meteor at the moment, with the release of 1.7, great integration with Apollo (where all the hype is at the moment) and other things just remaining rock steady. The framework itself is better than itā€™s ever been, but steady iteration on working software may not generate as much community activity as something brand new and shiny.

Also keep an eye on Showcase your awesomeness v2 if you are feeling that nobody uses it.

4 Likes
6

Iā€™ll get my problem solve then Iā€™ll come back with update and more on Meteor new movement. Thanks again.

7

Not sure if you checked the full settings for UI Modal at https://semantic-ui.com/modules/modal.html#/settings, specifically using detachable: false and / or the dimmerSettingsā€¦

8

I tried detachable: false and it doesnt work as it should. The modal is below/under the dimmer. The modal also not floating and it just flow and normal DIV.

9

Ah, that last one (modal under the dimmer) is a bug on the recent versions of Semantic UI. The modal element is missing a css position statement. Adding position: relative; to the div should fix it. (z-index is ineffective for elements without position)

10

it doesā€™nt work in with ā€œsemantic-ui-emberā€: ā€œ^3.0.3ā€ too,
modal shows under the dimmer and position + z index doesā€™nt help (

div.ui.modal.popup-template {
position: relative !important;
z-index: 1000000 !important;
width: $popup-width;
padding: $popup-padding;
border-radius: 0;
}

togglePopUp() {
const popup = $(ā€™.ui.modal.popup-templateā€™);
popup.modal({ detachable: false }).modal(ā€˜toggleā€™);
},