Repository navigation
Dismissible alert - long text overlaps close button #24469
Description
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.
Activity
Johann-S commentedon Oct 20, 2017
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 commentedon Oct 20, 2017
Here is a fiddle - https://jsfiddle.net/ggefb28f/2/
Johann-S commentedon Oct 20, 2017
they are no issue in your JSFiddle 😲
Kopyov commentedon Oct 20, 2017
Try to resize browser window ;-) I clearly see that text doesn't wrap when reaching the close button
jipexu commentedon Oct 20, 2017
yes true .. it's wrap but too late ....
i noticed the same behavior
XhmikosR commentedon Oct 20, 2017
/CC @andresgalante: maybe f02f545#diff-98a05acc8656119323ad1630818d4719?
MattJLeach commentedon Oct 20, 2017
Would love to contribute to bootstrap and have submitted a PR to resolve this. #24478
andresgalante commentedon Oct 20, 2017
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 commentedon Oct 20, 2017
Quick workaround:
Not sure though if ($close-font-size / 2) is a good solution.
andresgalante commentedon Oct 20, 2017
@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 outandresgalante commentedon Oct 20, 2017
@Kopyov
Kopyov commentedon Oct 20, 2017
@andresgalante added your version, since it saves some space 😊