Menu
I want to update visual side(grid, colors) of my angular 2 application. Old layout was build with bootstrap 4, which I don't really need anymore. I decided to go for plain css3, and build grid with flexbox. I made a preview of this grid on codepen.
However implementation in project is hard and I am now stuck. Let's consider an example:
import {Component} from 'angular2/angular2';
@Component({
selector: 'some-component',
template: `
<aside class="col-4 main-aside"></aside>
<section class="main-section center"></section>
`
})
export class SomeComponent { }
If I bootstrap this component within, for example .container I may get this result:
<body>
<!-- .container is flex parent -->
<div class="container">
<some-component>
<!-- .main-aside and .main-section should be flex children -->
<aside class="main-aside"></aside>
<section class="main-section center"></section>
</some-component>
</div>
</body>
As you can see the flex chain parent -> child is broken because of component "selector" between them. I menaged to fix this by adding styles: display: flex; width: 100%; to component selector from chrome dev tools, however I don't know how to make this work from code perspective nor is it the best way to do so.
I would really appreciate any help, because I have no idea how to fix this with the exception of not using flexbox.
I am using angular 2.0.0-alpha.44
And yes, I am aware of angular's alpha state.
645
Step 1 — Setting Up the Project. You can use @angular/cli to create a new Angular Project. In your terminal window, use the following command: npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests.
Disadvantages. While flexbox is supported by most major browsers, it's still newer than the traditional box model. This means older browsers don't support it as well (some not at all). There are also more inconsistencies across different browsers.
Overview. Angular Material's Layout features provide sugar to enable developers to more easily create modern, responsive layouts on top of CSS3 flexbox. The layout API consists of a set of Angular directives that can be applied to any of your application's HTML content.
You could use flexbox on everything but you really shouldn't. Flexbox is a new layout algorithm for laying out complex web pages/applications, but he also have it disadventages(temporarily the most slower layout). Basically flexbox is the most best for smaller page components and UI elements.
I fixed this issue by adding styles to component. For example:
:host {
display: flex;
}
:host {} was the key.
135
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