MessageView: item is truncated in dialog and doesn't allow switching to details view
lochannimje opened this issue ยท 12 comments
Describe the bug
In Safari browser, information/error message is not showing fully, In other browsers, able to see the complete message. The issue is there in web component itself. Kindly do help us here!
Isolated Example
No response
Reproduction steps
...
Expected Behaviour
It should show the complete message, or the message should go in next line with scrollbar provided.
Screenshots or Videos
![image](https://private-user-images.githubusercontent.com/65588981/343753963-76969b19-f185-40ca-9b46-87a90b29c466.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI4MDk5MTksIm5iZiI6MTcyMjgwOTYxOSwicGF0aCI6Ii82NTU4ODk4MS8zNDM3NTM5NjMtNzY5NjliMTktZjE4NS00MGNhLTliNDYtODdhOTBiMjljNDY2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODA0VDIyMTMzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYyOGI1YTk4MDk4OTFiMjM1YjAwOWM2ZGMyOGMwMmVmNmJlOTg5YmM0MzU1MzcxMWI2OTdlZGY5ZjRiZDllYTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.e162Bt5su7dTnGtABQtAjImawYi9UDzKsSO37KcBeCE)
UI5 Web Components for React Version
1.16.3
UI5 Web Components Version
1.14.0
Browser
Safari
Operating System
ios
Additional Context
No response
Relevant log output
No response
Organization
SAP Labs Ltd, Bengaluru
Declaration
- Iโm not disclosing any internal or sensitive information.
Hi @lochannimje
Please follow the guidelines for opening issues. "[Component Name]: [Bug Description]" doesn't give information of the affected component and neither of what the issue is about.
Also, please add a reproducible example, preferably by using this StackBlitz template.
Hi @Lukas742
please click the link: https://sap.github.io/ui5-webcomponents-react/?path=/story/user-feedback-messageview--message-view-in-dialog
and then click on Open Dialog
![image](https://private-user-images.githubusercontent.com/65588981/344160766-6422d96d-6e23-4534-94b4-d8cfa7452adb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI4MDk5MTksIm5iZiI6MTcyMjgwOTYxOSwicGF0aCI6Ii82NTU4ODk4MS8zNDQxNjA3NjYtNjQyMmQ5NmQtNmUyMy00NTM0LTk0YjQtZDhjZmE3NDUyYWRiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODA0VDIyMTMzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg3NWQyYzAyZmQ3Yzk1YjI2NDdlZjU0MjVjOTRmNjc3NDI0ZmYyM2FmZGRhM2YyNzNhNzA4MzFiNzQwM2MyMmUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.dt1ftbhKJmOHPmycvWiuac0C1pDuzzjnLc5dhobgoh0)
you can see the highlighted message, it is not showing fully, can see dots there.
Expected behaviour: It can show the message fully.
This is not related to the MessageView
but the Dialog as it has a width
of 400px
defined in our example. The linked PR will adjust this.
So, in your application you can adjust the behavior of the Dialog to your use-case.
Hi @Lukas742,
The above issue comes in Safari browser, for other browser it is working as expected. Please help me over here!!
Hi @lochannimje
maybe Safari makes the text a bit bolder, or calculates the dimension of the font somehow differently, but the root cause of this is still the same (at least in our Storybook).
We're setting a width
(only in our documentation, not in the component itself) of 400px
and since the text is longer than that, it gets truncated.
In your application, it's up to you to decide what dimensions you want to use for the Dialog.
2024-07-01_14-13-20.mp4
If there's a different issue with the component, please add a reproducible example.
Hi Lukas742,
I see that the Title control is used to display the text in the MessageView in https://github.com/SAP/ui5-webcomponents-react/pull/5993/files. Can't we set the 'wrappingType' property to 'Normal' in the Title control? This could solve the issue for us.
Hi @pppwr7
unfortunately not, since this behavior is by design. You can see the same behavior in the SAPUI5 implementation (just change one of the titles to a very long one). Titles should be short and meaningful, for further information you can use the detail view.
In case you want to open a feature request for the wrapping behavior, please first open a ticket in central design and include the ID in the feature request.
Hi Lukas742,
In the SAPUI5 implementation, they have feature to enable navigation icon for long text, on click of which one can view the full text in details page.
Hi @Lukas742,
May I know the release version for the above changes.
๐ This issue has been resolved in version v1.29.4 ๐
The release is available on v1.29.4
๐ This issue has been resolved in version v2.0.0-rc.0 ๐
The release is available on v2.0.0-rc.0
Your semantic-release bot ๐ฆ๐