i'm working on a new homepage project, which uses a lot of backdrop blurring and the pages are quiet long. So i divided all the sections to child components which have some child components as well. The problem is, that if i use backdrop-filter:blur(20px) on a child component, it won't blur any parent components content. I already tried to define the component host as display:block which sometimes solves the problem and noticed, that blur works if i use it on the :host attribute, but not if i use it on the elements inside that component. Does somebody know the reason for that or a workaround?
Just noticed: The bug doesn't appear on safari just on Chrome (Chrome 105).
Visual
Related
I have micro-frontend architecture.
A main application that turns out into the Angular Element with Shadow DOM.
A lot of small projects that turns out into the Angular Elements without Shadow DOM (ViewEncapsulation.Emulated).
Inside the main application I have component, that lazy loads some small application. Inside small application I have <ng-select></ng-select>. I add ng-select css to the main application bootstrap component css and ng-select loads broken. I also tried a lot of different ways to add this css. Works only one, when I encapsulate small application in shadow DOM and put all library css there, but it is a bad idea, because libraries css is huge.
It is not a css conflict (I tried it also on clear project) and problem is not in the ng-select (the same behavior with other private library elements). Just when I load "small" Angular Element to the main application Angular Element style tags appends to the head tag of the root html instead of shadow root of main application Angular Element.
Does anybody know how to fix it?
I had this working before, and then I upgraded a bunch of packages and rearranged some css, and now all of my ng-bootstrap component styles are ruined.
Please see this picture for a demonstration of the problem:
http://i.imgur.com/lrGnRht.png
As you can see, the NgModal is being added to the DOM but it is essentially invisible unless unless I manually add "opacity: 1" to my <ngb-modal-window></ngb-modal-window> . Also the background/backdrop isn't darkened like it should be. Also the modal isn't vertically centered - half of it is floating off the top of the screen. Lastly, the datepicker styles are trashed also. I don't know what went wrong with the css styles, but I removed all possible global styles and this still occurs, so I'm at a loss for words. Any ideas on what styles might be causing this?
This is using Angular#2.4.2, ng-bootstrap#1.0.0-alpha.20, and bootstrap#4.0.0-alpha.5
Long story short, I guess bootstrap#4.0.0-alpha.5 is no longer supported.
I have a div and apply the latest version of tinymce (4.2.5) to it, including some of my websites stylesheets.
When I use the editor old fashioned way the loaded css is only applied to the div I'm attaching tinymce to. Like a charm.
But I want to use the inline: true option. When I use that all the css is applied to the complete page of the application, not only the div.
Is this expected behavior? Or should I look for another approach? My main reason to use the inline feature is that it keeps the toolbar visible on scrolling. Unfortunately tinymce loads different sets of html for the inline and fixed toolbar (for example, the menu bar and icon/tool bar are separate div's. On inline they have a parent div) so just applying the same or similar css isn't working out.
Anybody has any tips or tricks for me? Or should I accept the limitations of one or the other?
You will have to accept the limitations.
Both editor modes need different css for the UI and in inline mode it seems to be necessary to apply it to the complete page (even though you don't like that).
I redesigned a website for a friend using twitter bootstrap which i supposed would save me from thinking about cross-browser compatibility.
Now I try to use it with firefox only to notice that the controls of the Carousel component move away when you hover them, thus making it impossible to click them. Not to mention it looks rather unprofessional.
The strange behavior can be seen here and occurs to me on Firefox 18.0.2:
http://snow-first.com/snow-rabbit-3/
Anybody has a clue to what's going on? Tried looking in the css but the only thing that should happen on hover is an opacity change...
for the selectors .carousel-control:hover, .carousel-control:focus (line 576 of your CSS) add position:absolute
I've created a custom widget, which uses a bunch of floated divisions, I'm having a issue with internet explorer though. After playing around a bit, I found that the problem was with setting inline css.
I have a class extending ComplexPanel, which sets the element to a division, and offers a bunch of helper functions to set various inline CSS.
If I add say, 3 divisions using this DIV wrapper class, which all are being floated left, and set to 100px using inline css (set with getElement().getStyle().setProperty()), then they act odd in IE8. (it works fine in IE9).
Basically, none of the inline CSS is being picked up. Using the developer tools shows the CSS is there, but its not being applied. If I disable the float (or width for that matter) and enable it again, using the developer tools, the inline CSS is picked up and it works as intended.
So, how can I inform IE8 that it needs to re-interpret inline CSS on dynamically generated elements?
We had problems using setProperty()... in ie8. So, avoid it.
Try using one of predefined methods in Style.
Try using getElement().getStyle().setFloat(Float.Left).
and getElement().getStyle().setWidth(100, Unit.PX).