CODEWITHSUNDEEP
cssangular-material2
ABGR
ABGR

Reputation: 5205

Position Fixed inside tab content in angular material2 is positioning with respect to tabs and not window

So I'm using angular material2 for creating tabs. Inside any tab content when I create a div element with position fixed that positions itself with respect to the scope of Tab content as if that's the entire window.

If I keep decreasing the top the div gets disappeared inside the tabs. By inspecting I can see the element, but no matter how high z-index I give that won't show up above the surface of tabs.

 <md-tab label="Device Groups" style="min-width: 100px">


        <div style="position: fixed;top:-5%;left:40%;min-width: 20%;min-height: 30px;z-index:100000000000;background: red">

          </div>
</md-tab>

Upvotes: 0

Views: 1377

Answers (1)

ABGR
ABGR

Reputation: 5205

Happens because angular material adds transform property. Did this to fix:

.mat-tab-body-content, .ng-trigger, .ng-trigger-translateTab, .mat-tab-list{
      transform: none !important;
   }

   .mat-tab-body-wrapper{
    overflow: inherit !important;
   }

Upvotes: 1

Related Questions