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

Sam shared this question 22 months ago
Answered

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?

Replies (9)

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

photo
1

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

photo
1

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

photo
1

Hi Sam,

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

/1195217b61430ac27f0443ea36ee4ddd

Kind regards,

Chris

photo
1

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

photo
1

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

Leave a Comment
 
Attach a file