Topic: Layout / Grid behavior in Angular components
https://ibb.co/n3Cx98
I made a simple angular testing component with following html content (and no specific scss):
<div class="col-3"style="background-color: #33b5e5;border:2px solid #fff;padding:1rem">1 2 3 4 5</div>
In an other component I try to put four of them next to each other.
Why do I get so different results compared to the lower part of the example where these four parts are 'inline' and not from a component?
<div class="container-fluid">
<div class="row justify-content-around">
<app-test></app-test>
<app-test></app-test>
<app-test></app-test>
<app-test></app-test>
</div>
<hr>
<div class="row justify-content-around">
<div class="col-3"style="background-color: #33b5e5;border:2px solid #fff;padding:1rem">1 2 3 4 5</div>
<div class="col-3"style="background-color: #33b5e5;border:2px solid #fff;padding:1rem">1 2 3 4 5</div>
<div class="col-3"style="background-color: #33b5e5;border:2px solid #fff;padding:1rem">1 2 3 4 5</div>
<div class="col-3"style="background-color: #33b5e5;border:2px solid #fff;padding:1rem">1 2 3 4 5</div>
</div>
</div>
Add comment
Dear Intulion,
I have tested it, and this behavior which you're observe is correct functionality of flex.
Instead of using col-3 inside test component, please use this class on app-test element.
Please take a look at my code:
app.component:
test.component:
Best Regards,
Damian
<div class="container-fluid"> <div class="row justify-content-around"> <app-test class="col-3 p-1"></app-test> <app-test class="col-3 p-1"></app-test> <app-test class="col-3 p-1"></app-test> <app-test class="col-3 p-1"></app-test> </div> <hr> <div class="row justify-content-around"> <div class="col-3"style="background-color: #33b5e5;border:2px solid #fff;padding:1rem">1 2 3 4 5</div> <div class="col-3"style="background-color: #33b5e5;border:2px solid #fff;padding:1rem">1 2 3 4 5</div> <div class="col-3"style="background-color: #33b5e5;border:2px solid #fff;padding:1rem">1 2 3 4 5</div> <div class="col-3"style="background-color: #33b5e5;border:2px solid #fff;padding:1rem">1 2 3 4 5</div> </div> </div>
<div class=""style="background-color: #33b5e5;border:2px solid #fff;">1 2 3 4 5</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No