{"action":"created","issue":{"url":"https://api.github.com/repos/atomiks/tippyjs/issues/376","repository_url":"https://api.github.com/repos/atomiks/tippyjs","labels_url":"https://api.github.com/repos/atomiks/tippyjs/issues/376/labels{/name}","comments_url":"https://api.github.com/repos/atomiks/tippyjs/issues/376/comments","events_url":"https://api.github.com/repos/atomiks/tippyjs/issues/376/events","html_url":"https://github.com/atomiks/tippyjs/issues/376","id":387514613,"node_id":"MDU6SXNzdWUzODc1MTQ2MTM=","number":376,"title":"Feature Request: Explicitly set the popper's width based on reference width","user":{"login":"jemhuntr","id":6434778,"node_id":"MDQ6VXNlcjY0MzQ3Nzg=","avatar_url":"https://avatars2.githubusercontent.com/u/6434778?v=4","gravatar_id":"","url":"https://api.github.com/users/jemhuntr","html_url":"https://github.com/jemhuntr","followers_url":"https://api.github.com/users/jemhuntr/followers","following_url":"https://api.github.com/users/jemhuntr/following{/other_user}","gists_url":"https://api.github.com/users/jemhuntr/gists{/gist_id}","starred_url":"https://api.github.com/users/jemhuntr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jemhuntr/subscriptions","organizations_url":"https://api.github.com/users/jemhuntr/orgs","repos_url":"https://api.github.com/users/jemhuntr/repos","events_url":"https://api.github.com/users/jemhuntr/events{/privacy}","received_events_url":"https://api.github.com/users/jemhuntr/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-12-04T22:48:45Z","updated_at":"2018-12-05T05:35:50Z","closed_at":null,"author_association":"NONE","body":"Hi!\r\n\r\nFirst of all, this is a wonderful library built upon popperjs.\r\n\r\nI'm trying to replace and standardize all my popups with tippy/popper to avoid off-screen and overflow issues. This includes form elements like custom searchable `<select>` inputs. I can easily move the popup into a tippy instance, although the positioning engine lets the content decide on the popper width.\r\n\r\nWould it be possible to somehow keep the reference element's width (or height) at all times so the popup is constantly flush with the reference on both sides?\r\n\r\nCurrently, it requires a bit of work to manually set the size just to keep them in sync. Would be great if the library can handle this scenario built-in."},"comment":{"url":"https://api.github.com/repos/atomiks/tippyjs/issues/comments/444364953","html_url":"https://github.com/atomiks/tippyjs/issues/376#issuecomment-444364953","issue_url":"https://api.github.com/repos/atomiks/tippyjs/issues/376","id":444364953,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NDM2NDk1Mw==","user":{"login":"atomiks","id":22450188,"node_id":"MDQ6VXNlcjIyNDUwMTg4","avatar_url":"https://avatars3.githubusercontent.com/u/22450188?v=4","gravatar_id":"","url":"https://api.github.com/users/atomiks","html_url":"https://github.com/atomiks","followers_url":"https://api.github.com/users/atomiks/followers","following_url":"https://api.github.com/users/atomiks/following{/other_user}","gists_url":"https://api.github.com/users/atomiks/gists{/gist_id}","starred_url":"https://api.github.com/users/atomiks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/atomiks/subscriptions","organizations_url":"https://api.github.com/users/atomiks/orgs","repos_url":"https://api.github.com/users/atomiks/repos","events_url":"https://api.github.com/users/atomiks/events{/privacy}","received_events_url":"https://api.github.com/users/atomiks/received_events","type":"User","site_admin":false},"created_at":"2018-12-05T05:35:50Z","updated_at":"2018-12-05T05:35:50Z","author_association":"OWNER","body":"> Currently, it requires a bit of work to manually set the size just to keep them in sync\r\n\r\nIs it something like this? Doesn't respond to reference size changes while showing though\r\n\r\n```js\r\ntippy(ref, {\r\n  distance: 0,\r\n  onShow({ popper, reference }) {\r\n    popper.style.width = reference.getBoundingClientRect().width + 'px'\r\n  }\r\n})\r\n```"}}
{"actor":{"display_login":"atomiks"}}