iron-grid
iron-grid copied to clipboard
ozwaldorf
Wrong initial grid render
Please, mind the code bellow. Every time I refresh the page, in whatever column class it happens to be, the grid always shows the largest column class. For example, after a refresh, if the browser window is 470px wide, so the .xs class in utilized, instead of getting 1 card to be shown full-screen, I get 4 cards. I think it defaults to the largest class. I have to resize the window manually for the correct grid rule to apply.
Am I missing something in the correct use of iron-grid or is it a bug?
PS. Windows user here.
<iron-grid>
<template is="dom-repeat" items="{{productsList}}" on-dom-change="_repeatRender">
<div class="xs12 s6 m3 l3">
<paper-card elevation="1" id="{{item.id}}" image="{{item.header}}" heading="{{item.name}}">
<div class="card-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut earum, quisquam in temporibus dolor facilis provident similique officiis velit blanditiis!
</div>
<div class="card-actions">
<paper-button on-tap="_openCard">Open</paper-button>
</div>
</paper-card>
</div>
</template>
</iron-grid>
No Sir. I've attached my project's source code. It's pretty minimal, for the moment Please run this command in a terminal: "npm install && bower install && gulp serve" and take a look yourself.
@AntoniosProvidakis I'm busy for the rest of today, but I can look at it tomorrow afternoon.
@The5heepDev Hello, it's been long since the last time. Did you take a look on the issue? :)
@AntoniosProvidakis OMG, I'm so sorry! I completely forgot. I'll take a look in a bit. Sorry!!
@AntoniosProvidakis So I took a look at your code. It seems that the resize event in fired too soon, so the window size cannot be loaded. This is probably a bug in iron-resizable-behavior.
@The5heepDev So it's not something wrong with my code. Thanks a lot for your time. I hope the bug is fixed in a later release.
@AntoniosProvidakis I tried a bunch of different methods of firing the resize event on load, but they were all to early.
@maxiplay Hello, I tried again with the new version, but the bug insists. I uploaded a short screencast to see with your own eyes the problem exactly. The video starts with browser window full width and resizing gradually. There, iron-grid works as expected. Towards the end, I make the window smaller and press refresh. That's where the problem appears. Instead of two columns, it renders all 4 columns. I hope the video helps.
Please provide a simple plunkr example and I will look at it. I don't want to waste my time to install complexe code.
I create you an example you can fork.
It will be useful for discuss.
https://plnkr.co/edit/O3fP71Yc2uMApv5aGot6
@antoniosprovidakis @samiheikki Are you able to manually call the resize event? Try doing that.
@The5heepDev calling resize event won't work because applyResponsive function is invoked only when screenFormat changes therefore *-important class is not set.
The workaround is to observe changes of your array and then call applyPriorieties function.
Addidtionally while looking at your code I noticed that you are passing String to applyResponsive and then changing it to array and iterating over it in applyPriorities. You could just pass String and delete one iteration. Cheers!
For the meanwhile use this workaround:
<iron-grid id=grid>
<template is="dom-repeat" items="[[_componentsList.data]]" on-dom-change="_refreshGrid">
<div class="xs12 s12 m6">
<paper-material elevation="3">...</paper-material>
</div>
</template>
</iron-grid>
<script>
Polymer({
...
_refreshGrid: function() {
this.$.grid.applyResponsive(this.$.grid.currentScreenformat, this.$.grid.currentScreenformat);
}
});
</script>
Thanks for your workaround @dobexx ! It helps a lot. Looking at the dev console, the _refreshGrid is invoked every time the dom change so I would suggest to use this function instead to prevent browser performance issue.
_refreshGrid: function() { this.debounce('refreshGrid', function () { console.log('_refreshGrid' + this.$.grid.applyResponsive); this.$.grid.applyResponsive(this.$.grid.currentScreenformat, this.$.grid.currentScreenformat); }, 300);
Make sense?
@arlejeun @dobexx @maxiplay
I think this line in iron-grid file is wrong:
onResize: function(event) {
var newWidth = this.offsetWidth;
And must be:
onResize: function(event) {
var newWidth = window.outerWidth;
I am thinking to use this grid system for my project could you please suggest if grids are good for responsive design? Any issue still persisting?
