qliksense-card.html

<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-card/paper-card.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/paper-icon-button/paper-icon-button.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/iron-icons/iron-icons.html">

<dom-module id="qliksense-card">
  <template>
    <style>
      :host {
        /*display: inline-block;*/
        position: relative;
        width: 100%;
      }
      :host.fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1000000;
      }
      paper-card {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 3px;
        box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
      }
      ::content .card-title {
        margin-top: -32px;
        padding-left: 15px;
        padding-bottom: 11px;
        font-size: 15px;
        color: #808080;
        font-weight: 700;
        font-family: 'Source Sans Pro', sans-serif;
      }
      .card-actions {
        padding: 0;
        border-bottom: 1px solid #F3F4F5;
        text-align: right;
        z-index: 10;
      }
      .card-actions paper-icon-button {
        z-index: 10000;
      }
      .card-content {
        flex: auto;
        padding: 0;
      }
      .card-content ::content > .qvobject.with-title {
        margin-top: -42px;
        height: calc(100% + 42px);
      }
      .card-content ::content > .qvobject.with-title header {
        /*padding-left: 0px;*/
        margin-right: 12px;
        margin-top: -6px;
      }
      .card-content ::content > .qvobject.with-title .sel-toolbar-card {
        top: 0px !important;
      }
      :host.fullscreen .card-content ::content > .qvobject.with-title .sel-toolbar-card {
        top: 0px !important;
      } 
      :host.fullscreen .card-content ::content .sel-toolbar-list {
      /*  margin-right: 36px;*/
      }
      .card-content ::content .sel-toolbar-card {
        top: -42px !important;
      }
      .card-content ::content > .qvobject:not(.with-title) .sel-toolbar-list {
       /* margin-right: 36px;*/
      }
      .card-content ::content .sel-toolbar-card {
        top: -42px !important;
      }
      .card-content ::content > .qvobject:not(.with-title) .sel-toolbar-list {
        margin-right: 36px;
      }
    </style>

    <paper-card>
      <div class="card-actions">
	  <!-- Export to EXCEl file feature -->
        <button class="export-button"><i class="fa fa-file-excel-o" aria-hidden="true"></i></button>
        <!-- End of Export to EXCEl file feature -->
        <paper-icon-button icon="fullscreen" on-tap="fullscreenEnter" hidden$="{{fullscreen}}"></paper-icon-button>
        <paper-icon-button icon="fullscreen-exit" on-tap="fullscreenExit" hidden$="{{!fullscreen}}"></paper-icon-button>
      </div>
      <div class="card-content" style$="height: {{contentHeight}};">
        <content id="content"></content>
      </div>
    </paper-card>
  </template>

  <script>
    Polymer({
      is: 'qliksense-card',
      properties: {
        contentHeight: {
          type: String,
          value: '300px'
        },
        fullscreen: {
          type: Boolean,
          value: false
        }
      },
      fullscreenEnter: function() {
        this.fullscreen = true;
        $(this).addClass("fullscreen");
        qlik.resize();
      },
      fullscreenExit: function() {
        this.fullscreen = false;
        $(this).removeClass("fullscreen");
        qlik.resize();
      }
    });
  </script>
</dom-module>