I am trying to build a chrome extension which injects an HTML popup on the host page via content script.
I am adding this popup using shadowRoot to avoid collisions with the main page. Also, I am using bootstrap on the popup for styling. One issue which is happening is that, bootstrap defines many of its component properties in rem units which are relative to the font-size of page root(html element) and not the shadow root. This messes up with popup's CSS as some pages have very small font-size defined on their root.
I wanted to understand if its possible to define a new root with font-size for the ShadowRoot or somehow override the root value being used in the popup via bootstrap!
Thanks a lot, really appreciate any help!
Related
I'm working on a React App which embeds widgets via <iframe>s. Those widgets also are React apps. Both, the app and the widgets, make use of the same component library (an own one).
This component library provides a <Modal> component, displaying some content in a floating container styled with a backdrop.
If now a widget renders such a <Modal>, this <Modal> of course is bound to the <iframe>s DOM and thus displayed in the boundaries of that <iframe>. And a non-centered <Modal> with a limited backdrop looks ugly.
So I just tried to add that <Modal>'s React portal not to the current document, but to the parent.document (if available and different from the current document).
And well, that works, kind of. The <Modal> is now a child of the parent DOM and thus centers in that viewport.
But if I want to render another custom component, like a <Button> in that <Modal>, all the styles (currently defined via SASS and applied via className) are just not available. These stylings remain in the child DOM :(
Currently, my only idea to solve this is to switch to inline styles. That means I would switch to CSS-in-JS to still have something similar to CSS classes and apply those styles via the style attribute to the nodes.
Since that would make it necessary to modify all components which are used in a <Modal>, I would like to reach out for other ideas and approaches.
Is there another approach how render an <iframe>'s <Modal> using the viewport of the outer app? Or is there a solution on how to also propagate style sheets from the inner DOM to the outer DOM?
How can I add some external (or in any other way) CSS to PowerBI report embedded in Angular application as iframe? I need to remove the scrollbar from it, so I need to add this, so that the report fits better inside the iframe of the angular page:
.explorationContainer .exploreCanvas .canvasFlexBox {
height: inherit !important;
}
for the love of me, I couldn't find a way to insert it. I tried putting it in styles.scss of the angular app, but no go.
I don't think you can, and when I was implementing my solution I couldn't make anything work other than setting a fixed value to the height of the external container.
In the end what I did was to set the div height when loading the powerBI report, what I used on my solution was this (fills the height up to the bottom of the screen):
let yPosition = powerBIdiv.getBoundingClientRect().y;
powerBIdiv.style["height"] = `calc(100vh - ${yPosition}px)`;
I have a CustomListItemRenderer class. It's styling, and contained components' styling, are set via an external CSS stylesheet.
When this renderer is used in a list in the main application, everything is set and styled correctly. When this renderer is being used in a list inside of a popup opened through the PopupManager class, the styling is not being set correctly.
This is a Flex Web Application: SDK 4.1
Help is greatly appreciated.
You need to define it in your CSS also as something like PopupManager CustomListItemRenderer{} since popups use different style ancestors. So defining it specifically for use in popups again will fix your issue.
I have a (p:dataTable) Primefaces widget not rendering properly within the templates of the containing main site, presumably affected by higher level global CSS settings which are however mandatory.
Is there a way to isolate the widget from wider scope CSS settings.
I have done the obvious things which is to contain the widget within an IFrames, which works, but creates its own set of problems...
There are two solutions to your problem:
Use narrower scopes for global CSS settings. You might have class names that clash, or are shared between other elements on your page and the widget.
Wrap the widget around a container with a specific class/ID, and then override/reset the styles for elements in that container.
I have a weird problem with images in visual web developer,
I cant change my images properties from properties panel (my changes don't take effect) and all images in my website have gotten the same size
when I resize one image (by dragging the border), all images get that new size?
any idea?
Somehow visual web developer read the image class in the CSS file instead of the properties of the control because there is something like this in my CSS file:
img {
width:260px;
}
Yes, basically the width and height properties of the HTML <img /> have been deprecated for some time, you are recommended to use styles instead.
VS then takes this to the extreme, and instead of using inline styles, will create a new style in the default style sheet location for img, as you've discovered.
However, unless you are using the image full size somewhere you are better off resizing the image before you upload it to the server, saving on everyones bandwidth.
Also, IE does pretty poor things with it's default scaling routine, but you can turn on cubic sampling through css.