There is an issue with half star styles

[sbruksha]

There is an issue with half star, please see attached. Styles are calculated incorrectly: --halfWidth: 8.33333px; --halfMargin: -16.6667px;

-sergiy

[riteshgandhi]

Thanks for letting me know. Will take a look

[parodenas]

Hi, I am facing something similar but in my case the half star is below, attaching image, thanks.

[jpike88]

@riteshgandhi this is happening on Safari. This library is not useable in a serious application.

If I make a pull request, will you accept it in a timely manner? Otherwise I'll fork it.

[riteshgandhi]

@riteshgandhi this is happening on Safari. This library is not useable in a serious application.

If I make a pull request, will you accept it in a timely manner? Otherwise I'll fork it.

yes, I'm unable to spend time right now on this. send me

[jpike88]

@riteshgandhi great news. I promise I’ll have a PR for this issue and the other one ready Monday or Tuesday, keep your eyes on a PR!

[jpike88]

@riteshgandhi looking closely at your code. Don't mean to be rude, but it's... funky. Example: making direct modifications to zone properties like __zone_symbol__clickfalse, and using && comparisons instead of an if statement. I've made some solid changes, I'll submit my PR shortly.

[ihor-zinchenko]

same for me on iOS

[ihor-zinchenko]

any updates?)

[ItsWendell]

@IhorVimmi I have a temporary fix right here that works for me, I've put this in my theme file (or put it in your app component.

::ng-deep .star.half {
    position: relative;
    &:after {
        left: 0;
        margin-left: 0 !important;
    }
}

[riteshgandhi]

@IhorVimmi I have a temporary fix right here that works for me, I've put this in my theme file (or put it in your app component.

::ng-deep .star.half {
    position: relative;
    &:after {
        left: 0;
        margin-left: 0 !important;
    }
}

@ItsWendell thanks, I will test with the style you gave and let you know

[ItsWendell]

Also to fix half star not being actually half a star, you can overwrite width in :after with 50%, I also figured something cool out. I really wanted to customize the star shape (rounded) so I created a custom font using a rounded svg star using http://fontello.com/, set the icon to the star unicode icon: (U+2605) and set the 'star-rating' to the new font.

Here's my current snippet:

::ng-deep star-rating {
    font-family: -apple-system, BlinkMacSystemFont, 'star-font', sans-serif;
}

::ng-deep .star.half {
    position: relative;
    &:after {
        left: 0;
        margin-left: 0 !important;
        width: 50% !important;
    }
}

'star-font' here is the custom font I generated using fontello! Everything looks way better now!

Here's a screenshot of my stars: https://imgur.com/LkpnBF9

[riteshgandhi]

Also to fix half star not being actually half a star, you can overwrite width in :after with 50%, I also figured something cool out. I really wanted to customize the star shape (rounded) so I created a custom font using a rounded svg star using http://fontello.com/, set the icon to the star unicode icon: (U+2605) and set the 'star-rating' to the new font.

Here's my current snippet:

::ng-deep star-rating {
    font-family: -apple-system, BlinkMacSystemFont, 'star-font', sans-serif;
}

::ng-deep .star.half {
    position: relative;
    &:after {
        left: 0;
        margin-left: 0 !important;
        width: 50% !important;
    }
}

'star-font' here is the custom font I generated using fontello! Everything looks way better now!

Here's a screenshot of my stars: https://imgur.com/LkpnBF9

@ItsWendell I'll take a look asap and try to implement. thanks

[mino922]

Is there any update on this issue?