iron-grid
iron-grid copied to clipboard
ozwaldorf
Is this working?
Looks like this component is broken, because I can't get it to work correctly.
If I use s6 m4 as a class, only the last class get applied, so the div occupies 4/12 of the width, but resizing the viewport never toggles the s6 class correctly, it always stays 4/12 of it.
Even the demo in the readme file is not working: https://plnkr.co/edit/O3fP71Yc2uMApv5aGot6?p=preview
My understanding is that iron-grid works like the grid in bootstrap, so s6 m4 makes the div 6/12 (or 1/2) in small screens and 4/12 (or 1/3) in medium screens.
If you open the demo above you'll see that even the first red row is rendered incorrectly. It should occupy the whole width on a small viewport (s12) but it really doesn't:
Also, the columns wrap to a new line in Safari 10:
I can't confirm with safari because I don't have mac. If you want to contribute..
In the first sample, the s12 seems not be taken in account because the screen size is xs. So the the last size specified is taken (l2, l8, l2)
The demo need to be updated to take the new xs and xl sizes. I understand your misunderstanding.
Sorry for the delay, I had put this project away for a few days. I still can't get it to work, anyway. Given this simple markup:
<iron-grid>
<div class="xs6 m4">Test</div>
<div class="xs6 m4">Test</div>
</iron-grid>
The two columns never occupy half of the screen (xs6). They're always at one third (m4), even with the smallest viewport size.
Ok, I need to come back on my previous statement. I made the test with the latest Polymer 1 version (1.8.1) and it is working fine on the example below but for some reason I cannot replicate this behavior on my application. https://plnkr.co/edit/SyJuNkAh2DpIRTvBoCAw?p=preview
It looks like the currentScreenformat is not being updated with my application when I change the width screen - it is always 'xs'. Any idea what could cause such behavior?
In my personnal experience the iron-resizable-behavior does not work in certains case during the initialization of my app. I need to manually call resize at startup.