Clarification on Custom CSS Placement and Bleed-Through in Embedded Dashboards
Hi all,
We’re embedding Yellowfin dashboards into our Angular application (YF v9.13) and running into a CSS scoping issue. Our custom styles live under:
...Yellowfin 9.13\appserver\webapps\customcss\styles.css
They load fine in the embedded dashboards (I can see them in the network tab), but those same styles are also affecting the rest of our Angular app outside the iframe. For example, selectors like .header and .tile are changing layout in our parent application.
This led us to a few points of confusion:
- We assumed the iframe would isolate Yellowfin CSS from the host app, but it seems like the styles are bleeding through. Is this expected behavior?
- We received a CSS snippet (let’s call it our_company.css) that targets selectors such as body#dashboardPageBody and .browseMain. The question is: where should this file be placed so it only applies inside Yellowfin? Do we: Drop it into /customcss/ and then @import it from styles.css? Or paste its content directly into styles.css? Or is there a better recommended path (like using the Admin → Custom CSS UI)?
- Related: if we want to add a custom font (e.g., Inter), is it supported to drop the font files into /customcss/ and declare an @font-face there? Or should fonts be referenced from another location?
Basically we want to confirm the correct way to scope these styles so that they don’t bleed into our host Angular app, while still being loaded consistently in the embedded dashboards.
Any clarification on how Yellowfin loads /customcss/ files and how best to isolate them for embedded use would be really helpful.
Thanks!
The same question
Hello Brian V,
My name is Chegudi Priya from the Yellowfin Technical Support Team. We have received your support request, and I will be your primary contact on the following ticket:
Ticket Number: #32792-08-20
Case Title: Clarification on Custom CSS Placement and Bleed-Through in Embedded Dashboards
We have submitted this request to the Product Team for further review and clarification. As soon as we receive a response from them, I will update this case for your visibility. Please feel free to reach out if you have any questions or concerns. We are more than happy to assist you.
Sincerely,
Chegudi Priya
Yellowfin Technical Support Engineer
Hello Brian V,
My name is Chegudi Priya from the Yellowfin Technical Support Team. We have received your support request, and I will be your primary contact on the following ticket:
Ticket Number: #32792-08-20
Case Title: Clarification on Custom CSS Placement and Bleed-Through in Embedded Dashboards
We have submitted this request to the Product Team for further review and clarification. As soon as we receive a response from them, I will update this case for your visibility. Please feel free to reach out if you have any questions or concerns. We are more than happy to assist you.
Sincerely,
Chegudi Priya
Yellowfin Technical Support Engineer
Hello Brian,
Thank you for your patience, Could you please provide a snapshot of the page in the state where CSS escapes the iframe for further investigation.
Assuming you are using Chrome, on the page could you please “Save As…” and choose
“Web page, Single File” - this will create an mhtml file which contains all the assets for the page. If you can send that to us we’ll be able to check what’s going on.
Please feel free to reach out if you have any questions or concerns. We are more than happy to assist you.
Thanks & Regards,
Chegudi Priya
Yellowfin Technical Support Engineer.
Hello Brian,
Thank you for your patience, Could you please provide a snapshot of the page in the state where CSS escapes the iframe for further investigation.
Assuming you are using Chrome, on the page could you please “Save As…” and choose
“Web page, Single File” - this will create an mhtml file which contains all the assets for the page. If you can send that to us we’ll be able to check what’s going on.
Please feel free to reach out if you have any questions or concerns. We are more than happy to assist you.
Thanks & Regards,
Chegudi Priya
Yellowfin Technical Support Engineer.
Hello Brian V
I wanted to follow up with you regarding the information I requested in my last email. This will allow me to further troubleshoot this issue and work towards a resolution. I know you may be busy but this information is necessary to solve this issue.
Thanks & Regards,
Chegudi Priya
Yellowfin Technical Support Engineer.
Hello Brian V
I wanted to follow up with you regarding the information I requested in my last email. This will allow me to further troubleshoot this issue and work towards a resolution. I know you may be busy but this information is necessary to solve this issue.
Thanks & Regards,
Chegudi Priya
Yellowfin Technical Support Engineer.
Hi Chedugi,
Thanks for your response, I've been occupied looking at other tickets but have been able to find a work around for now and am not experiencing the same css issues mentioned in the post. If we encounter the same issue I'll look deeper into the information provided and follow up on anything I find. Thanks again for the resources and response!
Hi Chedugi,
Thanks for your response, I've been occupied looking at other tickets but have been able to find a work around for now and am not experiencing the same css issues mentioned in the post. If we encounter the same issue I'll look deeper into the information provided and follow up on anything I find. Thanks again for the resources and response!
Hello Brian V,
I hope you're doing well.
Thank you for the update and for letting us know that you’ve identified a workaround for the issue. Since there haven’t been any further concerns raised, we’d like to check if it’s appropriate to proceed with closing this case at this point.
If the problem reoccurs or if you need any further assistance, please don't hesitate to reach out by opening a new ticket. We’ll be happy to assist.
Thanks & Regards,
Chegudi Priya
Yellowfin Technical Support Engineer.
Hello Brian V,
I hope you're doing well.
Thank you for the update and for letting us know that you’ve identified a workaround for the issue. Since there haven’t been any further concerns raised, we’d like to check if it’s appropriate to proceed with closing this case at this point.
If the problem reoccurs or if you need any further assistance, please don't hesitate to reach out by opening a new ticket. We’ll be happy to assist.
Thanks & Regards,
Chegudi Priya
Yellowfin Technical Support Engineer.
Replies have been locked on this page!