XF 2.1 problem with width/height of reactions

[Sunka]

I have sprite sheet with my 8 reactions. They show OK on hover, but when user give reaction, it shows cropped on "bar".
Reaction icons are different sizes, but they are on generated sprite image with correct parameters, just not show correct on bar where all given reactions are shown.

Also, what to add into Background size field if that is something that could help with this? I have not background size value in sprite css
Look at picture.

 

[Mike]

First, try adding a background size of 100% to see if that changes anything.

Otherwise, we might need the sprite sheet and an example configuration you used.

 

[Sunka]

First, try adding a background size of 100% to see if that changes anything.

Nop

Otherwise, we might need the sprite sheet and an example configuration you used.

See images





Ratings sprite css

.ratings {
    background-image: url(ratingssheet.png);
    background-repeat: no-repeat;
    display: block;
}

.ratings-dislike {
    width: 18px;
    height: 18px;
    background-position: -5px -5px;
}

.ratings-heart {
    width: 24px;
    height: 24px;
    background-position: -5px -33px;
}

.ratings-like {
    width: 25px;
    height: 18px;
    background-position: -5px -67px;
}

.ratings-pegula---banana {
    width: 18px;
    height: 18px;
    background-position: -5px -95px;
}

.ratings-rolleyes {
    width: 18px;
    height: 18px;
    background-position: -5px -123px;
}

.ratings-sorry {
    width: 17px;
    height: 16px;
    background-position: -5px -151px;
}

.ratings-thanks {
    width: 35px;
    height: 18px;
    background-position: -5px -177px;
}

.ratings-wtf {
    width: 18px;
    height: 18px;
    background-position: -5px -205px;
}

 

[Mike]

Sorry, I missed digging into this more. You need a background size of 180% to ensure that your sprite is scalable to the different sizes needed.

This might vary from entry to entry. In this case, your sprite is 45px wide, but what you're displaying is 25px. 45/25 is 1.8 or 180%. As you seem to have some 18px ones, I believe that'd be 45/18 which is 250%.

Saying that, you may want to consider different images. These are all smaller than what we recommend and lead to some unexpected scaling issues (especially as there isn't support for a high DPI version).

(Similar background size logic should apply to setting the sprite params for smilies as well, to ensure they are scalable.)

 

[Sunka]

Yep, I thought so.
I ended with new set of icons, with recomanded size (like defult xenforo reaction images).
I tried with 100 % background size, but it needed to be 130 %.
Why, I do not know, as I said, images are same size like default one. Only difference is distance between each one in sprite (I have 5px and default xenforo one have 10px).

OK, I sorted this problem.
But than was another one with reaction summary icons. They overlaped.
I ended up with custom css

.reactionSummary>li
{
  margin-left: 0px;
}