Wrong initial grid render

[ghost]

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>

[maxiplay]

Can you provide a plunkr example ?

[ozwaldorf]

@AntoniosProvidakis Is this on Microsoft Edge?

[ghost]

@The5heepDev No, it's on Google Chrome.

[ozwaldorf]

@AntoniosProvidakis With the new update (v3.3.1), is this bug fixed?

[ghost]

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.

tsp.zip

[ozwaldorf]

@AntoniosProvidakis I'm busy for the rest of today, but I can look at it tomorrow afternoon.

[ghost]

@The5heepDev Yeah, take your time! I'll be happy to hear from you. Thanks!

[ghost]

@The5heepDev Hello, it's been long since the last time. Did you take a look on the issue? :)

[ozwaldorf]

@AntoniosProvidakis OMG, I'm so sorry! I completely forgot. I'll take a look in a bit. Sorry!!

[ozwaldorf]

@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.

[ghost]

@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.

[ozwaldorf]

@AntoniosProvidakis I tried a bunch of different methods of firing the resize event on load, but they were all to early.

[samiheikki]

I have the same issue with dom-repeat. Otherwise great component!

[maxiplay]

Do you meet the problem again with the new version ?

[ghost]

@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.

iron-grid_bug.zip

[maxiplay]

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

[ozwaldorf]

@antoniosprovidakis @samiheikki Are you able to manually call the resize event? Try doing that.

[ksmolicz]

@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!

[maxiplay]

@ksmolicz Pull request is welcomed ;)

[dobexx]

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>

[arlejeun]

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?

[dobexx]

Yes it's even better @arlejeun I would set the debounce time to 100 ms.

[AliSeyfollahi]

@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;

[onlinerahul]

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?