Since Tagify offers some nice features like reordering by drag and drop, I would like to extend its use beyond tagging texts to using it a default widget for (content) entity reference fields.
Referenced content entities can have longer texts that are pre-wrapped in the CSS by the .tagify__tag>div>* rule. This does not look nice in a form on small screens, as shown in the picture below.
Question: could we abandon the "white-space: pre-wrap;" setting (at least on small screen devices)?
Some other CSS tweaks may also be necessary in this case (like restyling the remove button).
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | TagifyMobile-Gin-2.JPG | 36.8 KB | marksmith |
| #6 | TagifyMobile-Gin.JPG | 32.49 KB | marksmith |
| #6 | TagifyMobile-Claro.JPG | 30.89 KB | marksmith |
| #4 | Screenshot 2025-04-09 at 12.09.12.png | 8.42 KB | gxleano |
| TagifyOnMobile.JPG | 27.98 KB | marksmith |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #4
gxleano commentedThanks @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.
Comment #5
gxleano commentedComment #6
marksmith commentedThank 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:
Comment #7
gxleano commentedComment #8
gxleano commentedComment #9
gxleano commentedThanks for the review @marksmith!
Now it should works as expected.
Comment #10
marksmith commentedThanks 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-textselector 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).Comment #11
gxleano commentedComment #13
gxleano commented