CODEWITHSUNDEEP
cssbackgroundpolymercss-positionpaper-elements
Florian Schneider
Florian Schneider

Reputation: 35

Polymer 1.0 paper-card in background (position:fixed)

I have a Search field within a paper-card and the paper card is position-fixed so i can scroll through an iron list that contains other paper-cards

But when i scroll down and the searchcard follows, the other cards are in front of it.

I already tried overflow: visible / visible !important / auto on the search card and hidden / hidden !important on the result cards but that changed nothing

The elevation attribute seems to be cosmetic only The z attr seems to be the same as elevation

Heres my code:

HTML index

<!doctype html>
<html>
<head>
  <!-- 1. Load webcomponents-lite.min.js for polyfill support. -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
    </script>

  <meta charset="utf-8">

  <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
  <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
  <link rel="import" href="bower_components/iron-icons/iron-icons.html">
  <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="own_elements/top-hundred-cards.html">
  <link rel="import" href="bower_components/paper-styles/paper-styles.html">
  <link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
  <link rel="import" href="bower_components/paper-input/paper-input.html">

  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/jquery-scrollstop-master/jquery.scrollstop.min.js"></script>
  <script src="js/main.js"></script>

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Condensed' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
  <title>FreeLV Freifach Community</title>

</head>
<body unresolved>
<paper-drawer-panel>
  <paper-header-panel drawer>
    <paper-toolbar>
      <div class="app-name">Free LV</div>
    </paper-toolbar>
    <div> Drawer content... </div>
  </paper-header-panel>
  <paper-header-panel main>

    <paper-toolbar>
      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
      <div>Find your next elective lecture!</div>
    </paper-toolbar>

    <div id="mainContent">
      <div id="SearchBarContainer">
          <paper-card id="SearchBar" animatedShadow="true" elevation="2">
            <div class="horizontal layout" id="SearchBarContent">
              <div class="flex">
                  <paper-input-container no-label-float id="SearchInput">
                    <paper-icon-button prefix icon="search"></paper-icon-button>
                      <label>Search...</label>
                      <input is="iron-input"></input>
                    <paper-icon-button suffix icon="clear"></paper-icon-button>
                  </paper-input-container>
              </div>
              <div id="SearchOptionsContainer">
                  <paper-icon-button icon="settings" id="SearchOptions"></paper-icon-button>
              </div>
            </div>
          </paper-card>
        </div>

      <div style="width:inherit;">
      <top-lvs></top-lvs> 
      </div>
    </div>
  </paper-header-panel>
</paper-drawer-panel>

</body>
</html>

HTML result cards

<!doctype html>
<link rel="import" href="../bower_components/iron-list/iron-list.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-progress/paper-progress.html">
<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="top-lvs">
    <template>
        <center>
          <iron-ajax url="/app/fetch" last-response="{{data}}" auto></iron-ajax>
          <iron-list id="lvList" items="[[data]]" as="item" style="height:100vh; width:inherit; overflow-y:hidden;">
            <template>
              <div style="padding-top: 2%; width:100%;">
               <paper-card heading=[[item.name]] animatedShadow="true" elevation="1" class="lvcard">
                    <div class="card-actions">
                        <table style="width:100%">
                          <tr>
                            <td><span>[[item.ects]]</span> ECTS</td>
                            <td><span>[[item.lvType]]</span></td>
                          </tr>
                          <tr>
                                <td>
                                Preis/Leistung<br>
                              <paper-progress value=[[item.ectsHardness]]></paper-progress>
                            </td>
                            <td><span>[[item.uni]]</span></td>
                          </tr>
                        </table>
                    </div>
                </paper-card>
              </div>
            </template>
          </iron-list>
        </center>
    </template>
  <script>
    Polymer({
      is: "top-lvs"
    });
  </script>

</dom-module>

CSS

body {
  font-family: 'Roboto Condensed', sans-serif;
  background-image: url(../img/diamond_upholstery.png);
  background-repeat: :repeat;
  width: calc(100% - 1em);
  overflow-y: hidden; 
}

.app-name {
  font-size: 200%;
}

paper-toolbar.paper-toolbar-0 {
    background: #4CAF50;
    color: #ffffff;
}

td,tr {
  padding: 4%;
}

#SearchBarContainer{
  height: 4em;
  margin-top: 1em;
  margin-right: auto;
  margin-left: auto;
}

.lvcard, #SearchBarContainer{
  width: 30em;
}

#SearchBar {
  position: fixed;
  width: inherit;
}

#SearchInput label{
  font-size: 25px;
}

#SearchInput input{
  font-size: 25px;
}

#SearchOptionsContainer {
  padding: 8px 0;
}

#ToolbarContainer {
  width: 100%;
}

#HeaderContainer {
  width:inherit;
  position: fixed;
}

#mainContent {
  width:100%;
}

This is how it looks

https://i.sstatic.net/UiAKJ.jpg

Upvotes: 1

Views: 2138

Answers (1)

david1995
david1995

Reputation: 165

The question is not directly related to Polymer but to CSS.

The paper-card containing the search bar needs to have a higher z-index than the other paper-card elements:

#SearchBar {
  position: fixed;
  width: inherit;
  z-index: 10;
}

The elevation attribute of paper-card only specifies the looks of the shadow that the card drops, not how they appear when they are stacked on top of each other.

Upvotes: 3

Related Questions