iam
Can't make phx-no-feedback:hidden work
Hi all,
the class phx-no-feedback:hidden is applied correctly in the DOM but I got no style for it in the css.
Should I add something special in the tailwind config to generate the css for that class?
The LV docs says:
Now, any DOM container with the phx-feedback-for attribute will receive a phx-no-feedback class in cases where the form fields has yet to receive user input/focus. Using new CSS rules or tailwindcss variants allows you errors to be shown, hidden, and styled as feedback changes.
Which is not helpful. Maybe the LV docs could link to the relevant part in the Tailwind docs?
Or maybe this should work OOTB and I just have to adapt my configuration.
Thank you
Marked As Solved
Ankhers
You may nor may not be the same person that asked on IRC, so I will also answer here.
In a freshly generated Phoenix 1.7 application, there is a section in the tailwind.config.js file that has additional variants listed. I will just copy the relevant section here.
plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
There are also more things in the config that may be worth looking at. So it may be worth generating a brand new project just to see what is there in case it is relevant to you.
Also Liked
LostKobrakai
There isn‘t. The „plugins“ are a handful lines of js code in the tailwind.config.js, which for the most part tells tailwind how to scope css selectors to the presence or lack of presence of the classes liveview will add to inputs or paren dom nodes.
E.g. phx-no-feedback:hidden converts to
.phx-no-feedback.phx-no-feedback\:hidden,
.phx-no-feedback .phx-no-feedback\:hidden{
…
}
as configured by
plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
…
The plugins make using tailwind in the context of liveview simpler, but the underlying css is not coupled to tailwind at all.
Ankhers
In that case you are going to need to look at the compiled app.css file that is output after being run through tailwind. That will have all of the styles that tailwind generates for you.
AlchemistCamp
Ah, right. I see what the variant is doing now, thanks.
What I’m trying to figure out is what classes I should add to my templates to hide the appropriate fields. I guess the question I should have asked is, “for which classes or selectors should I hide so as not to show feedback for fields a user hasn’t interacted with yet?”
Last Post!
AlchemistCamp
The solution was trivial! All I needed to add to my global scss file was:
.phx-no-feedback .phx-no-feedback\:hidden { display: none; }
There wasn’t any more complexity than that to how LV updates classes on tags inside of one with phx-feedback-for set.
Trending in Questions
Other Trending Topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #elixirconf-us
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex









