Last Updated: 09 Apr 2024 07:45 by ADMIN
Created on: 02 Apr 2024 10:25
Category: Kendo UI for Angular
Type: Bug Report
Incorrect scaling/positioning of radio button's inner circle

The inner circle of radio buttons are incorrectly scaled/positioned in Bootstrap themes. The radio buttons in bootstrap theme are by default dependent on "rem" unit. For applications, that specify different base for "rem" unit, than 16px, it is possible to naturally override dimensions of the radio button without any specific overrides.


In example application, the following points are important:

1. :root specifies font-size=24px. So 1rem=24px.

2. Radio buttons uses size="small". The width and height then defaults to 0.75rem=18px.


Important note, is that the wrong positioning of inner circle is most visible when scaling down the browser view. There is offset by 1px to the sides. The image in the attachments is screenshot from the application and demonstrates the offset in pixels from the sides. The first number above the radio button is the offset of the inner circle in pixels from the left, the second number after "/" is the offset of inner circle from the right.


This issue appears only if the dimensions are being increased/decreased in respect to the default "medium" size. If the radio button is scaled using "scale" CSS function, then the scaling is correctly preserved. Also I didn't notice any problem for the "medium" sized radio button in any browser view. The root font-size might not be important for bug to be reproducible, but inconsistencies are then more visible.

Attached Files:
1 comment
Posted on: 09 Apr 2024 07:45

Hello Peter,

We do our best to make all our components to look as good as possible in different browsers with different zoom level.

However, in general, we do not commit on fixing issues caused by (only reproducible on) zoomed in/out browsers.

That being said, I double-checked the styles implementation of our Radio button and everything seems to be fine. The issue you report is caused by the browsers rendering engine - it is a known issue (in general, not with our components) that some elements might get misaligned in different zoom levels. If you check this Stackblitz example with Firefox you will notice that there is almost no misalignment, and if you check it with Chrome the misalignment will be more noticeable.

You might also want to check the original Bootstrap Radio button. There is also misalignment in the different zoom levels.

Let us know if you have any questions or if you need anything else.

Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources