Troubleshoot: Focused Styling hidden by Overflow
When styling the check Checkbox list inside a Dropdown modal, I faced the issue where part of the focused styling on the checkbox gets hidden by the overflow-y: auto on the scrollable Dropdown menu.
The focused styling gets hidden because the focused ring on the checkbox has an offset that goes into the padding of the containing parent. We cannot set overflow-x: visible with overflow-y: auto according to w3c spec.
TL DR: Scroll down to read Approach 3 for the final solution!
Approach 1 —with Absolute / Relative Positioning
I tried making the hidden focused ring styling to bleed through the parent container according to this CSS-Tricks on popping out of hidden overflow by making the checkbox absolutely positioned, which takes the checkbox out of the page flow.
Since the absolutely positioned checkbox is placed relative to the closest relative parent, the relative container needs to be outside of the overflow-y: auto layer in order not to cut off the focused ring.
However, it also poses the issue where the absolutely positioned checkbox does not scroll along the dropdown menu since it has to be placed relative to the parent outside of the overflow scroll. It is not an issue for the popover shown over the hidden overflow , but it is not the right solution in our use case.
Approach 2 — Add Padding
The second intuitive approach coming into my mind is to add padding to the checkbox list, so that the focused styling is not hidden due to the extra space from the added padding.
The downside of this approach is that, the checkbox list becomes mis-aligned with other elements, such as the Input element. We will need to add space to other elements on the Dropdown menu in order to achieve perfect vertical alignment. This makes the alignment on the layout more error prone.
Approach 3 — Negative Margin
The final working solution that allows the focused outline to show is to add negative margin -mx-3 to override the parent padding. At the same time, we add the same padding px-3 to align the checkboxes.
This approach not only allows the focused styling to show above its own padding, it also has the added benefit of aligning the scrollbar to the right end too!
The working examples can be seen on the Tailwind Playground: https://play.tailwindcss.com/UPWRIciuT3