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

Sam shared this question 9 days ago
Awaiting Reply

I have a canvas layout dashboard embedded in a webpage. No matter what I try, I can't get rid of scroll bars. They're unneeded and only allow a tiny amount of travel.

I think it's related to it being canvas layout because when I switch just the dashboard slug, and embed a different dashboard that is fixed layout (I think 3 column), the scroll bars vanish. That's as far as I got isolating the problem.

It could be something about the dashboard itself but nothing I've tried has helped. I tried making every report and textbox 850px wide, and the dashboard 900px wide. I've tried fitting the dashboard to that 850px width. None of that makes a difference.

Can you offer any advice?

Comments (4)

photo
1

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

photo
1

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>;
That call, in a plain HTML page, has the extra set of scrollbars. I tried adding scaleCanvasTabs=false to that URL string but no effect. How can I incorporate the yellowfin.loadDashboard({}) command into my JavaScript embed call?

photo
1

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

photo
1

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>
and then reporting.js is a separate file that contains the code from below:
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
});

});
We have some documentation on our Wiki that describes the various options for the API if you want to take a look.  

Kind regards,

Chris