Material: md-tabs fixed position is possible?

[DansBartowski]

Is it possible to keep tabs fixed at the top when the content is rolled down?

[robertmesserle]

Can you elaborate on what you are trying to do?

[ivanseidel]

I guess what he means is to create some sort of way to scroll the content, without scrolling the tabs with it. I got here for the same reason while searching on google.

[DansBartowski]

Yeah @ivanseidel, that's what I meant

[amritk]

Hey @DansBartowski I accomplished what you're trying to do by throwing in a couple height 100%s.

    {
        height: 100%;

        md-tab-content > div
        {
            height: 100%;

            .vertical-scroll
            {
                height: 100%;
                overflow-y: auto;
            }
        }
    }

Now the tabs stay at the top, and everything just scrolls inside of them. @robertmesserle there should probably be something like this added into the api. So the tabs take up 100% height and scroll inside.

[tehaaron]

I would like this ability as well. Having the md-tabs-content scale to 100% height and then scroll while the tabs stay fixed to the top. Unfortunately, @amritk's solution did not work for me.

[martinstolz-ch]

+1

[Kizmar]

+1

Using tabs without md-dynamic-height="true" results in the desired scrolling of content with the tabs staying in place, but cuts off the content when using ng-include.

I tried something like this WITH md-dynamic-height="true"...

md-tabs.md-tabs-fixed {
    position: relative; 
    md-tabs-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
}

...but the tabs still scroll with the content because the dynamic height is being done on "md-tabs". If the dynamic height was applied to "md-tab-content-wrapper" or "md-tab-content", this might work.

[parakastha]

Is there a way to make the pdf text selectable? it appears as the pdf is converted into an image where texts are not selectable.

[EmmanuelPREVOST]

+1

[mrKremt]

+1

[SmoshySmosh]

+1

[joaopedronardari]

+1

[DerekJDev]

md-tabs-wrapper{ position: fixed; top: 0px; left: 0px; background-color: rgb(68, 114, 196) !important; z-index: 1000; width: 100%; }

md-tabs.md-dynamic-height md-tabs-content-wrapper { top: 48px !important; }
Also you will need to add margin-bottom: 48px; to the md-content directive inside each md-tab you instantiate. This is also using the md-dynamic-height option. And if you have something above the tabs then wrap the tabs in a div and set a margin-top to the height of the element(s) above it. This worked for me hopefully it works for everyone!

[ghost]

@Derekjohnson277 thanks! but if i open the sidenav, the tabs overlay the menu sidenav. is already a solution available? greetings!

[DerekJDev]

@XxDeadLiiNexX I beleive if you set the z-index of the sidenav parent element to be higher than the z-index of the tabs it should work.

[ghost]

hej @Derekjohnson277 thanks for answerin! i have do that, but if i maximaze the screen from mobile view to desktop, the sidenav is for the tabs. The sidenav ignores the tabs, and they are stretched at the background. is there no offical solution for this issue? i found no right answer at every post.

Thanks!

[DerekJDev]

@XxDeadLiiNexX Yeah no problem! As far as I know there isn't any official solution for this.... This is just a workaround that I found that work for my needs, hopefully you can figure something out!

[ghost]

ok thanks @Derekjohnson277 theres a codepen (not from me): http://codepen.io/kyleledbetter/pen/gbQOaV
In this coepen project the tabs fixed, did you now why? its an older css version, maybe thats the reason! Greeds

[glzcc]

thinks