[MdTabs] content height is not set with async data

[bakgat]

Steps to reproduce

When filling a MdList into MdTab content from an async source, the height is not set correctly for initial tab.
eg I have this in my template.

events is filled in vuex, after calling an axios.get(...).

<md-tabs class="md-transparent" md-alignment="fixed">
                <md-tab id="tab-list-view" md-label="lijst" md-icon="list">
                    <div class="md-content">
                        <md-list>
                            <md-list-item :to="'/hikes/' + event.id" class="md-double-line" v-for="event in events"
                                          :key="event.id">
                                <div class="md-list-item-text">
                                    <ul class="meta md-layout">
                                        <li>
                                            <md-icon>today</md-icon>
                                            {{event.takes_place_on | shortDate}}
                                        </li>
                                        <li>
                                            <md-icon>location_on</md-icon>
                                            op {{event.start_location | fromPosition(currentLocation) | convert('m',
                                            'km', 1,
                                            true)}}
                                        </li>
                                        <li>
                                            <md-icon>directions_walk</md-icon>
                                            {{event.distances[0] | convert('m', 'km', 2, true)}}
                                        </li>
                                    </ul>
                                    <div class="description text-primary">
                                        {{event.name}} ({{event.organised_by_club.name}})
                                    </div>
                                </div>
                            </md-list-item>
                        </md-list>
                    </div>
                </md-tab>
                <md-tab id="tab-calendar-view" md-label="kalender" md-icon="today">
                    <div class="md-content"></div>
                </md-tab>
</md-tabs>

Initial view is this: (where md-tabs-content is set to style="height: 16px;")

When changing tab and return back to this tab:

Which browser?

Vue v2.5.13
Vue-material 1.0.0-beta-8

Any browser

What is expected?

When content is changed, a redraw should happen, so correct height is generated.

What is actually happening?

Content height was computed before async data was loaded.
So height is set to 16px;

Reproduction Link

[Samuell1]

This can be related with #1500

[bakgat]

Not exactly.

In my case the calculation for the height of MdTab should be done after async data was loaded.
Maybe there is an API wich can redraw the MdTab after data was loaded into the DOM?

[Samuell1]

If you try md-dynamic-height prop it works?

[evanslify]

I can confirm that even with md-dynamic-height, it does not work on Chrome 64.0.3282.167 but works on Firefox 58.0.2.

[evanslify]

Seems like ResizeObserver does not fire at all after initial rendering.

[Samuell1]

It can be because calculateTabPos its not called with ResizeObserver

[evanslify]

Well, but `ResizeObserver` only gets fired once, you can check it out by adding some `console.log()`. Strangely, if I initialize another `ResizeObserver` in Devtools, calling `observe`, it works normally. Even doing another `observe($vm0.$el)` call to `$vm0.resizeObserver` would work. No idea about what went wrong in here.

…

On Sun, Feb 25, 2018 at 23:14 Samuell ***@***.***> wrote: It can be because calculateTabPos its not called with ResizeObserver — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1513 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMeDEgICMCFvqzzsoOnhk8Gugj91HDWkks5tYXjigaJpZM4SHJlE> .

[alexaandru]

I'm running into this exact same issue. Using the same Vue/Vue-Material versions as OP, loading the data dynamically via Vue-Resource. I get the exact same behavior on Firefox (data does not show on initial load/page reload, but if I go to another tab and then back it shows OK), but different in Chrome - the data is never shown (not in initial load, nor when changing tabs and back).

[alexaandru]

It's still broken for me (exactly as before). I am using the very latest dev branch, which includes that fix.

[Samuell1]

@alexaandru do you rebuilded dist?

[alexaandru]

@Samuell1 Of course. I modified package.json to point to it, ran npm i and then confirmed in package-lock.json is using the correct version:

$ grep vue-material package-lock.json 
  "vue-material": {
    "version": "github:vuematerial/vue-material#6f486887f8709d1679bf1f956c0e972cb7deef87"

Then I ran the frontend as usual npm run dev (this project is based off of vue-cli/webpack).

[Samuell1]

@alexaandru do you rebuilded dist of vue-material repository?

[alexaandru]

@Samuell1 is there else I need to do beyond npm install ? Isn't that taking care of pulling in the appropriate version of the dependency? Looks everything is taken care of by npm (as I'd expect anyway):

$ ls -alh node_modules/vue-material/dist/
total 1.4M
drwxrwxr-x  5 alex alex 4.0K Feb 28 20:22 .
drwxrwxr-x  4 alex alex 4.0K Feb 28 20:22 ..
drwxrwxr-x  2 alex alex 4.0K Feb 28 20:22 base
drwxrwxr-x 36 alex alex 4.0K Feb 28 20:22 components
drwxrwxr-x  3 alex alex 4.0K Feb 28 20:22 theme
-rw-rw-r--  1 alex alex 112K Feb 28 20:22 vue-material.css
-rw-rw-r--  1 alex alex 852K Feb 28 20:22 vue-material.js
-rw-rw-r--  1 alex alex 112K Feb 28 20:22 vue-material.min.css
-rw-rw-r--  1 alex alex 268K Feb 28 20:22 vue-material.min.js

The dist was rebuild 2h ago as you can see as an effect of doing the npm i with the new version. If I had to manually build the dist for dependencies myself, I'd give up on npm on the spot :)

[Samuell1]

To use DEV branch you need to rebuild vue-material, not only your app.

[alexaandru]

I understand that and the listing above is for vue-material, not for my app. And just to be clear I've rebuild them both.

[gwilakers]

I am also still seeing this issue.

Vue: v2.5.13
Vue-material: 1.0.0-beta-8
Browser: Chrome

The .md-tabs-content div is getting an incorrect height set on load, then when switching to a different tab, then switching back, the height corrects itself. What is the suggested fix here? Setting md-dynamic-height on the tabs element has no effect.

[Samuell1]

@gwilakers because still is not new release that is fixing this bug...

[gwilakers]

@Samuell1 When is that release planned to go out?

[pranayrauthu]

I am still able to reproduce the issue in chrome.

[Samuell1]

@pranayrauthu yeah if you read messages again you find its fixed only in DEV branch.

[LeiwenL]

Any news about this issue ?

[okolomiets]

here is a temporary workaround for the issue:

if (this.$refs.mdTabs) { this.$refs.mdTabs.$children[0].$el.removeAttribute('style') }

it works for me as intended.

[thinking-tower]

Another fix I found was to do this:

<md-tab v-if="isAsyncRequestFinishedLoading"></md-tab> (depending on what your AsyncRequest is)

This is basically does the swapping tabs for you.

[cvalues]

Does the bug exists in 1.0.0-beta-15?
We have the same problem with version: 1.0.0-beta-15, resizing the textarea does not resize the tab.

      <md-tab id="tab-base_data" :md-label="$t('base_data')" md-icon="description">
        <md-card>
          <md-card-header>
            TestHeader
          </md-card-header>
          <md-card-content>
              <div class="md-layout-item">
                   <md-field>
                      <md-textarea  type="text" > </md-textarea>
                  </md-field>
              </div>
            </member-data>
          </md-card-content>
        </md-card>
      </md-tab>