WordPress.org

Make WordPress Core

Opened 16 months ago

Last modified 2 weeks 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 (4)

Widget section title.png (73.4 KB) - added by gk.loveweb 16 months ago.
Widget section title text overflowing out of div.
37451.patch (1.8 KB) - added by sabrib 16 months ago.
Align spinner to right (above arrow) and limit title width
37451.diff (1.8 KB) - added by ovann86 16 months ago.
Updated original patch to trunk root directory
widgets.css (10.7 KB) - added by ianhayes94 14 months ago.

Download all attachments as: .zip

Change History (19)

#1 @bravokeyl
16 months ago

  • Keywords reporter-feedback added

Hi @gk.loveweb,

Can you give little more info on this?

#2 @bravokeyl
16 months ago

Oops! My bad, duplicate comment.

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

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


16 months ago

#4 @afercia
16 months ago

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

@gk.loveweb
16 months ago

Widget section title text overflowing out of div.

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


16 months ago

#6 @swissspidy
16 months ago

  • Focuses accessibility removed
  • Keywords reporter-feedback removed

#7 @afercia
16 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
16 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
16 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
16 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.


16 months ago

@ovann86
16 months ago

Updated original patch to trunk root directory

#11 @ovann86
16 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
16 months ago

Thanks @ovann86 single line also looks good. :)

#13 @sabrib
16 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
14 months ago

#14 @DrewAPicture
5 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
2 weeks 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>';
}
Note: See TracTickets for help on using tickets.