Better support for flexible layout about iron-data-table HOT 15 CLOSED

I think the problem here might be iron-list, because it kinda requires an explicit height to be set on the parent. Need to investigate.

from iron-data-table.

I've found a work-around, this is working (at least in chrome):

<dom-module id="sample-comp">
 <template>
  <style>
    .div1 { @apply(--layout-vertical); }
    .div2 { position:relative; overflow:auto; @apply{--layout-flex);  }
    .div3 { position:absolute;left:0;right:0;top:0;bottom:0;}
    .tbl { height:100%; }
  </style>
  <div class="div1">
     <div>title</div>
      <div class="div2">
       <div class="div3">      
          <iron-data-table class="tbl"> ... </iron-data-table>
       </div>
      </div>
     <paper-button>button</paper-button>
   </div>
 </template>
</dom-module>

from iron-data-table.

Could you try branch feature/flex-height, it's a bit hacky still, but I don't know if we can make it work without setting an explicit height for a parent. You see, the list container height should flex-grow when the list contents grow, but it has overflow: auto so it kinda prevents the list container from growing. I don't know if there's any way around it.

These are the styles I used:

<style is="custom-style">
      .div1 {
        height: 600px; //explicit container height.
        @apply(--layout-vertical);
      }

      .tbl {
        height: 100%;
      }
</style>

from iron-data-table.

could you please also merge the null-item fix in ?

BTW : would you also mind creating a style module for iron-data-table ?

from iron-data-table.

I realize that my latest comment was misleading. I was asking if you could merge the null-item fix in feature/flex-height branch because otherwise I'm not able to check it.

from iron-data-table.

OK I rebased the branch, also added a new version, so styles:

<style is="custom-style">
      .div1 {
        height: 600px;
        @apply(--layout-vertical);
      }

      .tbl {
        @apply(--layout-flex);
      }
    </style>

seems to work now.

from iron-data-table.

works like a charm now! TNX!

from iron-data-table.

Great! I'll just keep this issue open until I've merged the changes to master

from iron-data-table.

And, I'll be adding also a style module, as you requested. See #26

from iron-data-table.

Well, thanks! Will you merge those two into 1.0 ?

from iron-data-table.

Yes, definitely, I'll try to get them in the next (beta) release.

from iron-data-table.

To make iron-data-table grows vertically to fill all available space, the user must wrap the table inside a container with this style:

[iron-data-table-wrapper] {
  height: calc(100vh);
}

If the page has h1, paper-header-panel or similar, just substract the height:

[iron-data-table-wrapper] {
  height: calc(100vh - 96px);
}

Then wrap again the wrapper with another wrapper with this css and substract iron-data-table padding:

[iron-data-table-wrapper-wrapper] {
  height: calc(100% - 10px);
}

If you want to include a header and/or a footer, then substract the header size from the first wrapper:

[iron-data-table-wrapper] {
  height: calc(100% - 65px);
}

Finally include a style for iron-data-table with is height to 100%:

iron-data-table {
  height: 100%;
}

In the last commit in my branch I have included this:

<content select="[footer]"></content>

and old content now is:

<content select=":not([footer])"></content>

With the last [footer] content I have included, the button can be included inside iron-data-table.

Other trick for buttons will be to use fab-icons with position absolute after iron-data-table markup.

I'm working on 2 examples using paper-header-panel and plain page. Both will be included in demo page.

Bye.

from iron-data-table.

Actually the version I had tested some weeks ago was working perfectly even with a container with "vertical layout" and the table with "flex" and that was all that was needed IMHO.

Is this still happing with your changes ?

from iron-data-table.

What I'm seeing from @userquin are alternative approaches in having a "flexible" height for the table without using CSS flex.

I'm going to go ahead merging the current flex solution I've made and releasing it in the next version.

Please feel free to comment or reopen this ticket if issues arise.

from iron-data-table.

lgtm

from iron-data-table.