valueStateMessage Styling issue

[michelle-ha]

Is your feature request related to a problem?

When there is a valueStateMessage and I scroll down the page, the message is still shown and overlaps with the other content.

Describe the solution you'd like

It appears this is because the valueStateMessage is rendered as a floating element by UI5 Web Components, so it can overlap content below when the page scrolls. Would like the position of the valueStateMessage to remain below the relevant input.

Describe alternatives you've considered

Overriding the default styling for all valueStateMessages

Additional Context

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @michelle-ha

I wasn't able to reproduce the described behavior (see video below). Please add an isolated, reproducible example showing the issue, preferably by using this StackBlitz template.

2026-02-25_09-31-36.mp4

[michelle-ha]

Hi @Lukas742 ,

Thanks for the reply. It looks like this scenario happens in certain cases. In this example I paired it with a dialogue with a Header and it appeared:

Screen.Recording.2026-02-25.at.9.51.33.AM.mov

[Lukas742]

Thanks @michelle-ha, I was able to reproduce the issue now.

For future reference, you can share StackBlitz examples by editing it and then posting the link here. They make it much easier for us to reproduce issues and provide more accurate assistance if adjustments are needed. No need to share one for this case though 😉

Since Input and valueStateMessage are developed in the ui5/webcomponents repository, I’ll transfer this issue there so the component owners can take a closer look.

---

Hi Colleagues,
when a valueStateMessage is opened inside an element in the top-layer, the valueStateMessage doesn't close when it's outside of the bounding area of the opener's container.

Here you can find a reproducible example without our wrapper or React: https://stackblitz.com/edit/github-nkjjwvaw?file=index.html,main.js,package.json