Dismissible alert - long text overlaps close button

[Kopyov]

Not sure i understand why close button now has absolute positioning in Beta2, but now if text in alert is too long, it overlaps close button. I think we need to add extra right padding to dismissible alert to ensure text and button are always visible.

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[Kopyov]

Here is a fiddle - https://jsfiddle.net/ggefb28f/2/

[Johann-S]

they are no issue in your JSFiddle 😲

[Kopyov]

Try to resize browser window ;-) I clearly see that text doesn't wrap when reaching the close button

[jipexu]

Try to resize browser window ;-) I clearly see that text doesn't wrap when reaching the close button

yes true .. it's wrap but too late ....
i noticed the same behavior

[XhmikosR]

/CC @andresgalante: maybe f02f545#diff-98a05acc8656119323ad1630818d4719?

[MattJLeach]

Would love to contribute to bootstrap and have submitted a PR to resolve this. #24478

[andresgalante]

Yeah, we knew of this when we merged it: #23673

@Kopyov on that PR you'll also find the explanation of why the absolute position.

@MattJLeach I'll check your PR, thanks!

[Kopyov]

Quick workaround:

.alert-dismissible {
    padding-right: ($close-font-size / 2) + ($alert-padding-x * 2);
}

Not sure though if ($close-font-size / 2) is a good solution.

[andresgalante]

@Kopyov you are right! we have a parent selector! That was the exact fix I had in my head. It does create a larger padding to the right, but I'd be ok with it, Do you want to PR it?
maybe ($close-font-size + $alert-padding-x) would do it, I'll test it out

[andresgalante]

@Kopyov

.alert-dismissible {
  padding-right: ($close-font-size + $alert-padding-x);
}

[Kopyov]

@andresgalante added your version, since it saves some space 😊