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.
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?
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.
We have a medium size application with around 30 views. We have many CSS files laying around. Some are specialized (popup styles) but the rest contains style for different parts of the application, in addition of the style embedded in the *.ui.xml and it's start to get pretty messy.
Is there any guideline on how to structure the styling in a GWT application and in a web application in general ? How do you structure yours ?
There are two schools of thought on this. Some developers prefer to use CSS Resources.
My strong preference, after 7 years of experience with GWT and multiple projects, is to have a single external CSS file for all styles. I even do not include any GWT stylesheets (including DataGrid styles) - I copy their content into my CSS file. These are the reasons for this preference:
CSS is called a cascading style sheet for a reason - it is build around inheritance. A professional web designer builds an app design starting from the very top (html, body elements) and defines the rules for the entire application: font or fonts to be used, color palette, standard margins and paddings, standard grid (columns width), etc. These rules must propagate throughout the entire app. Once developers start defining their own styles at the view/widget level, it's nearly impossible to ensure any design consistency across the app.
Even more importantly, when the CSS rules are split between many different sources, it becomes very hard to predict their interactions. Why is this element not positioned correctly or has the wrong font size? Is it because I used the wrong selector in the widget CSS, or is this because some other rule from some other CSS resource overrides or conflicts with it? Now you find yourself jumping back and forth between different stylesheets trying to make it work.
Even if you do find a source of the problem and fix it in one of the stylesheets, now you have to check how this change affected other views and widgets. Making a change at the top of the DOM tree can impact every element at the bottom (again, it's cascading!). Often it's not easy to anticipate this impact in every browser possible.
These considerations become even more important when you try to make your app design responsive and make your app adjust nicely to different screen sizes. What happens to your view or widget-level CSS when you add a media query in your main CSS file?
Another important point is the speed of development. If you use a professionally designed CSS file, you almost do not need CSS at a view or widget level. When I add a new form, for example, I never need any CSS - I just throw a sequence of labels and input widgets and they all suddenly look right and they are positioned correctly, because the rules have been already set and they apply to all forms, input elements, labels, etc. in the app. I do not think what font size or color to use in a widget. I just use a <h2> header, for example, and it has one color in a light skin and a different color in a dark skin, and it changes its size and margins according to the screen size.
Finally, moving as much CSS away from the widgets makes it easier to reuse them in new projects. Using the same example, if a header does not have a font-family, font-size, color or margins specified in a widget, it will take these values from another app's CSS file (which may or may not be the same rules as the contributing project's file). So you can reuse the widget in a new project without touching its code, which again speeds up the development process and makes maintenance so much easier.
To summarize, a single CSS file makes it easier to enforce style consistency across the entire app and maintain code, and considerably speeds up the development.
I'm using the Bootstrap framework for a web application. The responsive design works very well for the primary part of our site which needs to work on smaller screens. However, there's an admin section where the responsiveness is both not that necessary (will be administered on desktops) and gets in the way (the forms/tables require tweaking to work at smaller sizes).
Is there an easy, scalable way to turn off bootstrap responsiveness for certain pages?
Right now, we have a single bootstrap .css file with the #sizing elements included. I could separate out boostrap.css and bootstrap-responsive.css and then only call responsive on pages that need it. I presume that would work, but would mean yet another setting (it's a cakePHP app).
Ideally, I'd like to assign a class to the body or main container that would override the responsiveness -- <div class="container non-responsive">
One other note -- I'm really only concerned about the responsiveness below 1024px in this case. The way it expands in larger screen sizes works well in the admin section.
Separating them will be easier even though it's another setting. When you download Bootstrap from their home page (http://twitter.github.io/bootstrap/, instead of via their Customize page or via the GitHub project) it already separates the responsive styles into a separate file.
However, you can add your own styles that are more specific than each of the responsive styles in Bootstrap and override them. It could get hairy though because you'd basically have to repeat everything in bootstrap-responsive.css and override manually for each style property specified by Bootstrap's responsive file.
A better approach might be to edit bootstrap-responsive.css and prefix each style within the media query with ".responsive " and add the "responsive" class to the body element of the pages that you DO want to be responsive.
Hope this helps.
I am using Flex 4.9. I thought that with the newest SDK, they finally made Flex and CSS components tags to work. But they did not.
I tried to set horisontalAlign and verticalAlign of spark HGroup vie CSS style, so I could manage it smoothly and save some code typing. HGroups didnt respond to CSS style I applied, ok, I thought that at least I will set their width. It also did not work! Nor pixel width or percent value.
Does Flex CSS styling is really so limited or am I missing something?
horizontalAlign, verticalAlign, width and height are all properties of the HGroup class, not styles. Hence you cannot set these properties through stylesheets.
What you seem to be missing is that Flex is not HTML and that the same semantics do not apply. In Flex 4 we separate the content from the way it is presented mainly through a process called skinning: we declare components and their logic in one class (usually in ActionScript) and we define its visual representation in another (usually written in MXML).
With this separation already in place there is hardly any need for stylesheets. In fact, if you would put a CSS on top of that, you would kind of artificially try to separate the layout into two separate entities which doesn't make much sense. Not to mention it would make the code much harder to read.
There is a case where CSS comes in handy though, that is when you want to apply a certain visual style throughout your application. A Button could have five different skins, but through CSS you could set the font color of all five to a specific color without repeating that in each skin.