I have a simple Angular app with two components, a header and a side panel. There is a menu icon in the header, which when clicked shows the side panel.
It works when the code is in AppComponent. But it does not work, if I make the side panel into its own Angular component (SidenavComponent). I am using "transform: translateX" to hide and show the panel.
Here is a stackblitz workplace where the code for the panel is in AppComponent and is working.
Here is a another stackblitz workplace where the code for the panel is in SideanavComponent and is NOT working.
When the menu icon is clicked, the header component sends a message to the component to open the panel. This is AppComponent in the working code and SidenavComponent in the non-working code. The component receiving the message then applies the CSS class to open the panel.
When I run this in Chrome and open the developer tools, the same CSS gets applied to both the working and non-working sidenav html. So I am baffled.
This was originally part of a bigger app. I removed all code unrelated to the problem that I am having and then moved it to the Stackblitz workplace.
NOTE: Both the working and non-working code has a console error when run in stackblitz: "Unhandled Promise rejection". This does not happen when run in Chrome and does not stop the working code from working.
So the issue is that you've created a new Angular component that you want to have act the same as the <aside> element you had running in the AppComponent html page, right?
But then in your sidenav component, you go ahead and put a new <aside> element with the sidenav class within your new component. Do you see the problem here? You've now got an element (the component element), with its own css rules, sitting between the parent element and the sidenav element.
To resolve this, what you want is to treat your sidenav component as the element itself! This means you need a couple of changes.
Learn about applying css to the component itself (here's the trick: it's called :host in the scss file).
https://angular.io/guide/component-styles
And for dynamically changing the component's classes, use #HostBinding
https://angular.io/api/core/HostBinding
With these two techniques, you can remove the <aside> element from within your sidenav component, and the component itself will act in the way you desire.
I forked your stackblitz workplace with a working example:
https://stackblitz.com/edit/angular-5gl3cu?file=src/app/sidenav/sidenav.component.ts
Related
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
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?
So I wanted to use a fullscreen modal on certain screen sizes and I set about customising it via component SCSS file. Nothing worked and I started searching around.
Found some info:
ng-bootstrap Modal size.
https://github.com/ng-bootstrap/ng-bootstrap/issues/1309.
https://ng-bootstrap.github.io/#/components/modal/examples#options.
Nothing helped until I realised in their own example (last item on the list) they set ViewEncapsulation.None for the component containing the modal. I verified that removing the setting causes their example to stop working.
I just thought that it was not clear that you had to set the ViewEncapsulation option and wanted to create something for people who run into the same problem. I hope it is ok.
I'm using angular-ui with bootstrap and when I try to use the modal, it brings up something and darkens the background, but does not display my content. I see it requesting the proper background and window files. If I use Chrome tools to troubleshoot, I only see this inside the content:
<div class="modal-content" modal-transclude=""></div>
Should I see the transcluded HTML inside this? If I edit it manually within Chrome tools, and then enter in some text, it displays properly.
All other aspects of the modal seem to work; clicking outside kills the dialog, and it accepts the 'sm' and 'lg' size parameters.
Any suggestions on how to troubleshoot?
I'm using:
angular 1.2.21
ui-bootstrap-0.11.0
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
Maybe there is an incompatibility with these three?
I'm using the Sencha ExtJS Framework in Version 4.05 and i have the following problem. I am displaying Ext.Grids which have a pagination toolbar at the bottom of the Grid. On the Sencha Sample Page the Grids will display some buttons (first-page, prev-page, next-page, last-page, refresh) with icons on it.
Unfortunately the icons are not displayed in my Grids:
As you can see, the buttons are actually there, and they're working correcrly, only the icons are not displayed.
The references to the images are correct and the images are there and accessible for the browser. (If i view the css of the button in Firebug and hover the imageurl it will display the correct icon).
One thing i noticed is, that for some reason the <span> Element which should display the icon is "grayed out" in the firebug view. (On the Sencha example page it is not).
The CSS of that element looks fine for me:
Note: The complete CSS File used can be found HERE
A short note on the Theme: i made this grey theme (named "documents") just by changing the main colour of the .sass template and compiling the ext-all.css to a new one for my theme. So i didn't change anything with the icons.
Any suggestions what could cause this problem?
Hard to debug without access to the actual code. However, I noticed that both in the CSS you copied above as well as the css link you posted (which was supposedly the whole css), that neither set of css (that I could find) had any reference to the x-btn-icon class by itself, and yet that is the class (along with x-tbar-loading) that is on your grayed out span element. So, what is that class doing? Where is it defined? There may reside your issue.
EDIT: I went to the Sencha website and firebugged an icon on the grid sample. When I deleted the x-btn-icon class from the element, I believe I duplicated your problem. So it seems that the necessary definition of that class is missing from your css. On their site it is defined in the ext-all.css.