0

We are embedding Kibana report inside our angular application as iFrame. We are not having rights to changes Kibana styling directly as other application are also consuming it.

After embedding iFrame, look and feels of our application is not matching with iFrame content.

I would like to know the way in Angular Application to override that CSS.

Tried to perform ng-deep on css classes, but it didn't work.

Can you please suggest better way.

Note : We can't change styling in Kibana itself

Vaibhav Sawant
  • 341
  • 1
  • 7
  • 22
  • Does this answer your question? [Using CSS to affect div style inside iframe](https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe) – cloned Mar 15 '21 at 12:42
  • I don't think it is possible as the css of iframe is considered as a seperate DOM we can't access or modify the styling of the iframe content. – SaiSurya Mar 15 '21 at 12:52
  • Create your custom wrapper class, then make use of ```::ng-deep {}``` and most importantly follow the same hierarchy the override it. If needed then make only make use ```!important```. If possible, please upload a small example over ```stackblitz``` will have a look. – Himanshu Saxena Mar 15 '21 at 13:08
  • @Vaibhav Did you find any solution yet? I am finding for the same solution. – Darshana Jul 29 '22 at 06:46

0 Answers0