Within my codebase, there are numerous controls declared in the following manner.
<div class="row">
<div class="col-sm-12">
<div>Caption</div>
<input type="text" class="form-control">
</div>
</div>
In an attempt to refactor my code, I decided to introduce a component to encapsulate this specific behavior.
<div class="row">
<app-textbox [caption]="'Caption'"></app-textbox>
</div>
The component's markup is essentially a replication 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>
An issue arises with the class row not propagating to the component. While it spans the full width (as specified by 12 but it's not the width of the component containing the row class - it's narrower). Upon inspecting the markup in browser console, the difference lies in the custom control tag injected into the structure like this:
div class="row"
-- app-textbox
-- -- div class="col-sm-12"
-- -- input
Conversely, the "old-style" generates this:
div class="row"
-- div class="col-sm-12"
-- input
One approach to addressing this is by setting the columns on the component directly in the main page like so.
<div class="row">
<app-textbox [caption]="'Caption'" class="col-sm-12"></app-input-text>
</div>
However, there are two concerns that give me pause about this method. Firstly, the component still receives a slight additional margin of 15px on each side relative to the enclosing component (all items have it, but the custom app-textbox receives it twice, likely due to encapsulation). The second concern is that this approach somewhat defeats the purpose of encapsulation.
I have attempted to adjust the widths of the components and apply different styles/classes to the input boxes, but after investing several hours, I find myself at a standstill.
Is there a way to ensure that the injected app-textbox tag spreads fully within its parent container?