CODEWITHSUNDEEP
htmlcssangular
user2044754
user2044754

Reputation: 63

Angular Nested CSS Div Table Alignment Issue

I am trying to create my own tree table in Angular, however the problem I am having is that the columns are aligning improperly. I am able to successfully call a component recursively, but it displays in the wrong format. Essentially I have the following:

Here is what that looks like in practice

Parent Component

<div style="display:table;">
  <div style="display: table-header-group; font-weight:bold;">
    <div style="display:table-cell;padding 3px 10px;">Column A</div>
    <div style="display:table-cell;padding 3px 10px;">Column B</div>
    <div style="display:table-cell; padding 3px 10px;">Column C</div>
  </div>
  <div style="display:table-row-group">
    <childselector [childinformation]="informationarray"></childselector>
  </div>

  </div>

Child Component

<div style="display: table-row;">
      <div style="display:table-cell; padding 3px 10px;">{{Content A}}</div>
      <div style="display:table-cell; padding 3px 10px;">{{Content B}}</div>
      <div style="display:table-cell; padding 3px 10px;">{{Content C}}</div>
    </div>
<ng-container *ngIf="child.informationarray.length>0">
          <childselector [childinformation]="child.informationarray"></childselector>
        </ng-container

**Note: The Above was pseudo code, but I hope you can get the idea. The following CSS problem emerges -- instead of the table appearing like this:

|Column A    |Column B     |Column C|
......................................
|Row1-A      |Row1-B       |Row1-C  |
......................................
|SubRow1-A   |SubRow1-B    |SubRow1-C|

It looks like this:

|Column A                            |Column B     |Column C|
.............................................................
|Row1-A                              |Row1-B       |Row1-C  |
.............................................................
|SubRow1-A   |SubRow1-B    |SubRow1-C|             |

I created a plunkr to better illustrate the problem here:

https://embed.plnkr.co/gVEEJa06eJPd0rvelFdv/

Greatly appreciate any help with this.

Upvotes: 0

Views: 569

Answers (1)

caiovisk
caiovisk

Reputation: 3809

Issue here is the subrow component gets wrapped in the DOM (<subrow>[...]</subrow>), then you loose the display table feature on that.

Solution here would be using attribute selectors

@Component({
  selector: '[subrow]'
  ...
})

and then use it like

<div style="display: table-row;" subrow></div> instead <subrow></subrow>

see: https://plnkr.co/edit/x8grzu5XWMcGA96g0HA9

Upvotes: 1

Related Questions