Layout / Grid behavior in Angular components

Topic: Layout / Grid behavior in Angular components

Intulion pro asked 6 years ago

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

Damian Gemza staff answered 6 years ago

0 0 Best answer

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:
<div>
<pre><div class="container-fluid">

<app-test class="col-3 p-1"></app-test>

</div>

<hr>

</div>

</div></pre>
</div>
test.component:
<div>
<pre><div class=""style="background-color: #33b5e5;border:2px solid #fff;">1 2 3 4 5</div></pre>
</div>
Best Regards,

Damian

Please insert min. 20 characters.

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:

<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>

test.component:

<div class=""style="background-color: #33b5e5;border:2px solid #fff;">1 2 3 4 5</div>

Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Intulion

Pro User 0Support score
2Questions 0Answers 0Snippets