- Issue created by @marksmith
- First commit to issue fork.
- @gxleano opened merge request.
- 🇪🇸Spain gxleano Cáceres
Thanks @marksmith to report this issue.
I've introduced some changes which are going to fix the problem in mobile.
See evidences:
Maybe you could take a look at check if everything is working fine in your end.
- 🇮🇪Ireland marksmith
Thank you, @gxleano. I've tested quickly the emendations, by pasting the new css code adjustments into tagify.css.
Since part of the css code is loaded into tagify via cdn (tagify.min.css, as defined in libraries.yml), there was some interaction with the max-width set there to 100%, for both the .tagify and the .tagify>div selectors. (I've tried to remove interference by unflagging the css grabbed from the cdn).
Anyway, there is, as far as I can see, still some room for improvement.
1. In the Claro theme, the tagify__tag-remove-button shrinks.
2. In the Gin theme, the new max-width settings are not applied correctly (remove button is also missing for long texts). If I force it, (via !important), the max-width is also set in case of texts where it shouldn't (like short tags).See the attached screenshots for the same form:
In Claro:
In Gin:
- 🇪🇸Spain gxleano Cáceres
Thanks for the review @marksmith!
Now it should works as expected.
- 🇮🇪Ireland marksmith
Thanks for your efforts! Almost there, except that the ellipsis (...) also appears for short tags (where it shouldn't), but only in case the tag contains no other included elements, like ID or info label. See attached screenshot (Gin and Claro is the same).
I think it's a
.tagify__tag-text
selector issue (set to max-width: 75% !important), which should be 100% if there are no other included elements, and 75% with included elements (like info label).