PolymerElements/paper-header-panel

Contents in paper-header-panel is getting overlaped in chrome

Closed this issue · 5 comments

sujith3g commented

I've got a paper-header-panel inside body. content fits 100% below the header(added fit class). In chrome (version 48.*) the divs inside the content div are getting overlapped because of height getting automatically set to 0px. Everything was working fine before chrome 48.* update. I've checked in Firefox, opera and safari and the page is working as expected. If I resize the window everything gets fixed. I assume this is because of the iron-resize-behavior. I can solve this by manually setting the height for each inner div.

.
here is the JsBin link

<body class="fullbleed layout vertical">

  <paper-header-panel class="flex">
    <paper-toolbar>
      <div>Hello World!</div>
    </paper-toolbar>
    <div class="fit layout vertical">
        <div class="horizontal layout">
          <div class="flex">Item One left</div>
          <div>Item One right</div>
        </div>
        <div class="horizontal layout">
          <div class="flex">Item Two left</div>
          <div>Item Two right</div>
        </div>
    </div>
 </paper-header-panel>


</body>

Output in firefox

screen shot 2016-02-05 at 3 22 42 pm

## Output in chrome 48.0.2564.97 (64-bit)

screen shot 2016-02-05 at 3 23 04 pm

hedcet commented

i have the same issue here

that forced me to use paper-item instead of div here

how i solve this issue in chrome 48.* ?

aruntk commented

@hedcet paper-item works fine because they have explicitly defined the height of the paper-item. Any element with height explicitly defined would work.

frankiefu commented

Seems to be working fine in Chrome 48.0.2564.109 (64-bit)

sujith3g commented

👍 Its working :)

frankiefu commented

Awesome!