radio select 'ball' not centered in IE 11 and FF

[Bank Mendes Gans]

Hi all,

The ball that appears when you select a radio button in IE 11 or FireFox is not rendered in the center of the radio outline. At least in our setup: Tomcat 8.5.15, Mojarra 2.3.2, PrimeFaces 6.1.11, Serenity 1.0.1.

https://ibb.co/mCEW96:

The 'ball' here is now to the left, but changing the size of the browser window one pixel makes it 'jump' to the right:

https://ibb.co/jZBB96:

In these examples the ball also is rendered more to the top. In have also seen it rendered more to the bottom.

FireFox 57 renders the 'ball' off center to the right on every browser, and also more to the bottom:

https://ibb.co/gnujwm:

Any way to compensate for this?

Cheers,
Leo Mekenkamp

[kubrasulukan]

Hi Leo,

We fixed the problem for the next release.

You can use this code block in the meanwhile.

Code: Select all

.ui-radiobutton-box {
	width: 16px;
	height: 16px;
	
	.ui-radiobutton-icon {
		left: 0;
		width: 20px;
		height: 20px;
	}
}

Thank you,
Best regards,

[Bank Mendes Gans]

Ah, thanks. We have not yet set up a dynamic build using Sass We use the serenity-theme jar directly, so I use the following quick fix based on your input:

Code: Select all

    <h:outputStylesheet id="radioButtonWobbleFix">
        .ui-radiobutton-box {
            width: 16px !important;
            height: 16px !important;
        }

        .ui-radiobutton-box .ui-radiobutton-icon {
            width: 20px !important;
            height: 20px !important;
        }
    </h:outputStylesheet>

This solution however makes the ball elliptic on some screen sizes in IE, so I hope your solution does it better.

[mert.sincan]

Glad to hear, thanks a lot for the update!

Regards,