Lukas742
commented
4 months ago Hi @Brahmansh
if not enough space is available, the headerText is truncating its content by design. To prevent that you could:
- Define a
min-widthto only allow the dialog to shrink to a specific width. - Show the Dialog in its fullscreen representation (on mobile the whole screen is used) by setting
stretch. This will only give you a few pixels more space, but maybe that's already enough. - Use a custom header in the
headerslot and apply your own behavior there. (e.g. text wrapping)
Since the current behavior is following the intended design, I'm going to close this issue.
Describe the bug
We are using Dialog component with headerText property. With zoom settings and with 320 px viewport we observed that long dialog title is getting truncated with ellipsis.
Isolated Example
No response
Reproduction steps
https://sap.github.io/ui5-webcomponents-react/?path=/docs/modals-popovers-dialog--docs Click on 'Open dialog' button and replace header text with really long text and reduce the screen size to see ellipsis in the header.
Expected Behaviour
Dialog title should not be truncated and should be fully visible.
At 1280 px view port width and 200% zoom page content is expected to reflow without any loss/truncation of content. At 320 px viewport width, the page contents is expected to scale and reflow to fit the resized viewport without any loss of data or functionality.
Screenshots or Videos
No response
UI5 Web Components for React Version
1.29.4
UI5 Web Components Version
2.0.1
Browser
Chrome
Operating System
No response
Additional Context
No response
Relevant log output
No response
Organization
SF
Declaration