Akryum / Akryum/vue-mention

Tooltip renders outside of mobile view

Open
#27 2 comments 0 reactions 0 assignees View on GitHub
need-feedback
Dominant language
Vue
Stars
556
Forks
58
PR merge metrics
No merged PRs in 30d

Description

In all of my implementations of vue-mention, the popup is positioned partially off screen on mobile. It appears like popper is calculating the left position outside of the boundaries of the viewport.

Quick example [browser](https://xkz9v.csb.app/) / [codesandbox](https://codesandbox.io/s/vue-mention-sandbox-forked-xkz9v)

![image](https://user-images.githubusercontent.com/4613/99881716-365a1f80-2bd0-11eb-9b0a-3ba062069298.png)

However, when I look at the demo on [vue-mention.netlify.app](https://vue-mention.netlify.app/), the position appears to be calculated correctly.

![image](https://user-images.githubusercontent.com/4613/99881708-1a567e00-2bd0-11eb-8a89-e82f10bd94eb.png)

I doesn't appear to be just margin on the input. If I remove the margin from the netlify demo, the popup still renders well within the view.

Thoughts on this?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.