Semantic-ui: [Modal] with detachable=false is not working with 2.3

[ZyoxNet]

Hi,

with 2.3 the undetachable modal is not working correctly anymore.

See https://jsfiddle.net/ca0rovs3/221/

[foreveRush]

Hi, I also have css issue with Controlled modal... After updating to version 2.3

[manasilele]

$('.ui.tiny.modal').modal({detachable: false, centered: true }).modal('show');

If detachable:false is removed, then the modal is displayed in the center. Otherwise it aligns itself on the top right.
Has anyone found a fix yet?

[jlukic]

I'll look at this in patch.

[hluz]

bump!

[Jielde]

does not work with patch 2.3.2 :(

[ShawnTheBeachy]

Ugh... This bug just brought development of one of my pages to a grinding halt.

[manasilele]

@tastesliketurkey
If your page does not postback and you have all the data pulled using ajax, you can just avoid having detachable false

[ShawnTheBeachy]

@manasilele Yeah, I need to post back, and the modal contains data I need. 🙁 I got around it by just manually rendering the dimmer and modal where I want them, but it still would have been nice to stick with the default implementation.

[manasilele]

@TastesLikeTurkey does it align in the center though?

[ShawnTheBeachy]

Do you mean now that I'm rendering it manually? If so, then yes. Here's what I'm doing:

// Inside my form. I'm using Razor Pages, so this is not rendered if the modal shouldn't be shown,
// but you could also use JavaScript to control the visibility.
<div class="ui dimmer modals active" style="position:fixed;">
    <div class="ui active modal">
        // Modal content
    </div>
</div>

[AlexanderZnaydyuk]

I spent a whole day trying to fix my modals and bugs caused by 2.3 version of semantic.

The best solution at the moment is to make a rollback to 2.2.

npm install [email protected]
gulp build

Modals are fixed, labels displayed correctly.

[melkalakhi]

Try this :
$('#your-modal-id').modal({ useFlex: false}).modal("show");
$('.ui.dimmer.modals').appendTo('#your-form-id');
$('.ui.dimmer.modals').css('overflow', 'scroll');
$('#your-modal-id').css('position', 'relative');