All geek questions in one place

Why does the "fullbleed" layout attribute not work in this fragment?

I am trying to get a full screen title bar for paper.

  • Browser: Firefox v35
  • OS: Linux
  • Polymer: v1.4

The content area is out of the title area. Note the red frame around the body tag:

Must work

If I explicitly set the body height:100vh , the body tag is stretched, but the green area will not “bend”, enter image description here

What am I missing here?

Also on Chrome v49 64bit, the page looks like this:

Enter a description of the image here.

HTML:

  <style> .icon-snooze { color: red; width: 48px; height: 48px; } </style> <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html" /> <style is="custom-style" include='iron-flex'> body { border: 2px solid red; } paper-header-panel { height: 100%; } .content { border: 2px solid dodgerblue; } .moContent { background-color: var(--paper-light-green-500); } .blue .paper-header { background-color: var(--paper-light-blue-500); } </style> </head> <body class='fullbleed vertical layout'> <paper-header-panel class="blue"> <paper-toolbar> <paper-icon-button icon="icons:menu"></paper-icon-button> <div>My snazzy toolbar</div> </paper-toolbar> <div class='content vertical layout'> <iron-icon icon="av:snooze" class="icon-snooze"></iron-icon> <div class='moContent flex'>More content</div> <div>Footer</div> </paper-header-panel> </body>
+5
source share
1 answer

To use fullbleed , include the iron-positioning module in your own style tag:

 <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html"> <style is="custom-style" include="iron-positioning"></style> 

 <head> <base href="https://polygit.org/polymer+:master/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html"> <style is="custom-style" include="iron-flex iron-positioning"></style> <style> body { border: 2px solid red; } </style> </head> <body class="fullbleed vertical layout"> Hello world! </body>

This requirement is currently undocumented (at least it is not explicitly stated in docs for fullbleed ).

+14
source

Source: https://habr.com/ru/post/1247620/

More articles:


All Articles