Options in<cv-overflow-menu> get truncated in Mobile View when the viewport isn't wide enough to fit them
astarmist opened this issue · comments
Detailed description
Is this a feature request (new component, new icon), a bug, or a general issue?
Bug
Is this issue related to a specific component?
<cv-overflow-menu>
What did you expect to happen? What happened instead? What would you like to see changed?
Expected that the overflow menu options will not be truncated, and be placed on the other side if there is insufficient space
What browser are you working in?
Chrome
What version of the Carbon Design System are you using?
2.34.0
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
N.A
Steps to reproduce the issue
- Setup Carbon Vue in the project
- Create a new Vue component and use inside the template, along with some
- Set the props for flip-menu to true.
- Use a Mobile device or Chrome Debugger Mobile Simulator with a width of 360px and click on the overflow menu
- Notice that the the options get partially truncated at the edge of the screen
Additional information
- Screenshots or code
It looks like you have the flip-menu set to true so the the menu opens to the left. For this view port I think you should set flip-menu to false.
https://vue.carbondesignsystem.com/vue3/?path=/story/component-cvoverflowmenu--default-story
This issue has been marked as stale because it has required additional
info or a response from the author for over 14 days. When you get the
chance, please comment with the additional info requested.
Otherwise, this issue will be closed in 14 days.