We are using both the radial and linear gauges in our own jQuery UI widget wrappers. These custom widgets are then added dynamically to a "canvas" window in our product. This had been working well until recently, when we noticed that sometimes the Kendo gauges would not always appear centered in their container divs. See the attached .PNG files for an example of a "misaligned" gauge, as well as the proper alignment.
When a gauge is misaligned, any small change to the browser window size will cause it to immediately "snap" into position. So, clearly the gauge is responding to some window message to reflow the page.
Our developers have spent a long time trying to solve the initial misalignment problems. We found that setting a timer when the page loads and then calling the gauges' "resize(true)" method would cause the gauges to align properly. However, a lot happens in the page when it loads so it was always tricky to set the timer delay so it didn't occur "too soon" to have an effect. Even so, this workaround has not been effective in every case and our customers have started to notice the issue.
I have noticed that misalignment seems to occur most often in recent versions of Chrome and Edge browsers. Firefox and Internet Explorer don't appear to suffer the same issue. We are still using an older version of Telerik controls: 2018.3.911.
In my rather extensive testing of this issue the past few days I have noticed that a in simpler "preview" page that one type of our widget seems to always be initially misaligned but another widget type behaves properly. I have looked for differences between the two widgets (both based on Kendo radial gauges) and aside from default CSS, layout and labeling differences, the two widgets are pretty similar. I can't explain the difference but it seems reproducible.
Any thoughts about could be going wrong? We could prefer to avoid the "resize" method of solving this issue, if possible. What message do the gauges respond to when the browser window is resized?
I can provide details on how the widgets are rendered and the appropriate CSS upon request.
New Boundary Technologies