CODEWITHSUNDEEP
javascripthtmlcssangulartypescript
Marcin
Marcin

Reputation: 43

How to fix items in div class="row" angular + bootstrap

Do anyone have idea how to fix elements in div with class="row" ?

How it should look like: Good view, Click: Live show(example without angular)

How it looks like: Bad view

Switch component is repeated in lights component
When i remove <div class="row"></div> elements looking good, but the are under themselves

<div class="row">
    <app-switch  *ngFor="let switch of switches" [switch]="switch"></app-switch>
</div>

Link to my repository: SmartPi-Client

Upvotes: 0

Views: 3253

Answers (3)

Julian W.
Julian W.

Reputation: 1571

It is because Bootstrap 4 is using Flexbox. app-switch selector is between .row and .col divs so the correct bootstrap style wasn't applied to them. You can make the browser to ignore this app-switch selector using the following css code.

:host {
  display: contents;
}

I added a working example here. https://stackblitz.com/edit/angular-ho3q4q

Upvotes: 1

joohong89
joohong89

Reputation: 1271

Instead of adding .col-sm-12 .col-md-6 .col-xl-4 to child div of app-switch, add it to app-switch.

<div class="row">
    <app-switch class="col-sm-12 col-md-6 col-xl-4" *ngFor="let switch of switches" [switch]="switch"></app-switch>
</div>

Upvotes: 0

Erbsenkoenig
Erbsenkoenig

Reputation: 1659

The thing is that the style for the columns is applied to the direct child/ren of the html element with the ‚row‘ class.

You could add that class to your app-switch component tag or use a wrapper around it to define the col design

Upvotes: 0

Related Questions