2015-03-17 4 views
19

Я использую угловой материал и хочу разработать макет для моего приложения.Угловой материал: как сделать контент прокручиваемым

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Angular Material - Starter App</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="description" content=""> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/> 

    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,700'> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.css"/> 
    <link rel="stylesheet" href="./style.css"/> 

</head> 

<body ng-app="starterApp" layout="column" layout-fill> 

    <div flex="30" style="border: 1px solid darkgrey;background-color: #1CA9F0;"></div> 
    <div flex style="border: 1px solid firebrick;" layout="column"> 
     <div flex="5" layout="row" layout-align="center"> 
      <md-toolbar flex="50"> 
       <h2 class="md-toolbar-tools"> 
        <span>Toolbar</span> 
       </h2> 
      </md-toolbar> 
     </div> 
     <div flex layout="row" layout-align="center"> 
      <md-content flex="50"> 
       Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare, cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne. 
       <p> 
        Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent. 
       </p> 
       <p> 
        Ad sea dolor accusata consequuntur. Sit facete convenire reprehendunt et. Usu cu nonumy dissentiet, mei choro omnes fuisset ad. Te qui docendi accusam efficiantur, doming noster prodesset eam ei. In vel posse movet, ut convenire referrentur eum, ceteros singulis intellegam eu sit. 
       </p> 
       <p> 
        Sit saepe quaestio reprimique id, duo no congue nominati, cum id nobis facilisi. No est laoreet dissentias, idque consectetuer eam id. Clita possim assueverit cu his, solum virtute recteque et cum. Vel cu luptatum signiferumque, mel eu brute nostro senserit. Blandit euripidis consequat ex mei, atqui torquatos id cum, meliore luptatum ut usu. Cu zril perpetua gubergren pri. Accusamus rationibus instructior ei pro, eu nullam principes qui, reque justo omnes et quo. 
       </p> 
       <p> 
        Sint unum eam id. At sit fastidii theophrastus, mutat senserit repudiare et has. Atqui appareat repudiare ad nam, et ius alii incorrupte. Alii nullam libris his ei, meis aeterno at eum. Ne aeque tincidunt duo. In audire malorum mel, tamquam efficiantur has te. 
       </p> 
       <p> 
        Qui utamur tacimates quaestio ad, quod graece omnium ius ut. Pri ut vero debitis interpretaris, qui cu mentitum adipiscing disputationi. Voluptatum mediocritatem quo ut. Fabulas dolorem ei has, quem molestie persequeris et sit. 
       </p> 
       <p> 
        Est in vivendum comprehensam conclusionemque, alia cetero iriure no usu, te cibo deterruisset pro. Ludus epicurei quo id, ex cum iudicabit intellegebat. Ex modo deseruisse quo, mel noster menandri sententiae ea, duo et tritani malorum recteque. Nullam suscipit partiendo nec id, indoctum vulputate per ex. Et has enim habemus tibique. Cu latine electram cum, ridens propriae intellegat eu mea. 
       </p> 
       <p> 
        Duo at aliquid mnesarchum, nec ne impetus hendrerit. Ius id aeterno debitis atomorum, et sed feugait voluptua, brute tibique no vix. Eos modo esse ex, ei omittam imperdiet pro. Vel assum albucius incorrupte no. Vim viris prompta repudiare ne, vel ut viderer scripserit, dicant appetere argumentum mel ea. Eripuit feugait tincidunt pri ne, cu facilisi molestiae usu. 
       </p> 
       <p> 
        Qui utamur tacimates quaestio ad, quod graece omnium ius ut. Pri ut vero debitis interpretaris, qui cu mentitum adipiscing disputationi. Voluptatum mediocritatem quo ut. Fabulas dolorem ei has, quem molestie persequeris et sit. 
       </p> 
       <p> 
        Est in vivendum comprehensam conclusionemque, alia cetero iriure no usu, te cibo deterruisset pro. Ludus epicurei quo id, ex cum iudicabit intellegebat. Ex modo deseruisse quo, mel noster menandri sententiae ea, duo et tritani malorum recteque. Nullam suscipit partiendo nec id, indoctum vulputate per ex. Et has enim habemus tibique. Cu latine electram cum, ridens propriae intellegat eu mea. 
       </p> 

      </md-content> 
     </div> 
    </div> 
    <div flex="5" style="border: 1px solid turquoise;"></div> 


    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-aria.min.js"></script> 
    <script type="text/javascript" 
      src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.js"></script> 

    <script type="text/javascript"> 

     angular 
       .module('starterApp', ['ngMaterial']) 
       .run(function ($log) { 
        $log.debug("starterApp + ngMaterial running..."); 
       }); 

    </script> 

    </body> 
</html> 

Вопрос в том, как сделать md-контент прокручиваемым? Двойник внизу должен быть липким нижним колонтитулом. Внимание, на Chrome работает, но на firefox нет. Я доверяю firefox, потому что хром имеет проблемы с flexbox.

Я создал плункер, но я не могу вставить ссылку в поток, он всегда появляется сообщение об ошибке.

ответ

24

UPDATE

Эта проблема больше не появляется с угловым Материалом 1.1.1 - первоначальный вопрос был в то время версии 0.8.3

ORIGINAL

Используйте md-контент для внешних элементов.

<body ng-app="starterApp" layout="column" layout-fill> 

    <div flex="30" style="border: 1px solid darkgrey;background-color: #1CA9F0;"></div> 
    <md-content flex style="border: 1px solid firebrick;" layout="column"> 
     <div flex="5" layout="row" layout-align="center"> 
      <md-toolbar flex="50"> 
       <h2 class="md-toolbar-tools"> 
        <span>Toolbar</span> 
       </h2> 
      </md-toolbar> 
     </div> 
     <md-content flex layout="row" layout-align="center"> 
      <md-content flex="50"> 
      ... 
      </md-content> 
     </md-content> 
    </md-content> 
    <div flex="5" style="border: 1px solid turquoise;"></div> 
    ... 
</body> 

[Plunkr] http://plnkr.co/edit/IfEtX638z4ymccC0Ua53?p=preview

См: https://github.com/angular/material/issues/1906

+0

Это оказалось очень важным моментом! – charneykaye

+4

в соответствии с документами md-content не должен быть вложен –

+0

Я знаю, но до сих пор он работал хорошо. Есть ли у вас альтернатива? – kuhnroyal

6

попробуйте добавить style="overflow: scroll;" к тегу, который вы хотите прокручивать.

Например, у меня есть в моей:

<div layout="column" flex style="overflow: scroll;"> 
    <div id="content" ng-view flex></div> 
</div> 
+0

Спасибо, но это не сработает. –

+1

Используется что-то близко к этому, так что спасибо! –

4

Это не достаточно, чтобы установить overflow: scroll.

Вам необходимо добавить position: absolute и установить размер вашего контейнера, который необходимо прокручивать. Попробуйте что-то вроде этого:

md-content{ 
    position: absolute; 
    height: 100px; 
} 

Для получения дополнительной информации о прокрутке контейнеров чтения this answer

Спасибо.

-2

Чтобы сделать мкр-контент прокручивать, добавьте атрибут мД-свитку-у, как это:

<md-content md-scroll-y> 
</md-content> 
+0

Это не сработало для меня. – Noel

1

Я решить эту проблему (угловой материал 0.11.0)

index.html

<body ng-app="app" layout="column" > 
    <div flex layout="column" ng-include="'app/layout/shell.html'" ></div> 
<body> 

shell.html

<div layout="row" flex style="overflow: hidden;" ng-controller="Shell" layout-fill> 
    <div ng-include="'app/layout/left-side-nav.html'"></div> 
    <md-content flex layout="column" role="main" class="fondo" style="height: inherit"> 
     <div ng-include="'app/layout/app-toolbar.html'"></div> 
     <md-content flex style="background-color: transparent; flex-direction: column;" ng-hide="dataLoading.init"> 
      <div ui-view  style="background-color: transparent"></div> 
     </md-content> 
    </md-content> 
    <div ng-include="'app/layout/right-side-nav.html'"></div> 
</div> 
0

Что сработало для меня, было следующим. простой способ есть

<div style="left:0; 
      top: 0; 
      overflow: auto; 
      min-height:auto; 
      max-height:100%; 
      height:300px;"> 

Или добавьте его в качестве внешнего CSS.

Уловка переполнения. Если данные на странице переполняются, они автоматически прокручиваются.

Также он будет делать прокручиваемые данные, которые будут находиться в div, как показано ниже.

enter image description here

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