Menu
I am sick of all my angular elements being 0x0 pixels, because they have names like app-card, app-accordion, which the browser does not recognise as HTML5 compliant elements and as thus, will not give any default styles to.
This is means that inspecting it in Chrome, I fail to see the container dimensions and when the DOM is really deep, it is hard to understand which element encompasses which area on the screen, etc.
It feels logical to me that all angular elements should be block displayed by default, because for the majority, it makes sense.
As an example, consider these elements
bbs-accordion-header //(width 0px, height 0px) contains
bbs-accordion-header-regular //(width 1920px, height 153px) 
So bbs-accordion-header does not have any dimensions, even though it's children do have them.
I solve this, by manually adding one line to each elements .scss file
:host { display: block; } But it is very tedious to add this manually every time. Does anyone know of a better solution?
208
An element that has the display property set to block starts on a new line and takes up the available screen width. You can specify the width and height properties for such elements.
With the help of Angular CLI, you can install CSS or SCSS on your project and start working on that in a suitable way. If you are working with the CSS or SCSS in your angular project then it is very easy for you as compared to most other frameworks.
Angular applications are styled with standard CSS. That means you can apply everything you know about CSS stylesheets, selectors, rules, and media queries directly to Angular applications. Additionally, Angular can bundle component styles with components, enabling a more modular design than regular stylesheets.
One of the reasons for this is the ability to add scoped styling to your app. This prevents inadvertently overwriting styles due to a shared global class somewhere. You won't hear much about these options in the Angular community, though, and that's because Angular comes with a scoped CSS option right out of the box.
My pull-request has been merged.
With the upcoming release of Angular CLI v9.1.0 a new option is going to be available:
--displayBlock=true|false Docs: https://next.angular.io/cli/generate#component
For the impatient: It's available right now in v9.1.0-next.0
ng generate component dashboard --displayBlock=true ... "projectType": "application", "schematics": { "@schematics/angular:component": { "displayBlock": true } } ... From now on any generated component, be it with the css inlined or not, will contain the css:
:host { display: block; }
More detailed information is available here: https://blog.rryter.ch/2020/01/19/angular-cli-generating-block-components-by-default/
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
