Analysis fields in dashboard widget is breaking out (fix included)

  • Resolved Marco Di Bella

    (@mdibella)


    1 year, 8 months ago

    As you can see in the image, the analytics fields in the dashboard widget break out regularly.

    To fix this, the following code in dasboard-widget.css

    #rank_math_dashboard_widget h3, #rank_math_dashboard_widget .rank-math-dashboard-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

    must be modified into

    #rank_math_dashboard_widget h3 {
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

#rank_math_dashboard_widget .rank-math-dashboard-block {
  display: grid;
  grid-template-columns: 50% 50%;
}

    And voila – the display of the fields is now as expected:

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Rank Math Support

    (@rankmathteam)

    Hello @mdibella,

    Thank you for contacting Rank Math and bringing your concern to our attention with a fix.

    The dashboard widget looks to be working perfectly on our end. However, there might be some conflicting issues that are causing the broken layout for the Rank Math Overview dashboard widget.

    You can go for a plugin conflict check initially to see if that’s the root cause or not:
    https://rankmath.com/kb/check-plugin-conflicts/

    Since the CSS does fix the issue for you, we would suggest using the following code snippet instead of editing the core files of the plugin. As you will lose the changes after the plugin update and will need to write the changes again.
    function fix_rm_dashboard_widget_layout(){ echo '<style> #rank_math_dashboard_widget .rank-math-dashboard-block { display: grid; grid-template-columns: 50% 50%; } </style>'; } add_action('admin_head', 'fix_rm_dashboard_widget_layout');

    Here’s how you can add filters/hooks to your WordPress site:
    https://rankmath.com/kb/wordpress-hooks-actions-filters/

    Let us know how it goes. Looking forward to helping you.

    Thread Starter Marco Di Bella

    (@mdibella)

    Thank you for your reply

    However, there might be some conflicting issues that are causing the broken layout for the Rank Math Overview dashboard widget.

    I can definitely exclude a conflict.

    As you may have noticed from the screenshots, the problem occurs in the context of the German translation of the dashboard titles.

    In this case, we are talking about the translation of “total impressions” (“Gesamtimpressionen” in German). As you notice, the German expression is not only longer, but consists of only one word. This in turn leads to the fact that in a certain constellation the width of this term is larger than the intended width of the surrounding div container. Due to the now missing line break (as in English) and also not existing hyphenation, the (now enlarging) container displaces its neighbor

    About the constellation: The problem occurs when the browser size is changed in such a way that the display in the dashboard changes from 3 columns to 4 columns (or from 2 to 3). Especially at the beginning of the change, the individual columns – whose widths adapt responsively – have significantly less space available for their content.

    Other languages do not seem to be affected by this, as the corresponding terms in the widget appear there in English. However, they could be in the future if one decides to translate.

    <span style=”text-decoration: underline;”>Alternative solution proposal 1:</span> (not so good)

    The affected terms are not translated, i.e. remain in English, where the calculation of the word width does not seem to cause any problem at all.

    <span style=”text-decoration: underline;”>Alternative solution proposal 2:</span> (better)

    Instead of the solution mentioned in the former post, the following code is set:

    #rank_math_dashboard_widget .rank-math-dashboard-block > div h4 {
  font-size: 1rem;
  font-weight: 500;
  color: #5a5d70;
  hyphens: auto;
}

    As you can see, only the statement hyphens: auto was added here. This should be the smallest possible intervention and also does not ensure that the div structure is changed.

    Plugin Support Rank Math Support

    (@rankmathteam)

    Hello @mdibella,

    We have created an internal issue and it should be resolved asap.

    In the meantime, if there’s anything else we can help you with, please let us know.

    We are here to assist.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Analysis fields in dashboard widget is breaking out (fix included)’ is closed to new replies.