Can't eliminate vertical and horizontal scroll bar on embedded canvas dashboard

Hi Sam,

Can you try adding to your code, the option scaleCanvasTabs: false, where you're loading the dashboard, e.g.

yellowfin.loadDashboard({

dashboardUUID: '0ccb0402-a33e-47af-a324-f3ce9db8b250',

element: document.querySelector('div#dashDiv'),

showToolbar: false,

scaleCanvasTabs: false

});

In my testing, I also see extra scroll bars. 2 in Chrome (for vertical and horizontal), and 1 in Firefox (vertical only). If I use set scaleCanvasTabs to false, that seems to fix the issue for me.

Kind regards,

Chris

Thanks for the response. I might be embedding a different way than that, I have a line like this:

<script type="text/javascript" src="https://yfp.a2gov.org/JsAPI/v3?dashUUID=a1e681e2-60a0-4d98-8335-dc442e8008cc"></script>

Also here's why I think it's something about the dashboard itself. I made a copy of the same HTML page, everything identical except I'm pointing to a different dashboard. That one does not yield an extra set of scroll bars.

Has extra set: https://www2.a2gov.org/publicyf/arpa_dashboard.html

No extra scroll bars: https://www2.a2gov.org/publicyf/dashboard_three_column.html

Hi Sam,

I wasn't able to view either of those links but looking at my browser console it seems there's a CORS error. I don't know if you've made the dashboards inaccessible since the other day but to fix that the cross origin domain needs to be added in the Admin Config of Yellowfin.

So that's the standard embed you're using there, which will work but yes it's possible it might display extra scroll bars.

The page HTML looks like:

<div id="dashDiv"></div>
<script src="http://localhost:9710/JsAPI/v3"></script>;
<script src="js/reporting.js"></script>

yellowfin.init().then(() => {
    //The Yellowfin base API has now loaded. Now load a report
        yellowfin.loadDashboard({
        dashboardUUID: '0ccb0402-a33e-47af-a324-f3ce9db8b250',
        element: document.querySelector('div#dashDiv'),
        showToolbar: false,
        scaleCanvasTabs: false
});

});

Kind regards,

Chris

Hi Sam,

Hope you're having a good week.

Just wanted to check-in and see how it's all going. Was there anything you were needing from me to help get this resolved?

Regards,

Chris

Hi Chris,

Now that the CORS thing is fixed, can you take a look at the two links I posted above? That kind of use of the API you shared, with separate files, is more complex than anything we're doing now so I'd first like to see if I can understand what's going on with this dashboard in particular. You'll see above that one of my dashboards does not have the scroll bar (we also have it public-facing). That makes me think it's something different about the dashboard that has the scroll bars. Can you think of anything on that front?

Thanks,

Sam

Hi Sam,

I'm still getting CORS errors when I try to access either of those links. Does that need checking?

Kind regards,

Chris

That is perplexing, sorry you got that message again. Those pages have been loading okay on various computers and networks here. Perhaps this is a manifestation of our infrastructure team having Cloudflare challenge non-US traffic, though I thought that was just supposed to be a CAPTCHA.

Let's close this ticket, given how tricky it has been to work on. If anything emerges in the future related to scroll bars for a canvas embedded dashboard vs. none for a 3-column layout embedded dashboard, we can reopen this.

I appreciate your help looking into this, Chris.

Thanks,

Sam

Hi Sam,

No worries. Yes, as you say, if you want to discuss this again in the future, you can reopen the ticket at any time.

Have a great remainder of your week!

Kind regards,

Chris