Bootstrap css not working on dynamically injected components in angular

Question

I have a code block like:

  <div class="col-md-12">
    <div class="row">
      <ng-template dynamicComponents></ng-template>
    </div>
  </div>

dynamicComponents is a directive using which I inject dynamic components.

All the application is using Bootstrap and is working fine but the dynamically injected components are shrinking or not working with bootstrap css, I even tried using encapsulation: ViewEncapsulation.None but it doesn't seem to work.

Please refer the screenshots below:

Here everything works fine till class=row and it is taing the full width, but once a dynamic component named app-from-builder-components-editor is injected it breaks up the bootstrap properties, please see below:

What can I do to get the bootstrap properties to work ?

How is bootstrap integarted in you app? css in index,html or scss iincluded in styles.scss? — Marc
– Marc, Commented May 28, 2020 at 17:42
A workaround is to use angular material and angular flex layout: tburleson-layouts-demos.firebaseapp.com/#/docs. — Marc
– Marc, Commented May 28, 2020 at 17:55
remove it from the angular.json file and write this in your styles.css @import 'bootstrap/dist/css/bootstrap.css' — Flightdoc5242
– Flightdoc5242, Commented May 28, 2020 at 17:55
@Flightdoc5242 does not work that way either, I have already tried placing the file at separate locations / methods — Shakti Phartiyal
– Shakti Phartiyal, Commented May 28, 2020 at 17:58

S P · Accepted Answer · 2020-05-29 00:20:33Z

1

The problem is your component host (app-form-builder-components-editor) that sits between your row and col divs. To make it work, your 'col-md-12' div should be a direct child of your 'row' div.

What you could do is putting the <div class="row"> inside your app-form-builder component's template to work around this issue.

edited May 29, 2020 at 0:20

answered May 29, 2020 at 0:13

S P

4,6432 gold badges20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RideLikeTheWind · Accepted Answer · 2020-12-17 01:54:39Z

1

I solved this by using containers:

<ng-template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <!-- content --> 
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <!-- content --> 
      </div>
    </div>
  </div>
</ng-template>

Not ideal, but it seems to stop the layout issue. Angular templates seem to rewrite the DOM and nest the rows, for some reason. This "resolves" the issue.

answered Dec 17, 2020 at 1:54

RideLikeTheWind

436 bronze badges

Collectives™ on Stack Overflow

Bootstrap css not working on dynamically injected components in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related