ng-bootstrap modal custom css needs ViewEncapsulation.None to work? - css

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.

Related

CSS to open side panel doesn't work in Angular component

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

Angular and CSS - seeing the background in Chrome Developer Tools but can't find it anywhere

It's amazing how Angular can hide css, so I don't know how to change a certain color. I am using Angular with Prime ng, specifically I use <p-selectbutton> and I can't find how to change the background for the selected option. Where can I change this? I searched the whole project for the text 186ba0 which is the color for this background, and I couldn't find it! Anyway, this is the screenshot for the caught background CSS element:
Changing the original angular file's not a good practice. Did you try to override it using an !important statement?
If you did, try changing the original file, but beware, if you update your angular application, you'll lose this changes.

Firefox Quantum - Can't hide focus ring on input

I'm writing a website that uses a rich Material Design theme on top of Bootstrap 4. So far I have been able to make all the browser chrome match the site at least somewhat (Chrome's autofill indicator being the most difficult to date), but ever since I started developing in Firefox Quantum, I'm running into difficulties hiding the focus ring around input fields:
According to the MDN docs, I should be able to apply the outline: none property to input:focus or input:-moz-focusring, however none of these seem to work. I can see the property showing up in the style inspector, and Firefox doesn't show that it's being overridden by anything, but the focus ring still shows up.
I understand it's important to have indication of focus, however seeing as I already have my own clear indication of focus, I would prefer to hide the browser-provided one as it interferes with my styling.
Okay, so, I solved this while trying to reproduce it in JSFiddle (which I wouldn't have been able to do). It's ridiculous.
On my site, I'm compiling Bootstrap and Material Design from source along with my own SCSS so that I can override the colors and options for the two. It turns out that Material Design overrides the enable-shadows option for Bootstrap, but only if the SCSS is referenced for both, so it's impossible to reproduce in JSFiddle (where the SCSS has already been compiled to CSS).
The offending rule is in Bootstrap's mixins/_forms.scss file under form-control-focus. It's new in the latest minor version of Bootstrap, apparently, because I've tested in Chrome since updating and the rectangle shows up there, too (whereas it did not before updating Bootstrap). The rule won't show up in the inspector because opening the inspector unfocuses the control, and the :focus state doesn't trigger the JS event to let Bootstrap know it's focused, which led me to believe it was browser chrome highlighting the control.

Angular 2 ng-bootstrap styles are botched

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.

Icons in PaginationToolbar not showing up

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.

Resources