[VariantManagement]: [Application in width equivalent to 320 CSS pixels, ‘Save as’, ‘Manage’ buttons associated within ‘Standard’ dialog are getting truncated]
Closed this issue · 3 comments
Describe the bug
<VariantManagement
ref={vmFieldRef}
onSelect={e => updateVariantId(e.detail.selectedItems[0].id)}
onSaveManageViews={e => handleOnSaveManageViews(e, onSaveManageView,setIsStandardAutoApplyMsgBox)}
closeOnItemSelect={true}
dirtyState={isVariantDirty}
onSaveAs={e =>
handleVariantOnSave({
event: e,
currentVariant: currentVariant,
handleVariantSave: handleVariantCreate,
setNewVariantDetails: setNewVariantDetails
})
}
onSave={e =>
handleVariantOnSave({
event: e,
currentVariant: currentVariant,
handleVariantSave: handleVariantEdit,
setNewVariantDetails: setNewVariantDetails
})
}
data-testid="VariantManagementField"
onFocus={e => handleAria(e)}
>
{variantList?.map(item => {
return (
<VariantItem
aria-label={item.viewName}
// placement="right"
selected={parseInt(item.id) === parseInt(currentVariant.id)}
id={item.id}
global={item.public}
data-testid="VariantItemField"
author={item.createdBy}
isDefault={item.default}
applyAutomatically={item.autoApply}
hideDelete={item.userId !== currentUserId}
labelReadOnly={item.userId !== currentUserId}
readOnly={item.userId !== currentUserId}
key={item.id}
>
{item.viewName}
);
})}
Here we using default placement bottom. popover open at bottom side. but the popover size is not looking proper. and variant item also not display. we loss the content. see below image.
![Screenshot 2024-06-06 165549](https://private-user-images.githubusercontent.com/170628934/337246720-43669aeb-db02-45c7-9fa2-77f94ddeee15.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMjAzNjEsIm5iZiI6MTcyMTMyMDA2MSwicGF0aCI6Ii8xNzA2Mjg5MzQvMzM3MjQ2NzIwLTQzNjY5YWViLWRiMDItNDVjNy05ZmEyLTc3Zjk0ZGRlZWUxNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxNjI3NDFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xMjMxZjIxYmRjNzg1NDYyNWVlNGU3MjhkZTM3ZGY3YzgxMjUzZjM1OWJhZTBjM2QxOTdjMDYyZjQxMjE1NjE5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.7TB9b-SBrgP51XZ7XOn0nzDmCWRbhTZRVkdMAS7jxpQ)
Isolated Example
No response
Reproduction steps
...
Expected Behaviour
The contents should be present at a width equivalent to 320 CSS pixels without loss of information or functionality
Screenshots or Videos
No response
UI5 Web Components for React Version
0.27.5
UI5 Web Components Version
1.6.0
Browser
Chrome
Operating System
Windows11
Additional Context
No response
Relevant log output
No response
Organization
No response
Declaration
- I’m not disclosing any internal or sensitive information.
please add a reproducible example, by using this StackBlitz template.
Hi @Lukas742 ,
Please find the link to Storybook below. It contains a reproducible example of the issue.
Storybook Link: https://sap.github.io/ui5-webcomponents-react/?path=/story/inputs-variantmanagement--default&args=placement:Right&globals=viewport:mobile1
I am also attaching a screenshot of storybook in which when we are viewing in mobile view with width 320 pixel then the Save and Manage buttons are getting truncated.
![save and manage button truncate](https://private-user-images.githubusercontent.com/66779051/341071638-fa9e7c12-743f-491f-a3cb-21ced4a6eb8a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMjAzNjEsIm5iZiI6MTcyMTMyMDA2MSwicGF0aCI6Ii82Njc3OTA1MS8zNDEwNzE2MzgtZmE5ZTdjMTItNzQzZi00OTFmLWEzY2ItMjFjZWQ0YTZlYjhhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE4VDE2Mjc0MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM3MGEyYzUzYTJmOWM5MDdiYWI4YWJiMGFiNTEzNTI1ZTdmZGVlZTcyNDY1YzY1MjdkMWE4ZDZlYmUxMWRmN2YmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.PL4YAk2VVqQexe2WjoI2b1JP8tU5HlhCsSCzXw53NoI)
The ResponsivePopover
used as the popover for the VariantManagement
utilizes the user-agent, among other factors, to determine whether the popup should be rendered as a Dialog
(mobile) or as a Popover. Since this is not checked in runtime, but only on initial render you'll still see the Popover
if you didn't refresh the page. Opposite to the dev-tool's device view, Storybook doesn't change the user-agent, so even though the viewport is rendered with 320px
, it's not recognized as mobile and therefore a Popover
is still displayed.
If used on a mobile device, a Dialog
is displayed and all buttons are fully visible:
I'm going to close this issue now, as the component is working as intended. In case of further questions or additional feedback, please feel free to leave another message here. We're also monitoring closed issues 😉