CODEWITHSUNDEEP
csssassangular7ionic4shadow-dom
Ariel
Ariel

Reputation: 1527

ionic4: ion-item border-top-left-radius, -top-right, -bottom-left, -bottom-right

So, I've been doing a project with Ionic v4 and now I can't seem to get a border radius working, because I'm using classes to detect on an ngFor if it's the first item or the last item.

If its the first item, it should only change top-left and top-right border radius. And if it's the last item, it should only change bottom-left and bottom-right border radius.

Problem is: since it works with Shadow DOM I cannot apply that CSS.

What I did was:

In my component.scss

:host {
  ion-item {
    &.first {
      --border-radius: 12px;
      //   --border-top-left-radius: 12px;
      //   --border-top-left-radius: 12px;
      //   border-top-left-radius: 12px;
      //   border-top-left-radius: 12px;
    }
  }
}

But that's not what I want, the commented CSS won't work. And the only var to change that Shadow DOM styles are for the 4 border-radius according to the documentation: ion-item Ionic Documentation.

I've also tried to hardcore a style into the element but it won't work.

If someone can throw some light into this I'd really appreciate it.

Thanks for your time!

Upvotes: 2

Views: 5099

Answers (1)

Dylan
Dylan

Reputation: 208

The border-radius property takes up to 4 different values.

The values are described in this order - first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner.

#example {
  border-radius: 50px 20px 30px 10px;
}

You can get more information on the border radius property here

More over, I think you are not selecting the first-child correctly

In a nested SCSS file, you'd rather type:

&:first-child {
    border-radius: 12px 12px 0 0;
  }

Check this on JSFiddle

Upvotes: 6

Related Questions