Атрибут компоновки полимеров для растягивания пользовательского элемента поверх всего окна просмотра

В настоящее время у меня есть мои первые попытки с Полимером.Атрибут компоновки полимеров для растягивания пользовательского элемента поверх всего окна просмотра

У меня есть пользовательский полимерный элемент, вложенный в элемент core-animated-pages на главной странице.

Источниками являются:

index.html

<core-header-panel> 

    <core-toolbar> 
     [...] 
    </core-toolbar> 

    <core-animated-pages transitions="slide-from-right"> 
     [...] 
     <section> 
      <contact-page></contact-page> 
     </section> 
    </core-animated-pages> 

</core-header-panel>

контакт-page.html

<polymer-element name="contact-page"> 
<template> 
    [...] 
    <div layout horizontal start-justified> 

     <div class="placeholder"> 
     </div> 

     <div class="contact-box" layout horizontal center-justified flex three> 
      <div class="form-container" layout vertical> 
       <h2>Contact</h2> 
       <paper-input class="additional-dist" floatingLabel label="Name"></paper-input> 
       <paper-input id="mail" floatingLabel label="Mail"></paper-input> 
       <div layout horizontal> 
        <paper-input id="msg" multiline maxRows="4" rows="4" floatingLabel label="Message" flex></paper-input> 
       </div> 
       <paper-button label="Submit" on-tap="{{submit}}" self-end></paper-button> 
      </div> 
     </div> 

    </div> 
[...] 
</template> 
[...] 
</polymer-element>

файл HTML в настоящее время выглядит like this in Chrome 37.

Теперь мне хотелось бы, чтобы желтая полоса (placeholder) была вертикально растянута по всему видовому экрану, like this.

К сожалению, я не могу понять, какой полимер layout attribute s Я должен использовать для достижения этого и в каких тегах я должен их поместить. Может ли кто-нибудь помочь мне здесь?

источник

2014-09-02 mackcmillion

Edited включить обратную связь от sjmiles:

Дайте этому выстрел:

<body fullbleed layout vertical> 

    <polymer-element name="x-foo" layout vertical> 
    <template> 
     <style> 
     #header { 
      background: tomato; 
     } 
     #col { 
      background: yellow; 
     } 
     </style> 
     <div id="header" layout horizontal> 
     Header 
     </div> 
     <div id="main" flex layout horizontal> 
     <div flex id="col">Col</div> 
     <div flex layout vertical> 
      <div>Section 1</div> 
      <div>Section 2</div> 
      <div>Section 3</div> 
     </div> 
     </div> 
    </template> 
    <script> 
     Polymer({ 

     }); 
    </script> 
    </polymer-element> 

    <x-foo flex></x-foo> 

</body>

Я использую fullbleed attribute to set the body to 100vh и говоря это макет своих детей по вертикали с помощью Flexbox. Затем установите x-foo на flex, чтобы он заполнил экран. Тогда дело только в том, чтобы заставить правильных детей сгибаться.

Адрес a jsbin to preview.

источник

2014-09-03 16:11:17 robdodson

IMO, вместо того, чтобы смешивать% и компоновку, вам лучше использовать атрибуты компоновки для всего стека. Iow, ' ...'. http://jsbin.com/dumow/1/edit –

Эй, спасибо за ответ. Это отлично работает для меня, пока пользовательский элемент является прямым дочерним элементом ''. Но когда я помещаю пользовательский элемент в '', он полностью разбивает макет. Любые предложения, как это исправить? – mackcmillion

Получил. Добавляя атрибут layout 'fit' к содержимому' core-header-panel' (который был в моем случае «ядро-анимированные страницы») и к моему пользовательскому элементу, сделал трюк для меня. – mackcmillion

Атрибут компоновки полимеров для растягивания пользовательского элемента поверх всего окна просмотра

ответ

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