Allow button text issue
Permalink Browser Info Environment
Depending on how long the text of the deny button is, a longer text (one long word or many words) of the allow button may be not properly centered on the button, but overlap the right end of the button.
(Tested with current versions of Firefox, Chrome and Safari on Mac)
(Tested with current versions of Firefox, Chrome and Safari on Mac)
| Type: | Discussion |
|---|---|
| Status: | Resolved |
Thanks for you speedy reply!
Please note that the issue can only be seen on Opt-in if the text of the deny button is short and the text of the allow button is long. If the text labels of both buttons are long, the effect cannot be seen. Your image shows text of both buttons of equal length, so it's displayed correctly. If you rename the buttons as in the example attached, you should be able to reproduce the issue.
Tested now on a clean 8.4.0 test installation with Elemental theme.
(Might have to do with min-width: 140px and white-space: nowrap in cookieconsent.min.css)
Please note that the issue can only be seen on Opt-in if the text of the deny button is short and the text of the allow button is long. If the text labels of both buttons are long, the effect cannot be seen. Your image shows text of both buttons of equal length, so it's displayed correctly. If you rename the buttons as in the example attached, you should be able to reproduce the issue.
Tested now on a clean 8.4.0 test installation with Elemental theme.
(Might have to do with min-width: 140px and white-space: nowrap in cookieconsent.min.css)
I uploaded version 1.6.8 which disabled flex box for the compliance buttons. Can you test if that works for you? You might need to hard-refresh the page in order to force load the (updated) .CSS file.
Works perfectly now, thanks!
In any case, I tried to replicate the issue, but it seems to me that your (themes) CSS is conflicting, as it's not the case in Elemental. See attachment.