[wp-trac] [WordPress Trac] #36158: Dashboard widgets with configure links causing layout issue with screen options

[WordPress Trac]

#36158: Dashboard widgets with configure links causing layout issue with screen
options
--------------------------------+-----------------------------
 Reporter:  catchmyfame         |      Owner:
     Type:  defect (bug)        |     Status:  new
 Priority:  normal              |  Milestone:  Awaiting Review
Component:  Administration      |    Version:  trunk
 Severity:  normal              |   Keywords:
  Focuses:  ui, administration  |
--------------------------------+-----------------------------
 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?

--
Ticket URL: <https://core.trac.wordpress.org/ticket/36158>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform