{"action":"created","issue":{"url":"https://api.github.com/repos/vaadin/vaadin-combo-box/issues/529","repository_url":"https://api.github.com/repos/vaadin/vaadin-combo-box","labels_url":"https://api.github.com/repos/vaadin/vaadin-combo-box/issues/529/labels{/name}","comments_url":"https://api.github.com/repos/vaadin/vaadin-combo-box/issues/529/comments","events_url":"https://api.github.com/repos/vaadin/vaadin-combo-box/issues/529/events","html_url":"https://github.com/vaadin/vaadin-combo-box/issues/529","id":258925379,"number":529,"title":"Allow customizing overlay width","user":{"login":"marcushellberg","id":883698,"avatar_url":"https://avatars3.githubusercontent.com/u/883698?v=4","gravatar_id":"","url":"https://api.github.com/users/marcushellberg","html_url":"https://github.com/marcushellberg","followers_url":"https://api.github.com/users/marcushellberg/followers","following_url":"https://api.github.com/users/marcushellberg/following{/other_user}","gists_url":"https://api.github.com/users/marcushellberg/gists{/gist_id}","starred_url":"https://api.github.com/users/marcushellberg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/marcushellberg/subscriptions","organizations_url":"https://api.github.com/users/marcushellberg/orgs","repos_url":"https://api.github.com/users/marcushellberg/repos","events_url":"https://api.github.com/users/marcushellberg/events{/privacy}","received_events_url":"https://api.github.com/users/marcushellberg/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-09-19T18:51:25Z","updated_at":"2018-03-20T14:10:31Z","closed_at":null,"author_association":"MEMBER","body":"Expose a property like `--vaadin-combo-box-width` that can be used to configure the overlay width. \r\n\r\nWould be helpful especially in situations where the dropdown contents are wider than the actual input field. \r\n<img width=\"290\" alt=\"screen_shot_2017-09-18_at_5 12 11_pm\" src=\"https://user-images.githubusercontent.com/883698/30609650-dbcb2d38-9d30-11e7-870c-c4bebb6e9aba.png\">\r\n"},"comment":{"url":"https://api.github.com/repos/vaadin/vaadin-combo-box/issues/comments/374611447","html_url":"https://github.com/vaadin/vaadin-combo-box/issues/529#issuecomment-374611447","issue_url":"https://api.github.com/repos/vaadin/vaadin-combo-box/issues/529","id":374611447,"user":{"login":"jouni","id":66382,"avatar_url":"https://avatars3.githubusercontent.com/u/66382?v=4","gravatar_id":"","url":"https://api.github.com/users/jouni","html_url":"https://github.com/jouni","followers_url":"https://api.github.com/users/jouni/followers","following_url":"https://api.github.com/users/jouni/following{/other_user}","gists_url":"https://api.github.com/users/jouni/gists{/gist_id}","starred_url":"https://api.github.com/users/jouni/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jouni/subscriptions","organizations_url":"https://api.github.com/users/jouni/orgs","repos_url":"https://api.github.com/users/jouni/repos","events_url":"https://api.github.com/users/jouni/events{/privacy}","received_events_url":"https://api.github.com/users/jouni/received_events","type":"User","site_admin":false},"created_at":"2018-03-20T14:10:31Z","updated_at":"2018-03-20T14:10:31Z","author_association":"MEMBER","body":"Coming back to this a bit – it doesn’t really help to expose a custom CSS property for the overlay. Because of the “teleporting”, you can’t really target the correct overlay in any way currently.\r\n\r\nWe need something like https://github.com/vaadin/vaadin-overlay/issues/48 to make it possible to target individual overlay elements.\r\n\r\nIf we could propagate the class attribute (or some other attribute) to the overlay:\r\n\r\n```html\r\n<vaadin-combo-box class=\"my-combo-box\"></vaadin-combo-box>\r\n\r\n<dom-module id=\"my-combo-box-overlay\" theme-for=\"vaadin-combo-box-overlay\">\r\n  <template>\r\n    <style>\r\n      :host(.my-combo-box) [part=\"overlay\"] {\r\n        width: 300px; /* Your custom width here */\r\n      }\r\n    </style>\r\n  </template>\r\n</dom-module>\r\n```\r\n\r\nAn unfortunate amount of boilerplate, but I can’t think of any other way right now."}}
{"actor":{"display_login":"jouni"}}