Bootstrap row class not propagating down to components in Angular

Question

I have a number of controls declared like this.

<div class="row">
  <div class="col-sm-12">
    <div>Caption</div>
    <input type="text" class="form-control">
  </div>
</div>

Trying to refactor my code, I introduced a component to encapsulate this particular behavior.

<div class="row">
  <app-textbox [caption]="'Caption'"></app-textbox>
</div>

The markup for the component is just a copy of the original code.

<div class="col-sm-12">
<!-- <div style="width:100%;"> -->
<!-- <div class=""> -->
  <div>{{data?.caption}}</div>
  <input type="text" class="form-control">
</div>

The problem arising is with the class row seems not to propagate to the component. It spreads to the full width (as it's set to 12 but it's not the width of the component holding the class row - it's smaller). Analyzing the markup in the console of the browser, I can see that the only difference is that there's a tag for the custom control injected in the structure like this:

div class="row"
-- app-textbox
-- -- div class="col-sm-12"
-- -- input

while the "old-style" generates this:

div class="row"
-- div class="col-sm-12"
-- input

One way to handle it is to set the columns on the component in the main page like this.

<div class="row">
  <app-textbox [caption]="'Caption'" class="col-sm-12"></app-input-text>
</div>

There are, however, two issues that bother me with it making me feel reluctant to this approach. First one is that the component still gets a (very tiny) extra margin of 15px on each side relative to the enclosing component (all the item have it but the custom app-textbox gets it twice, probably due to encapsulation). The other issue is that this kind of defeats the purpose of the encapsulation.

I've tried spreading the width of the components and setting different styles/classes to the input boxes etc. After a few hours, I realize that I'm at a loss.

Is it possible to make the injected tag app-textbox spread fully in its parent?

Answer 1

I had the same issue. Here is the way I solved it.

Original app.component.html:

<div class="container-fluid">
  <div class="row">
   <app-one></app-one>
   <app-two></app-two>
  </div>
</div>

Original one.component.html:

<div class="col-9">
 <p>One</p>
</div>

Original two.component.html:

<div class="col-3">
 <p>Two</p>
</div>

I moved 'col' divs from one and two components to the app component:

New app.component.html:

<div class="container-fluid">
  <div class="row">
   <div class="col-9">
    <app-one></app-one>
   </div>
   <div class="col-3">
    <app-two></app-two>
   </div>
  </div>
</div>

New one.component.html:

<p>One</p>

New two.component.html:

<p>Two</p>