Lukas742
commented
3 months ago Hi @Neeeko
Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.
Hi colleagues,
the Wizard steps are misaligned in some cases. I wasn't able to reproduce the hard misalignment as shown in the 3rd screenshot, but it's there. It's probably related to WizardSteps with a two line title, rendered in the same line as steps with only a one line title.
Here you can find an example using only ui5wc without our wrapper or React. Please note that I've added red lines above and below each step to visualize the issue better, if you want to remove the lines just remove addCustomCSS.
https://stackblitz.com/edit/github-xieya7?file=index.html,main.js,package.json
elenastoyanovaa
Neeeko
ui5-webcomponents-bot
Describe the bug
It's not extremely visible (although it's there) in the sample, but more visible in our application.
In smaller screens, the Stacked (or non selected) steps are not properly horizontally aligned with the other steps numbers.
In the following example, here's how it looks like with a screen width of about 450px: https://stackblitz.com/edit/github-rhfduk?file=src%2FApp.tsx
Here's how it looks like in our application. It's way more visible.
I was unable to reproduce this issue in ui5-webcomponents playground.
Isolated Example
https://stackblitz.com/edit/github-rhfduk?file=src%2FApp.tsx
Reproduction steps
Expected Behaviour
All step numbers should be properly aligned.
Screenshots or Videos
No response
UI5 Web Components for React Version
latest
UI5 Web Components Version
latest
Browser
Chrome, Edge, Firefox, Safari
Operating System
No response
Additional Context
No response
Relevant log output
No response
Organization
SuccessFactors
Declaration