web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Microsoft Dynamics CRM (Archived) / CRM 2011 Dashboard cha...
Microsoft Dynamics CRM (Archived)

CRM 2011 Dashboard charts in Safari appear stretched

(0) ShareShare
ReportReport
Posted on by Daniel Wikell 2,360

Hi

We've been seeing an issue with charts on dashboards for quite some time, when CRM is being displayed in Safari. All the charts appear stretched to something like 4 times their original height and thus are completely unreadable. Any lists in the same dashboard appear with correct height, so it's only the charts.

This issue does not appear in any other browser but Safari 7 in OS X Mavericks.

The only similar issue I could locate was this: https://community.dynamics.com/crm/f/117/t/134533.aspx

but they seemed to have their issue solved by simply installing UR12. We are however on UR18 and have been for a while and the issue is still present there. UR12 was installed back when it was released and the server has since had all the rollups installed in order over the years.

Anyone seeing similar issues with Safari? Thoughts on why UR12 fixed this for other people but not on this installation?

*This post is locked for comments

I have the same question (0)
  • mscrmba Profile Picture
    mscrmba on at

    I suspect this isn't going to help, but given you haven't yet had any other response:

    In the following blog - one user found that re-creating the affected dashboard resolved their issue. (Unfortunately, the other user found it didn't resolve their issue.)  Perhaps you could try it for one of yours?

    social.microsoft.com/.../crm-2011-ur14-onpremise-dashboards-not-rendering-properly-on-mac-osx-with-safari-610-and-70

  • Daniel Wikell Profile Picture
    Daniel Wikell 2,360 on at

    I had that idea of re-creating it as well, just in case it was some problem inherited due to one of the upgrades. Unfortunately it did not help when I tried it, the dashboards both behaved the same.

    I have tracked the problem down to the design choice on how dashboards are rendered in CRM 2011. The chart is displayed in an element with the id 'VizContent'. The chart itself is rendered as a dynamic image from the client sending a request to the server asking it to render a given chart with a specific height and return it as a raw png-image. The height that is requested is the ClientHeight of the VizContent-element, so the problem is mainly that the VizContent element is larger than it's supposed to be and if we could somehow solve that, the chart image would also be in a correct size.

    The height of the VizContent element is determined by the height of the table cell it is rendered within, and this table cell is in turn based on how many rows this section of the dashboard is supposed to span. This is where Safari's real problem lies: the use of rowspans in an html-table.

    Placing one of the charts next to a list within the same dashboard and then inspecting the rendered result using Safari's developer tools it simply looks like Safari 7 doesn't seem capable of rendering tables with multiple rowspans properly. Instead of the first row actually spanning the other rows, they seem to all be placed below the bottom of the first row. This means that the first row that is supposed to span 10 rows times 25px height each (totalling 250px height) appears instead as 250px height + 10*25 equalling 500px height instead, twice the height we really want...

    The result of this behaviour is that for list components in a dashboard, Safari automatically adds a padding-bottom to compensate for the extra ClientHeight, thus making the list appear at the correct size still. The cell for the list is still larger though, which affects the size of the cell next to it (the one with the chart). Since the chart is rendered based off the size of that cell, the chart will take the full height and any automatic compensation won't kick in.

    We seem to be down to three options right now:

    1: Wait for a rollup to come around and fix this (not likely, last UR for 2011 was almost a year ago)

    2: Give up and tell the users that they can't use dashboards in Dynamics CRM

    3: Invent some crafty JavaScript to insert into the chart rendering that can remedy the situation (*gasp* unsupported )

  • mscrmba Profile Picture
    mscrmba on at

    Can you try putting all the charts on chart-only rows (not the same rows as lists) and change the height of just that row?  Create separate dashboards for Safari users....

  • Verified answer
    Daniel Wikell Profile Picture
    Daniel Wikell 2,360 on at

    I tried creating chart-only rows and entire chart-only dashboards but they still appear stretched, so it doesn't look like the list components are what is affecting things.

    The problem seems to be that when cells in a table are defined with rowspan and the following rows that the first row is supposed to span have a height specified, Safari extends the first row but also places the spanned rows below and maintaining their height.

    The problem is very apparent when opening the dashboard designer for a new 2x2 dashboard. Immediately I see that there's a huge gap between the first row and the second row, a gap not present in any other browser. The size of the gap equals 25px * amount of rows spanned and upon inspection of the rendered html, I can see that the empty rows all have height="25" as an attribute.

    I discovered that setting the height to 0 for these rows through the browser developer tools allowed Safari to properly render the dashboard the same way it appears in other browsers.

    As such, I inserted some quick and Dirty JavaScript into the first script tag of the Dashboard.aspx file located at "<installation_directory>\CRMWeb\Dashboards" to find and handle these rows.

    /* Custom hack to fix Safari dashboard problems with charts being stretched */

if(navigator && navigator.vendor && navigator.vendor.indexOf("Apple") == 0 && navigator.userAgent.indexOf("Safari") > -1) {
  var dashboardTableRows = document.getElementsByTagName('tr');
  for (var i = 0; i < dashboardTableRows.length; i++) {
    var row = dashboardTableRows [i];
    
    if(row.attributes.height && row.attributes.height.value == 25) {
      row.attributes.height.value = 0;
    }

  }
}
/*End custom hack*/


    Note for anyone else finding this post: This is considered an unsupported change and may be overwritten whenever you install a new rollup. Also this hack only works with dashboards where all sections in a row have the same height. For dashboards with mixed heights (a large chart on the left hand side section is placed on the same row as a smaller chart on the right hand side) the result is a quirky looking dashboard.

    Since the dashboards that are being used in this installation all are designed with equal height I'm considering this good enough and I'm not going to pursue the problem further.

  • mscrmba Profile Picture
    mscrmba on at

    Hi Daniel,

    Well done for sorting the issue.

    Suggest you formally raise this issue to Microsoft as a bug, if you haven't already, - as an unsupported solution is not ideal.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > 🔒一 Microsoft Dynamics CRM (Archived)

#1
SA-08121319-0 Profile Picture

SA-08121319-0 4

#1
Calum MacFarlane Profile Picture

Calum MacFarlane 4

#3
Alex Fun Wei Jie Profile Picture

Alex Fun Wei Jie 2

Last 30 days Overall leaderboard

Featured topics

Product updates

Dynamics 365 release plans