paper-header-panel content div exhibiting unpredictable behavior

I am currently experimenting with Polymer 1.0 elements for a simple test. However, in the paper-header-panel test, it seems that the content area elements are either not visible or are overlapping with the paper-header div. You can view the demo here and the code is provided below. I am puzzled as to why the content text is not being displayed properly?

<!DOCTYPE html>
<html>

  <head>
    <title>paper-header-panel demo</title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
  </head>

  <body class="fullbleed layout vertical" style="height: 100%">
      <paper-header-panel mode="waterfall" class="flex">
        <div class="paper-header" style="height: 60px;">I am the header</div>
        <div class="content fit">I am the content</div>
      </paper-header-panel>
  </body>

</html>
csspolymerpolymer-1.0

Answer №1

It appears that your issue may lie here.

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">

Consider updating the link to:

<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">

The first one includes only the layout mixins (the recommended option), while the second one includes the layout classes (and /deep/ selectors) which you appear to be utilizing.

Answer №2

Include the following code within your HTML file:

<link rel="import" href="bower_components/paper-styles/paper-styles.html">

You will also need to remove the style attribute from the body element as shown below:

<body class="fullbleed layout vertical">
  <paper-header-panel mode="waterfall" class="flex>
    <div class="paper-header">I am the header</div>
    <div class="content fit">I am the content</div>
  </paper-header-panel>
</body>

In general, the paper-toolbar component is typically used inside the paper-header-panel which automatically imports the necessary paper styles for you.

Answer №3

Should we consider including class="size" on <paper-header-panel>?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the top header stay fixed to the top of the screen even when scrolling down?

Code snippet: http://jsfiddle.net/R3G2K/1/ In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top. I have explored various solutions for thi ...

javascriptjqueryhtmlcss

Is there a distinction between the values 'normal' and 'stretch' in the CSS property known as 'align-content'?

When it comes to the CSS declaration 'align-content', the default value is 'normal'. But, there is also another option: 'stretch'. I have been having a hard time figuring out if there is any actual difference between the two. ...

cssflexbox

Retrieve the matrix3d values from the -webkit-transform property

My current endeavor involves rendering 3D shapes using the <canvas> (2d context), requiring manual projective transformations. I am eager to retrieve the 3D transformation matrix values from the CSS, as that would greatly aid my process. Is it poss ...

javascripthtmlgraphicscss3d

When hovering over different <a> tabs, showcase various images in individual <div> sections

Here are the buttons I am working with - <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a style="text-decoration:none" class="nav-item nav-link" data-toggle="tab& ...

htmljquerycss

What is the best way to enclose all succeeding elements with an HTML tag after a specific element?

In my project, I am integrating Vue 2 with Sanity.io and I am looking for a solution to wrap all elements that come after a specific element with an HTML tag, and then wrap this element along with the following elements with another HTML tag. For instance ...

javascripthtmlcssvue.jsvuejs2

The text exceeds the width of the element

Currently, I am facing an issue with displaying notifications where the text exceeds the element width. I am looking for a solution to make the text wrap to the next line if it is too long. https://i.sstatic.net/5NcNs.png To handle notifications, I am ut ...

csslaravelnotificationsbootstrap-4

What is causing the divs to not stretch across the entire width of the parent div?

Interactive Code Example: Snippet: <div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;"> <div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; ...

htmlcss

Looking for assistance with creating a responsive design that works seamlessly on all large devices

Our UI/IX designer has provided a design that I need to replicate. https://i.sstatic.net/8nXym.png I am facing difficulties in centering the circular part of the image. (The vertical line and circular part are separate images) I experimented with using ...

htmlcssbootstrap-5

Having trouble getting flex-wrap to function properly on my div element

For the 928px breakpoint, my aim is to: Have my right column (.vd-right-col) positioned at the bottom of the page. (I attempted to achieve this using flex-wrap:wrap; but it did not work.) Arrange the two images in this column side by side. Unfortuna ...

htmlcssflexbox

Tips for enhancing the color saturations of cells that overlap in an HTML table

My goal is to enhance the color of overlapping cells in my HTML tables. For instance, when I click on cell 2, the .nextAll(':lt(5)') method will change the class of the next 4 cells. https://i.stack.imgur.com/mwv8x.png Next, clicking on cell 3 ...

javascriptjqueryhtmlcss

Tips for creating a dynamic logo that zooms in when you hover over it

Is there a way to create a zoom effect for the logo in my navigation bar when hovering over it without using jQuery? I've tried various codes from different sources but none seem to work. The .logo class is assigned to the logo in the nav bar. Any sug ...

htmlcss

Update the default monospaced font in Draft.js

Is it possible to change the default system monospace font in Draft Editor to Consolas using Draft.css or global css classes? ...

cssreactjsdraftjs

Tips for managing the fixed position property in CSS when dealing with overlapping elements

This image displays the overlap of two divs. One div contains a table with two buttons floating on the right, while the other div features an image. Here, the overlapping issue does not occur. I have detailed my problem with overlapping above and I aim t ...

htmlcssasp.netvisual-web-developer

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

As a newcomer to Vuetify, I am still learning the ropes. One thing I've noticed is that <v-main> automatically expands to fill the space between <v-app-bar> and <v-footer>, taking up the entire viewport height. My concern arises wh ...

htmlcssvue.jsuser-interfacevuetify.js

The functionality of my website is currently experiencing difficulties when accessed through the Android UC Browser

My website, , is experiencing issues with product loading and the '+' button in the side menu not working on UC Browser. It works fine on other Android browsers like Chrome and Firefox, but I am confused as to why it is not functioning properly o ...

javascriptjqueryhtmlcssuc-browser

Having trouble selecting links in the navigation bar

Just getting started with HTML/CSS and designing a website with buttons. Got some buttons up and running perfectly fine. But now, I'm working on a navigation bar with anchors inside. The problem is that while I can see the anchors when I open the webs ...

htmlcss

The static background and fixed header are locked in a perpetual battle

I am currently working on creating a fixed header that remains at the top of the page. However, I am facing an issue where the background seems to be overlapping and hiding the header. <style type="text/css> html, body {height:100%; margin:0; paddin ...

htmlcss

jQuery Super-sized Not Expanding Vertically

I am facing an issue with resizing a 1920x1200 background image using jQuery Supersized. Whenever I resize the browser, there is a gap that appears vertically instead of filling up to compensate for the width constraint. I have checked and copied the sett ...

jquerycsssupersized

Utilizing background images in CSS to enhance bootstrap icons

Here is the HTML code snippet I'm working with: <a class="iconContainer" href="#"> <span class="containerIcon chevron-right"/> Test </a> And this is the corresponding CSS code: .chevron-right::befor ...

csstwitter-bootstrapbootstrap-4bootstrap-icons

There is no element available to input text using send_keys in Selenium

Currently learning about selenium, please pardon any errors. Thank you :) I am trying to scrape a website that allows users to create blogs on 'tistory' using selenium. In order to publish an article, I need to choose between default mode, mark ...

pythonhtmlcssseleniumselect