Угловой материал заблокирован md-sidenav занимает весь экран

Я ищу, чтобы иметь заблокированный левый сиденов с контентом справа, который рухнет и скроется, когда в планшете/мобильном режиме. Я хочу, чтобы он выглядел/имел ту же функциональность, что и сайт doc Angular Material, или что-то подобное этому codepen. Прямо сейчас мой контент не будет отображаться справа от моего sidenav, когда он заблокирован, есть какой-то запас, занимающий остальную часть экрана. Если я сделаю экран меньшим, поэтому сидены разрушатся, содержимое появляется, но не прокручивается.Угловой материал заблокирован md-sidenav занимает весь экран

Это то, что структура для моей index.html выглядит следующим образом:

<body class="docs-body" ng-cloak ng-app="TrooNews" ng-controller="AppController as app"> 

      <md-sidenav 
       class="site-sidenav md-sidenav-left md-whiteframe-z2" 
       md-component-id="left" hide-print 
       md-is-locked-open="$mdMedia('gt-sm')"> 

       <header class="nav-header"> 
        <a ng-href="/" class="docs-logo"> 
        <img src="resources/logo.svg" alt="" /> 
        <h1 class="docs-logotype md-heading">Troo News</h1> 
        </a> 
       </header> 

       <md-content flex role="navigation"> 
        <md-list> 
         <md-list-item ng-repeat="item in app.menu" ng-click="app.navigateTo(item.link)"> 
          <md-icon>{{item.icon}}</md-icon> 
          <p>{{item.title}}</p> 
         </md-list-item> 
        </md-list> 
       </md-content> 
      </md-sidenav> 

      <div layout="column" tabIndex="-1" role="main" flex> 

       <md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar"> 

        <div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1"> 
        <md-button class="md-icon-button" ng-click="app.toggleSidenav('left')" hide-gt-sm aria-label="Toggle Menu"> 
         <md-icon>menu</md-icon> 
        </md-button> 
        <div layout="row" flex class="fill-height"> 
         <h2 class="md-toolbar-item md-breadcrumb md-headline"> 
         <span class="md-breadcrumb-page">Test</span> 
         </h2> 

         <span flex></span> <!-- use up the empty space --> 

         <div class="md-toolbar-item" layout="row"> 
          <div class="search"> 
           <md-icon class="search_icon">search</md-icon> 
           <input ng-model="searchCard"> 
          </div> 
         </div> 
        </div> 
        </div> 

       </md-toolbar> 

       <md-content md-scroll-y layout="column" flex> 
        <div ng-viewport flex="noshrink"></div> 

        <div layout="row" flex="noshrink"> 
        <div id="license-footer"> 
         Powered by Troo News. 
        </div> 
        </div> 
       </md-content> 

      </div> 




    </body>

Любая помощь/понимание будет оценена.

источник

2016-03-24 Jess Anastasio

попробуйте добавить layout = "row" к тегу вашего тела. – sdfacre

@sdfacre Большое вам спасибо, что не могу поверить, что я не видел этого. <3 –

Проверьте это перо. http://codepen.io/next1/live/MymXqY Вы должны использовать layout-fill и layout attrivute, как я использовал в этом примере.

источник

2016-03-24 05:47:53 nextt1

Любое решение по реализации этого решения? – nextt1

Угловой материал заблокирован md-sidenav занимает весь экран

ответ

Смежные вопросы