Widgets: Checkbox overlap on small screens

[passoniate]

Checkbox overlap need to margin-top

[passoniate]

On mobile device

[audrasjb]

Hi, thanks for opening this ticket,

Could you please give some context for this issue?
Would be nice to describe the issue and where it happens (which admin screen, etc.) and on which browser.
It would also be very helpful to provide screenshots for the issue :-)

Cheers,
Jb

[audrasjb]

Thanks @passoniate I can reproduce the issue on my side.
Let's handle that in the next minor as it's a regression from 5.3.

[audrasjb]

This issue occurs only on Categories and Archives widgets.
I think the easier solution is to use proper paragraph wrapper for each input line.

[audrasjb]

Adding good-first-bug keyword, which means that experimented contributors (= people that already contributed to a core patch) should ideally leave few days for first timers to give it a try before adding a patch.

[milindmore22]

Fixes overlapping checkboxes and radio buttons on Chrome Safari and Firefox Browsers on Responsive Screen

[audrasjb]

Moving all unfixed tickets from 5.3.3 to milestone 5.4, as there is no plan for a 5.3.3 maintenance release for now.

[afercia]

This ticket was discussed during today's accessibility bug-scrub. Noticed the checkboxes slightly overlap now on 5.3. On all previous versions a vertical spacing was missing as well, even if there was no overlap. See attached screenshot from WP 5.1.

[afercia]

This ticket was discussed during today's accessibility bug-scrub: the proposed patch appears to target all checkboxes and radio buttons on small screens. Needs to be reviewed carefully as this will change the margins for all these elements within paragraphs.

[audrasjb]

Hi,

Given the last comment and with 5.4 Beta 3 approaching and the Beta period reserved for bugs introduced during the cycle, this is being moved to WP 5.5.

[carriganvb]

@audrasjb I've been looking at this. It seems to me that there are two approaches on the table to solving this. @milindmore22's approach was to change the style causing the squishing of the checkboxes directly. Your suggested approach (if I'm interpreting it correctly) is to surround each row in its own <p> tag, like this:

<p>
  <input1>
  <label1>
</p>
<p>
  <input2>
  <label2>
</p>
<p>
  <input3>
  <label3>
</p>

As opposed the current layout:

<p>
  <input1>
  <label1>
  <br1>
  <input2>
  <label2>
  <br2>
</p>

Am I interpreting your suggested approach correctly? Is your approach still how you'd like to proceed, as opposed to a direct style change?

Thanks,
-Carrigan

[audrasjb]

@carriganvb yes, so this way, we don't have to worry about side effects on all the admin styles.

[jaz_on]

New patch.

[jaz_on]

Hi, this is my first contribution : new patch proposal thanks to @audrasjb help.
Mainly adding <p> and deleting <br />.
Is there anyone who can check and give their opinion on this?
Thanks

Edit : not sure why "resolution" and "status" were set to "invalid" and "accepted to closed". I maybe made a mistake when sending my message... sorry.

[afercia]

Restoring resolution and status.

[SergeyBiryukov]

Thanks for the patches!

Adding paragraphs is a good workaround, but that wouldn't fix the appearance for any custom widgets that might have the same issue.

Given that this issue doesn't happen on the Discussion Settings screen, which uses the same layout as the current Widgets screen (checkboxes and labels not wrapped in paragraphs, but with some extra margin), I think a similar approach could be used here to achieve the same effect.

See 49228.2.diff​ and 49228.2.png​.

[audrasjb]

The last approach makes sense to me @SergeyBiryukov.
It works fine and it won't apply to other admin pages. Thanks.

[SergeyBiryukov]

In 47598:

Accessibility: Widgets: Prevent checkboxes in widget control forms from overlapping on smaller screens.

Props jaz_on, milindmore22, passoniate, audrasjb, carriganvb, afercia, SergeyBiryukov.
Fixes #49228.

[mukesh27]

Hi @SergeyBiryukov please check the attached screenshot for the issue.

The search widget got an issue after the changes in desktop and mobile devices.

[SergeyBiryukov]

Replying to mukesh27:

The search widget got an issue after the changes in desktop and mobile devices.

Thanks for catching that! I cannot reproduce the issue in current trunk though, I think it was fixed in [47593], which moved the input out of the <label> tag in that widget for consistency with others.

That said, let's see if we can also make it work with the previous markup (with the input inside the <label> tag) for any custom widgets out there.

[afercia]

Likely, the display: inline-block; made the input shorter on mobile. Adding width: 100% for the responsive view might fix it

[afercia]

Replying to SergeyBiryukov:

That said, let's see if we can also make it work with the previous markup (with the input inside the <label> tag) for any custom widgets out there.

On it.

I also noticed that the CSS change from [47598] altered the vertical alignment of other labels / inputs. I think that change should be in a media query for small screens, as it was meant to fix something happening on small screens :)

See in the screenshot below. It's not about the increased vertical spacing. It's more about the vertical alignment of the checkboxes and their labels.

[afercia]

49228.3.diff​ does two things:

• Moves the CSS from [47598] to a (max-width: 782px) media query, as that change was meant for small screens.
• Uses a "substring matching attribute selector" to target only the title input label and restore its display property to inline as it was before [47598]. This ensures both wrapping and non-wrapping labels allow the title input field to take all the available width.

To test this patch, you will need a widget with a wrapping label for its title input field.
Hint: for example, you can alter the Search widget HTML by using your browser's dev tools.

See screenshot

[sabernhardt]

Taxonomy label set to display:inline-block is inconsistent with Title label

[sabernhardt]

uses the adjacent sibling selector to target only labels immediately after the input (for checkboxes and radio buttons)

[sabernhardt]

Moving the adjustment within a media query is good. Even though I like having more space between the label and the input/select (when below the label), that would be inconsistent with the special case for the titles.

~49228.4.diff​ targets only labels immediately following the inputs. This should include labels for checkboxes and radio buttons and exclude any others. To make sure it only affects those two, the two types could be specified in another patch.~

[sabernhardt]

Ignore my patch. I forgot to test with checkboxes inside the label.

[afercia]

@sabernhardt your approach makes sense to me! If we agree the extra margin should only be set on checkboxes and radio buttons labels, I think we can target only them?

There are inconsistencies in the markup though. For example:

• in the RSS widget, the checkboxes are wrapped within paragraphs -> extra margins
• in the Categories widget, they aren't

These inconsistencies should be fixed to reliably set some CSS :)

Worth also mentioning multiple checkboxes and radio buttons should be wrapped in a fieldset element with a legend. This should be addressed in a separate ticket.

[sabernhardt]

another option: targeting only the labels immediately after checkboxes and radio buttons, only on smaller screens

[sabernhardt]

grouping RSS widget checkboxes within one paragraph tag

[sabernhardt]

That said, let's see if we can also make it work with the previous markup (with the input inside the <label> tag) for any custom widgets out there.

@afercia 49228.4.diff and now 49228.5.diff​ do not add margin to any labels around checkboxes that still might be in custom widgets. 49228.3.diff did that already. However, if a custom widget form has a checkbox inside the label, it's quite possible there's a text input (other than title) inside a label as well. I updated my previous patch in case the styling should exclude the other labels. 49228.5.diff would ignore labels following hidden inputs and would add the styles only on labels following their checkboxes and radio buttons on smaller screens.

49228.rss-widget.diff​ combines all the RSS widget checkboxes within one paragraph tag. This is separate from the styles patch because I think it would be better to leave the multiple paragraphs instead (at least for now). The widget form has a little extra space compared to other core widgets, but some custom widgets have checkboxes in separate paragraphs, too. This patch could provide value as a starting point for the fieldset markup later.

[afercia]

@sabernhardt thanks!

but some custom widgets have checkboxes in separate paragraphs, too

I did (quickly) check the other widgets and couldn't find other cases of multiple checkboxes each one wrapped in a paragraph. Did I miss something?

[sabernhardt]

I didn't see any other core widgets with multiple paragraphs. Plugins' custom widgets with them include "Recent Posts With Thumbnails" and a "Contact Details" widget.

[afercia]

Interesting. I haven't seen a so tall widget form yet (~3000 pixels).

More interestingly, when there are very long labels the display: inline-block make them drop below the checkbox. See attached screenshot.

This can happen also on the core widgets, depending on the language and the length of the translated labels.

I'm afraid display: inline-block from the original CSS change can't be used in the first place. What about adding the margins to the checkboxes/radios themselves? See 49228.6.diff​

[afercia]

1. long labels in custom widget without display: inline-block 2. with display: inline-block 3. core widget with longer label and with display: inline-block

[sabernhardt]

adding .editwidget class for accessibility mode checkboxes and radio buttons

[sabernhardt]

I like the margin on the input. I finally looked at "Accessibility mode" and the margin is needed there, too.

[sabernhardt]

Widget Accessibility mode checkboxes before and after 49228.7.diff

[afercia]

In 48389:

Accessibility: Widgets: Further improve spacing between Widgets checkboxes and radio buttons in the admin interface.

Follow-up to [47598]:

• further improves the spacing after [47598] by better scoping the CSS to avoid layout glitches for custom widgets
• changes the RSS widget form to wrap the checkboxes in one single paragraph

Ideally, multiple related checkboxes and radio buttons should be grouped within a fieldset element with a legend. This will be addressed in a new Trac ticket.

Props mukesh27, SergeyBiryukov, sabernhardt.
Fixes #49228.