E107: BS4 - Alerts not showing

[Moc]

In a bootstrap 4 theme, alerts (info, warning, error messages) are not visible on frontend because there is a CSS conflict with transitions.css from Bootstrap 4.

.fade:not(.show) {
    opacity: 0;
}

If I add the following to theme.php, it is fixed:

.s-message.fade {
opacity: 1 !important;
visibility: inherit;
}

I (Jimmi! 😄 ) took this code from the vstore plugin.

I am not sure if this is the right fix, so I created an issue for it. Perhaps there's a cleaner way to do it as this is more a bandaid.

[Moc]

Reported by @Jimmi08 before here: https://github.com/e107inc/e107/issues/2898#issuecomment-354667643

[CaMer0n]

@Moc Would adding that to e107.css fix it?

[Moc]

@CaMer0n Yeah it did, I just wasn't sure if that was the best solution. It seems more of a band aid than actual fix, but I personally don't know another way to fix it.

[CaMer0n]

@Moc Do you know where the conflict occurs in e107?

[Moc]

Not sure if I understand your question. See my initial issue report. It conflicts with the transitions.css file from Bootstrap 4.

[Jimmi08]

I can confirm that this is still the problem.

Next solution is for bootstrap 4 not insert class fade in for alert boxes. Problem is combination s-message + fade classes

[CaMer0n]

@Moc Is this still an issue? The alerts display for me. How about you?

[Moc]

Still the same issue for me. I see it works on the boostrap4 theme, but I am getting the same CSS conflict for my own custom theme (www.nextgeneration.city)

I have this is in my theme.php as a temporary fix. If I delete it, the alerts are not shown:

// Fix for alerts not showing. Conflict with BS4 (transitions.css). 
e107::css("inline", "
    .s-message.fade {
opacity: 1 !important;
visibility: inherit;
}");

[Jimmi08]

It works for BT4 because there is the same fix in style.css:

/* fix for message box */
.s-message.fade {
opacity: 1 !important;
visibility: inherit;
} 

[CaMer0n]

@Moc @Jimmi08 So why don't we simply move it into e107.css ?

[Jimmi08]

I am not sure if this is the right fix, so I created an issue for it. Perhaps there's a cleaner way to do it as this is more a bandaid.

neither me.

[Moc]

See my answer and quote above. I don't know if that's the best way. Sure it will fix it but I'm no expert in CSS to determine if that's the cleanest way to do it.

[CaMer0n]

@Moc Sorry, I should have read the whole thread. Commit coming.