Comments (15)
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.
Related Issues (20)
- Collapse/Expand item - accept item index HOT 1
- data-table-column align center request HOT 2
- Make it possible to control loading opacity with css
- Limit sort to one column at a time
- Integrating iron-data-table with any context-menu plugin.
- Table elements in hidden dom elements forever invisible HOT 4
- Event when a row loading is complete HOT 1
- way to refresh or re-render a particular row? HOT 1
- data fetched twice at initialization using dynamic size
- Roadmap for supporting iron-list methods for selection / scrolling? HOT 1
- Re-adding custom element with iron-data-table on the same parent HOT 1
- Reset table and change datasource
- Template-ize table rows HOT 3
- Filter input fields too long in IE HOT 3
- Different events for cell selection and checkbox selection HOT 2
- Maintainers needed HOT 12
- How to add a particular style for a row? HOT 1
- Programmatically setting sortOrder right after setting items array does not have any effect
- How to disable checkbox for individual rows?
- [[item]] not working dom-if
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from iron-data-table.