html - Applying CSS to the Child component is not working -
i have inner component shown below(i.e. presentation
) .
edit-playlist.html
<ion-grid no-padding> <ion-row> <ion-col col-3> delete </ion-col> <ion-col col-6> <presentation [data]="d"></presentation> </ion-col> <ion-col col-3> text desc </ion-col> </ion-row> </ion-grid>
edit-playlist.scss (here have tried override child's css
within parent)
page-edit-playlist { .content { presentation .presentation .span-icon { right: calc(100%-55%); } } }
presentation.html
<div class="presentation"> <span class="span-icon"><ion-icon [name]="data.icon"></ion-icon></span> <span class="bottom-text">{{data.text}}</span> <img [src]="data.imageurl" [alt]="data.text" /> </div>
presentaion.scss (child css
)
presentation { .presentation { position: relative; display: inline-block; width: 100%; height: 100%; overflow: hidden; } .presentation .span-icon { position: absolute; top: 5px; right: calc(100% - 96%); color: #fff; } .presentation .bottom-text { position: absolute; bottom: 16px; right: calc(100% - 94%); color: #fff; } }
i need apply presentation .presentation .span-icon
child component.but can see doesn't apply.can tell me how that?
note: if add inside browser under element.style
works.so can tell me issue?
put space in between operator , operand right: calc(100% - 55%);
work properly.
clue: browser error: invalid property value
Comments
Post a Comment