Googly Eyes Radio Buttons

Post Reply
Posts: 46
Joined: 08 Mar 2017, 23:46

28 Feb 2019, 04:58


Some of our radio buttons look a little bit off-center when they are in the selected state.
At first, I thought that this might be an issue with styles in our code, as it appeared as if the radio buttons on the Poseidon demo looked fine at first glance.

However, I also see the problem on the Poseidon NG demo page:

On the 3 RadioButtons there,

* On Chrome on Windows and Linux:
Ultima looks fine. Icarus looks fine. Omega looks just a little bit off center as to be noticeable.

* On Firefox on Windows:
Ultima looks fine. Icarus and Omega look off center when selected.

* On Firefox on Linux:
All 3 buttons look centered when selected.

I am wondering if this is a side effect of mixed usage of px and em units.

Thank you.

Posts: 446
Joined: 12 Sep 2017, 10:44

05 Mar 2019, 09:49

Thank you for feedback. We fixed for next release but you can add the below code in your stylesheet or src/assets/sass/overrides/_theme_styles file until release;

Code: Select all

body .ui-radiobutton .ui-radiobutton-box .ui-radiobutton-icon {
    width: 0.857em;
    height: 0.857em;
    margin-top: -0.429em;
    margin-left: -0.429em;

Posts: 46
Joined: 08 Mar 2017, 23:46

06 Mar 2019, 01:57

Hello, thank you for the timely response. We just found this ( ... t-centered ), and the following seems to work for us in our Poseidon overrides file:

Code: Select all

body .ui-radiobutton .ui-radiobutton-box .ui-radiobutton-icon {
    margin: auto;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    font-size: inherit;
I don't know which solution would be more universally applicable (aka, look nice) at various zoom levels and browsers.
We will keep an eye out for this when we update to the next release.

Thank you again.

Post Reply

Return to “Poseidon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest