WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#36158 closed defect (bug) (duplicate)

Dashboard widgets with configure links causing layout issue with screen options

Reported by: catchmyfame Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.6
Component: Administration Keywords:
Focuses: ui Cc:
PR Number:

Description

I discovered that dashboard widgets that have a configure link are rendering HTML that causes them to be misaligned in the screen options area (see first attached image).

Apparently widgets that have a configure link are generating the link not just on the widget, but below their associated screen option automatically by WordPress. Ex:

<span class="postbox-title-action"><a href="/wp-admin/index.php?edit=blc_dashboard_widget#blc_dashboard_widget" class="edit-box open-box">Configure</a></span>

In the screen options these links are semi-hidden with the following CSS:

.wp-admin .edit-box {
    display: block;
    opacity: 0;
}

This CSS comes from wp-admin/index.php (I'm not sure where the actual CSS is being included from):

<style type="text/css">
	.postbox .button-link .edit-box { display: none; }
	.wp-admin .edit-box { display: block; opacity: 0; }
	.hndle:hover .edit-box, .edit-box:focus { opacity: 1; }
	#dashboard-widgets h2 a { text-decoration: underline; }
	#dashboard-widgets .hndle .postbox-title-action { float: right; line-height: 1.2; }
</style>

This changes the opacity of the span and link, but the elements still take up space since only the opacity is being changed. I'm not sure why these spans exist in the screen options, as they seem to be the same spans on the widgets that displays the configure link.

Solution: They can be hidden via CSS

.metabox-prefs span.postbox-title-action {
    display: none;
}

or via modifying the CSS rules for .metabox-prefs label and adding vertical-align:top, however I recommend the display: none rule as the vertical alignment rule adds extra space below the options and the default layout and behavior is more consistent with the display:none (see second attachment).

I suppose the bigger question is why are configure links being rendered up in the screen options in the first place?

Attachments (2)

wp0.png (18.1 KB) - added by catchmyfame 4 years ago.
Screen options with configure link causing layout issue
wp1.png (16.8 KB) - added by catchmyfame 4 years ago.
Screen options with configure link fixed via CSS

Download all attachments as: .zip

Change History (3)

@catchmyfame
4 years ago

Screen options with configure link causing layout issue

@catchmyfame
4 years ago

Screen options with configure link fixed via CSS

#1 @swissspidy
4 years ago

  • Focuses administration removed
  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Looks like this is the same underlying issue as reported in #35021. It wasn't caught there, so thanks for reporting this!

Note: See TracTickets for help on using tickets.