search

ozwaldorf / iron-grid

Iron Grid - A Responsive Grid System for Polymer
MIT License
67 stars 24 forks source link

Is this working? #31

Closed tegola closed 1 year ago

tegola commented 7 years ago

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.

maxiplay commented 7 years ago

Hello,

Can you provide your browser version and a sample

tegola commented 7 years ago

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:

iron-grid-chrome

Also, the columns wrap to a new line in Safari 10:

iron-grid-safari

maxiplay commented 7 years ago

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.

maxiplay commented 7 years ago

Demo updated

tegola commented 7 years ago

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.

arlejeun commented 7 years ago

Facing the same issue with polymer 1.8.1.

arlejeun commented 7 years ago

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?

maxiplay commented 7 years ago

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.