Rendering glitches in form ToOnePicker
Closed this issue · 7 comments
After update to the latest library I found that entity picker ToOnePicker used in form pickers changed rendering from flat to button.
Styling is a matter of personal taste, I am not complaining :-) However the change introduced visible rendering glitch on poup, where button and menu are not aligned (top-down is off by one pixel).
I verified also fulcro-rad-demo and found that Category is also impacted:
However enumerated values State or User Role on Invoice are not :
The reason is that while enumerated values use ui active visible searach selection dropdown, ToOnePicker wraps it with ui small menu
I found the change was introduced by @holyjak in a5fa604
I feel that explicit override of :marginTop suggests that menu element is not being used with its original intent.
Suggested solution
- (if possible) use the same classes in ToOnePicker
Personally I find buttons in forms distracting but as I wrote, YMMV. Would you consider making ToOnePicker's class a parameter so one can turn it off? Thank you.
God I hate CSS.
I agree that all of the visual tweaks should be able to be overridden. I've fixed the merge so you can tweak that via the field style config :input/props option.
See commit 8ea240d.
Deployed as 1.3.4-SNAPSHOT. Confirm that works for you and I'll cut a release.
And I screwed it up...just a min.
See 936fd0f.
Redeployed.
If you want to contribute a patch for the one-pixel problem, feel free. We were trying to get the darn thing to line up properly in other ways.
Hi @danskarda, nice meeting you here! I believe there is special circle of hell where people have to forever try to get things aligned in CSS...
God I hate CSS.
I can related to that.
If there was no CSS there would be flying cars. Instead we are aligning pixels...
What I learned:
- you have to wrap ui-dropdown to attach buttons
- however any wrap I tried messes up rendering of standalone dropdown
- you can attach buttons or fancy labels to input. However ui-dropdown is already an input with some attachments, so it is hard to attach buttons to something with attachments... So you can have A (input with attached buttons or icons) or B dropdown but not both A + B together 😢
- menu is not suitable for wrapping inputs and buttons together
- finally I succeeded using segments and a little bit of explicit styles (I think it looks better then menu solution).
My solution handles both cases separately:
- Single non-mutable ui-wrapped-dropdown is rendered without wrapping container.
- Mutable dropdown with additional buttons uses segments with a little bit of
{:style ...}
My solution is in a branch danskarda@65d343c I tested the solution with my humble Fulcro RAD app and Fulcro RAD Demo. So please test it also on your applications. I hope it does not break anything 🤞
The victory in CSS is never 100% so there are still some glitches
It seems the first one is probably caused by non-integer widths. But I do not want to die on this hill today.
That looks promising..I'm with you on not wanting to die on the hill :)
If you want to open a PR I'll do more testing on it and see if I find anything.