CODEWITHSUNDEEP
javascripthtmlcssangularjs
user7138187
user7138187

Reputation:

AngularJS Material Tabs - Remove Scrolling

I'm testing out some AngularJS Material stuff and I'm having trouble with developing tabs.

Whenever I make a tab, all the content within the child md-content element automatically has a fixed height with vertical scroll, rather than just expanding vertically to the height of the content.

I've tried overriding the css for angular's parent containers that are automatically created, changing the heights, min-heights and overflow properties, but nothing prevents the fixed height with scrollbar.

Any ideas?

Example here: http://codepen.io/anon/pen/BWzBGL.

HTML:

<body ng-app="tableApp"> 

    <main>

        <md-content>

            <md-toolbar>

                <div class="md-toolbar-tools">

                    <md-menu flex>

                        <md-button aria-label="Menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">

                            <md-icon md-menu-origin class="material-icons"><span class="fa fa-bars fa-lg"></span></md-icon>

                        </md-button>

                        <md-menu-content width="3">

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page One</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page Two</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page Three</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                        </md-menu-content>

                    </md-menu>

                    <p>AngularJS Material Testing</p>

                    <md-menu md-position-mode="target-right target">

                        <md-button aria-label="Settings" class="md-icon-button" ng-click="$mdOpenMenu($event)">

                            <md-icon md-menu-origin class="material-icons"><span class="fa fa-gear fa-lg"></span></md-icon>

                        </md-button>

                        <md-menu-content width="3">

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page One</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page Two</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page Three</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                        </md-menu-content>

                    </md-menu>

                </div>

            </md-toolbar>

            <md-tabs md-border-bottom>
              <md-tab label="Tab One">
                <md-content class="md-padding">

                  <h1 class="md-display-1">Tab One</h1>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  </md-content>

                </md-tab>

              <md-tab label="Tab Two">
                <md-content class="md-padding">

                  <h1 class="md-display-1">Tab Two</h1>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  </md-content>

                </md-tab>

              <md-tab label="Tab Three">
                <md-content class="md-padding">

                  <h1 class="md-display-1">Tab Three</h1>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                  </md-content>

                </md-tab>

            </md-tabs>

        </md-content>

    </main>

Upvotes: 1

Views: 709

Answers (1)

P.S.
P.S.

Reputation: 16384

You need to add layout="column" attribute to your md-content: <md-content layout="column"> and flex attribute to md-tabs: <md-tabs md-border-bottom flex>.

Here is the working codepen

Update:

The inner scroll is visible because the content is larger than wrapper, if you want to disable inner scroll, you can add overflow-y: hidden, but be ready that user will not see all the content.

Updated codepen

Upvotes: 0

Related Questions