RadzenProfileMenu is cut off

mvoxland · June 25, 2026, 4:37pm

I'm sure you guys are busy with the new 11 release, but I have been noticing a visual bug with the RadzenProfileMenu that makes my web app look quite ugly. I finally managed to reproduce it and find the cause.

My site has a profile menu on the upper right corner of the site, and on certain monitor resolutions / page zoom factors it will display with some of it cut off on the right side (as pictured below). A large enough PanelMenu width hides the issue, so I used one for someone with an extremely short name "m", though the issue happens even for users with names like "Bobby"

The issue happens due to the presence of a css addition to the element's style tag inset-inline-start: -4.57764e-05px;, which is only present while the bug is happening (at least in my testing). If it's removed in chrome DevTools, then it positions itself correctly.

This value gets set on the following line of Radzen.Blazor.js in the toggleMenuItem function:

github.com/radzenhq/radzen-blazor

Radzen.Blazor/wwwroot/Radzen.Blazor.js

v11.0.4


      
              }
            }
          
            // Shift dropdown left/right if it overflows the scroll parent or viewport
            children.style.insetInlineStart = children.style.insetInlineStart || '';
            var childRect = children.getBoundingClientRect();
            var rightBoundary = scrollParent ? scrollParent.getBoundingClientRect().right : document.documentElement.clientWidth;
            var leftBoundary = scrollParent ? scrollParent.getBoundingClientRect().left : 0;
            if (!isRtl && childRect.right > rightBoundary) {
              var offset = parseFloat(children.style.insetInlineStart) || 0;
              children.style.insetInlineStart = (offset + rightBoundary - childRect.right) + 'px';
            } else if (isRtl && childRect.left < leftBoundary) {
              var offset = parseFloat(children.style.insetInlineStart) || 0;
              children.style.insetInlineStart = (offset + leftBoundary - childRect.left) + 'px';
            }
          } else {
            children.onanimationend = function () {
              children.style.display = 'none';
              children.style.insetInlineStart = '';
              children.onanimationend = null;
            }

The if() case gets tripped because (in my testing) childRect.right = 1311.8181610107422 is greater than rightBoundary = 1311.818115234375.

I'm sure that you have encountered issues similar to this in the past, so you will likely have an exact idea of what is happening, but to me it looks like a precision issue where the sub-pixel decimal is not accurate past the third decimal place. Some ideas on how to fix it:

In the if() case, round both childRect.right and rightBoundary to three decimal places. If they are that close to equal, I doubt it really needs any shifting even if it is overflowing. That would mean that inset-inline-start is never set, and this specific bug never occurs.
Round the values everywhere they are fetched using getBoundingClientRect() since apparently the values are not completely reliable. This may fix other bugs related to sub-pixel decimal accuracy, though would be a much wider change.