{"action":"created","issue":{"url":"https://api.github.com/repos/vuematerial/vue-material/issues/1513","repository_url":"https://api.github.com/repos/vuematerial/vue-material","labels_url":"https://api.github.com/repos/vuematerial/vue-material/issues/1513/labels{/name}","comments_url":"https://api.github.com/repos/vuematerial/vue-material/issues/1513/comments","events_url":"https://api.github.com/repos/vuematerial/vue-material/issues/1513/events","html_url":"https://github.com/vuematerial/vue-material/issues/1513","id":297516396,"number":1513,"title":"MdTab content height is not set with async data","user":{"login":"bakgat","id":2185099,"avatar_url":"https://avatars1.githubusercontent.com/u/2185099?v=4","gravatar_id":"","url":"https://api.github.com/users/bakgat","html_url":"https://github.com/bakgat","followers_url":"https://api.github.com/users/bakgat/followers","following_url":"https://api.github.com/users/bakgat/following{/other_user}","gists_url":"https://api.github.com/users/bakgat/gists{/gist_id}","starred_url":"https://api.github.com/users/bakgat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bakgat/subscriptions","organizations_url":"https://api.github.com/users/bakgat/orgs","repos_url":"https://api.github.com/users/bakgat/repos","events_url":"https://api.github.com/users/bakgat/events{/privacy}","received_events_url":"https://api.github.com/users/bakgat/received_events","type":"User","site_admin":false},"labels":[{"id":486244808,"url":"https://api.github.com/repos/vuematerial/vue-material/labels/needs%20repro","name":"needs repro","color":"8D6E63","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-02-15T16:45:42Z","updated_at":"2018-02-25T17:17:38Z","closed_at":null,"author_association":"NONE","body":"<!--\r\n\r\nReporting a bug?\r\n================\r\n\r\n- Always search for your issue first. It may have already been answered, planned or fixed in some branch.\r\n- Open one issue per subject. Cluttered issues will be closed.\r\n- Make sure to only create issues for the newest version.\r\n- Create a declarative title and describe clearly the steps necessary to reproduce the issue. If an issue labeled \"need repro\" receives no further input from the issue author for more than 3 days, it will be closed.\r\n- If you want to show your code, please use [Codepen](http://codepen.io/pen/) or [JSFiddle](https://jsfiddle.net/). You can start with [this template](https://codepen.io/vue-material/pen/RxGmyb).\r\n- In case you found a solution by yourself, it could be helpful to explain how you have fixed it.\r\n- For bugs that involves build setups, you can create a reproduction repository with steps in the README.\r\n- If your issue is resolved but still open, don’t hesitate to close it. \r\n\r\nHave a feature request?\r\n=======================\r\n\r\n- Remove the template from below and provide thoughtful commentary.\r\n- Answer those questions:\r\n  - What will it allow you to do that you can't do today?\r\n  - How will it make current work-arounds straightforward?\r\n  - What potential bugs and edge cases does it help to avoid?\r\n\r\nDo not create new features based on a problem that will only solve edge cases for your project. Remember that Vue Material aims to be lightweight and clean. :)\r\n-->\r\n\r\n<!-- BUG REPORT TEMPLATE -->\r\n\r\n### Steps to reproduce\r\n\r\nWhen filling a MdList into MdTab content from an async source, the height is not set correctly for initial tab.\r\neg I have this in my template.\r\n\r\n`events` is filled in vuex, after calling an axios.get(...).\r\n\r\n```\r\n<md-tabs class=\"md-transparent\" md-alignment=\"fixed\">\r\n                <md-tab id=\"tab-list-view\" md-label=\"lijst\" md-icon=\"list\">\r\n                    <div class=\"md-content\">\r\n                        <md-list>\r\n                            <md-list-item :to=\"'/hikes/' + event.id\" class=\"md-double-line\" v-for=\"event in events\"\r\n                                          :key=\"event.id\">\r\n                                <div class=\"md-list-item-text\">\r\n                                    <ul class=\"meta md-layout\">\r\n                                        <li>\r\n                                            <md-icon>today</md-icon>\r\n                                            {{event.takes_place_on | shortDate}}\r\n                                        </li>\r\n                                        <li>\r\n                                            <md-icon>location_on</md-icon>\r\n                                            op {{event.start_location | fromPosition(currentLocation) | convert('m',\r\n                                            'km', 1,\r\n                                            true)}}\r\n                                        </li>\r\n                                        <li>\r\n                                            <md-icon>directions_walk</md-icon>\r\n                                            {{event.distances[0] | convert('m', 'km', 2, true)}}\r\n                                        </li>\r\n                                    </ul>\r\n                                    <div class=\"description text-primary\">\r\n                                        {{event.name}} ({{event.organised_by_club.name}})\r\n                                    </div>\r\n                                </div>\r\n                            </md-list-item>\r\n                        </md-list>\r\n                    </div>\r\n                </md-tab>\r\n                <md-tab id=\"tab-calendar-view\" md-label=\"kalender\" md-icon=\"today\">\r\n                    <div class=\"md-content\"></div>\r\n                </md-tab>\r\n</md-tabs>\r\n\r\n```\r\n\r\nInitial view is this: (where md-tabs-content is set to style=\"height: 16px;\")\r\n![](https://puu.sh/zonzG/6489105dd6.png)\r\n\r\nWhen changing tab and return back to this tab:\r\n![](https://puu.sh/zonCd/7bdcdc543a.png)\r\n\r\n \r\n<!-- I installed this, created that, running those... ? -->\r\n\r\n### Which browser?\r\n\r\nVue v2.5.13\r\nVue-material 1.0.0-beta-8\r\n\r\nAny browser\r\n\r\n### What is expected?\r\n\r\nWhen content is changed, a redraw should happen, so correct height is generated.\r\n\r\n### What is actually happening?\r\n\r\nContent height was computed before async data was loaded. \r\nSo height is set to 16px;\r\n\r\n### Reproduction Link\r\n\r\n<!-- If you want to show your code please use Codepen or JSFiddle. -->\r\n<!-- You could start with this template: http://codepen.io/vue-material/pen/WGavBE. -->\r\n"},"comment":{"url":"https://api.github.com/repos/vuematerial/vue-material/issues/comments/368326599","html_url":"https://github.com/vuematerial/vue-material/issues/1513#issuecomment-368326599","issue_url":"https://api.github.com/repos/vuematerial/vue-material/issues/1513","id":368326599,"user":{"login":"evanslify","id":13075218,"avatar_url":"https://avatars2.githubusercontent.com/u/13075218?v=4","gravatar_id":"","url":"https://api.github.com/users/evanslify","html_url":"https://github.com/evanslify","followers_url":"https://api.github.com/users/evanslify/followers","following_url":"https://api.github.com/users/evanslify/following{/other_user}","gists_url":"https://api.github.com/users/evanslify/gists{/gist_id}","starred_url":"https://api.github.com/users/evanslify/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/evanslify/subscriptions","organizations_url":"https://api.github.com/users/evanslify/orgs","repos_url":"https://api.github.com/users/evanslify/repos","events_url":"https://api.github.com/users/evanslify/events{/privacy}","received_events_url":"https://api.github.com/users/evanslify/received_events","type":"User","site_admin":false},"created_at":"2018-02-25T17:17:38Z","updated_at":"2018-02-25T17:17:38Z","author_association":"NONE","body":"Well, but `ResizeObserver` only gets fired once, you can check it out by\nadding some `console.log()`.\n\nStrangely, if I initialize another `ResizeObserver` in Devtools, calling\n`observe`, it works normally. Even doing another `observe($vm0.$el)` call\nto `$vm0.resizeObserver` would work.\n\nNo idea about what went wrong in here.\n\nOn Sun, Feb 25, 2018 at 23:14 Samuell <notifications@github.com> wrote:\n\n> It can be because calculateTabPos its not called with ResizeObserver\n>\n> —\n> You are receiving this because you commented.\n> Reply to this email directly, view it on GitHub\n> <https://github.com/vuematerial/vue-material/issues/1513#issuecomment-368317179>,\n> or mute the thread\n> <https://github.com/notifications/unsubscribe-auth/AMeDEgICMCFvqzzsoOnhk8Gugj91HDWkks5tYXjigaJpZM4SHJlE>\n> .\n>\n"}}
{"actor":{"display_login":"evanslify"}}