WordPress.org

Make WordPress Core

Opened 19 months ago

Last modified 9 days ago

#37451 assigned defect (bug)

Widget Sidebars Title text overflow

Reported by: gk.loveweb Owned by: ovann86
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Widgets Keywords: has-screenshots good-first-bug has-patch needs-testing
Focuses: ui, administration Cc:

Description

Title text of widget section overflow

Attachments (6)

Widget section title.png (73.4 KB) - added by gk.loveweb 19 months ago.
Widget section title text overflowing out of div.
37451.patch (1.8 KB) - added by sabrib 19 months ago.
Align spinner to right (above arrow) and limit title width
37451.diff (1.8 KB) - added by ovann86 19 months ago.
Updated original patch to trunk root directory
widgets.css (10.7 KB) - added by ianhayes94 17 months ago.
37451.2.diff (1.8 KB) - added by xkon 9 days ago.
Minor css changes to 37451
37451.2.gif (187.0 KB) - added by xkon 9 days ago.
preview

Download all attachments as: .zip

Change History (22)

#1 @bravokeyl
19 months ago

  • Keywords reporter-feedback added

Hi @gk.loveweb,

Can you give little more info on this?

#2 @bravokeyl
19 months ago

Oops! My bad, duplicate comment.

Last edited 19 months ago by bravokeyl (previous) (diff)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


19 months ago

#4 @afercia
19 months ago

A bit more details and also a screenshot perhaps could help :)

@gk.loveweb
19 months ago

Widget section title text overflowing out of div.

This ticket was mentioned in Slack in #core by gkloveweb. View the logs.


19 months ago

#6 @swissspidy
19 months ago

  • Focuses accessibility removed
  • Keywords reporter-feedback removed

#7 @afercia
19 months ago

  • Keywords has-screenshots needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from Widget Title text overflow to Widget Sidebars Title text overflow
  • Version 4.5.3 deleted

Thanks very much @gk.loveweb. So, while the single widgets title has some CSS (ellipses) to take into account very long titles, seems the sidebar titles need some love:

https://cldup.com/ws-FGqGfLT.png

By the way, when changing the widgets order dragging them, a spinner appears after the sidebar title:

https://cldup.com/bssNkXndv1.png

so this probably needs a different solution. Maybe just let the title go in a new line in the (rare) case the sidebar title is very long?

#8 @gk.loveweb
19 months ago

Hi @afercia I have modified core files in local system, made something like this.

We can move/show spinner to right side in place of arrow sign, until the completion of widget order ajax request.

http://i.imgsafe.org/ce9d6331b2.jpg

for long titled widget sidebar, it will show in max two lines and for full title view i placed text in <h2 title=""> attribute. currently there is no tooltip on section title.

http://i.imgsafe.org/ce9d7201d3.jpg

I have captured both screenshots during ordering widgets.

hope this will be useful. :)

#9 @afercia
19 months ago

Hi @gk.loveweb personally I like the idea of moving the spinner to the right so it would be displayed always in the same, exact, place regardless of the Sidebar title length. Nice idea :) It would temporarily hide the toggle arrow but I think that's not a big deal. Let's see also what others think about it.

As per the title attribute, in the last releases WordPress has removed a lot of title attributes and for good reasons. I don't think that's necessary to add a new one.

@sabrib
19 months ago

Align spinner to right (above arrow) and limit title width

This ticket was mentioned in Slack in #core by ovann86. View the logs.


19 months ago

@ovann86
19 months ago

Updated original patch to trunk root directory

#11 @ovann86
19 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

Changes look good to me, noting that it is single line - not two lines shown in images provided by @gk.loveweb

One potential UX issue with this approach is you briefly loose the 'expanded' context when the spinner replaces the 'expanded' icon. I don't think it's an issue though and quite like the spinner being in the same spot.

Updated patch to start from the root directory.

#12 @gk.loveweb
19 months ago

Thanks @ovann86 single line also looks good. :)

#13 @sabrib
19 months ago

@ovann86 Thanks for the review (and for recreating the patch :) )
I did not find a clean/css only solution to make it work in 2 lines.
For the UX issue, It seems that the spinner can only be displayed when the sidebar block is expanded but I got your point.

@ianhayes94
17 months ago

#14 @DrewAPicture
8 months ago

  • Owner set to ovann86
  • Status changed from new to assigned

Assigning ownership to mark the good-first-bug as "claimed".

#15 in reply to: ↑ description @pankajmohale
3 months ago

Replying to gk.loveweb:

Title text of widget section overflow

Hi,

Try below code and let me know if it works or not.

<?php
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
  echo '<style>
    body .sidebar-name h2, body .sidebar-name h3 {
            white-space: normal;
        } 
  </style>';
}

@xkon
9 days ago

Minor css changes to 37451

@xkon
9 days ago

preview

#16 @xkon
9 days ago

37451.2.diff has some really minor CSS differences from the last patch as to not hiding the Expand arrow when the spinner gets visible.

I'm personally more comfortable with not suddenly losing something from my sight. Other than that nothing changed, I also included a gif preview so you can check it more easily. @afercia / @ovann86 any thoughts? :)

Note: See TracTickets for help on using tickets.