2

I am having a problem with ngStyle after updating to angular 7. In angular 5 its working fine.

Using ngStyle I am dynamically applying style with Css grid.

but dont know why 'grid-column': '1 / span 2' is not working.

here is my code

<div class="widthHeight100"
     [ngStyle]="getStyleForGroup(group)">
  <div *ngFor="let subGroup of group?.childs"
       [ngStyle]="getStyleForSubGroup(subGroup)">

In typescript

Grid container:

  getStyleForGroup(mdg: MdgSimple) {
let style: any = {
  'width': '100%',
  'height': '100%'
};
if (!isNullOrUndefined(mdg)) {
  if (!isNullOrUndefined(mdg.childs)) {
    if (mdg.childs.length > 0) {
      style = {
        'display': 'grid',
        'grid-template-rows': this.getGridTemplateCount(mdg.childs, true),
        'grid-template-columns': this.getGridTemplateCount(mdg.childs, false),
        'grid-column-gap': '4px',
        'grid-row-gap': '4px',
        'justify-items': 'start',
        'align-items': 'start',
        'padding': '5px'
      };
    }
  }
}
return style;

}

Childs:

  getStyleForSubGroup(mdsg: MdsgSimple) {
let style: any = {
  'width': '100%',
  'height': '100%'
};
if (!isNullOrUndefined(mdsg) && !isNullOrUndefined(mdsg.layout)) {
  style = {
    'grid-row': this.getCssRowInfo(mdsg),
    'grid-column': this.getCssColumnInfo(mdsg),

    'height': this.getHeight(mdsg),
    'width': this.getWidth(mdsg),
    'min-width': this.getMinWidth(mdsg),
    'max-width': this.getMaxWidth(mdsg),
    'min-height': this.getMinHeight(mdsg),
    'max-height': this.getMaxHeight(mdsg),
  };
}
return style;

}

But controls are overlapping each other. I have checked using chrome css element inspector grid area showing unsafe.

But its all working fine in angular 5 version. example 1 / span 2 also not working

here is screen shot for error. enter image description here

Any suggestion please ?

naresh mesineni
  • 67
  • 1
  • 8

2 Answers2

-1

HTML

<p [ngStyle]="myStyles">
    Hello World!
</p>

TS

myStyles = {
    'color': 'red',
    'font-size': '20px',
    'font-weight': 'bold'
}

I just write very basic code, Try this I hope it'll help you out. Thanks

Hassan Siddiqui
  • 2,799
  • 1
  • 13
  • 22
  • above code works. But my code is different. Its works fine in Angular5 not in 7 – naresh mesineni Mar 20 '19 at 13:20
  • Please share what error are you facing. Because I verify this code in my Angular7 app. – Hassan Siddiqui Mar 20 '19 at 13:24
  • I am not getting any error. But controls are overlapping like in screen shot. When I inspect the elements using chrome debugger, the grid-area showing unsafe. – naresh mesineni Mar 20 '19 at 15:23
  • Please share fiddle for the overlapping issue, because it’s difficult to verify CSS related issue in screenshot. Thanks – Hassan Siddiqui Mar 23 '19 at 01:24
  • This grid property seems to be interprated differently by angular https://github.com/angular/angular/issues/28897. Personally, the fix i found was to list possibilities and dynamically assigned the class to the element: .app-scroller-spread-row-4 { grid-column: 1 / 6; }.app-scroller-spread-row-5 { grid-column: 1 / 7;} – sebge2 Feb 12 '21 at 19:42
-1

I have the exact same issue. ngStyle is replacing this: { 'grid-column': (width > 1 ? column + ' / ' + (column + width) : column + ''), 'grid-row': '' + row }
with this: style="grid-area: 1 / unsafe / auto / unsafe when width > 1

user2762412
  • 22
  • 2