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.
Related
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!
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?
i created my custom style for ScrollView, but actually i don't know how to check what orientation of scroll is it (horizontal or vertical? I need use different image for each of them).
source code of scrollview style
In this source code, that i found, is used word horizontal, but where it comes from? I don't see any declaration of horizontal property.
It comes from this line. In newer versions of Qt, properties for style components are exposed through the styleData object; this is now standard practice for all Qt Quick Controls styling. In the case of ScrollViewStyle, commit e0c8035c updated the code to use styleData instead.
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.
How can I modify standart style of progress bar controll?
If you want full control over the style, you can create your own programmatic skins and replace the default skins. Look at ProgressBarSkin, ProgressBarIndeterminateSkin, ProgressBarMaskSkin and ProgressBarTrackSkin in the SDK to see how they are drawn by default. You can then create your own versions of those skin files and draw them however you like. Then you just set those skin files to your ProgressBar. You can do that directly in MXML, or set it in CSS to change all of the ProgressBars in your app. Hope that helps.