Sampath Sampath - 1 month ago 12
Sass (Sass) Question

Applying CSS to the Child component is not working

I have an inner component as 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 I have tried to override the 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 to apply
presentation .presentation .span-icon
to the child component.But you can see that it doesn't apply.Can you tell me how to do that?

enter image description here

Note: But if I add it inside the browser under the
element.style
then it works.So can you tell me where is the issue?

Answer Source

Put a space in between the operator and operand like this right: calc(100% - 55%); to work it properly.

Clue: Browser error: Invalid property value