search

soflyy / oxygen-bugs-and-features

Bug Reports & Feature Requests for Oxygen
https://oxygenbuilder.com/
314 stars 29 forks source link

4.0 beta 2 - Grid breakpoints don't work #2830

Open stvnthomas opened 2 years ago

stvnthomas commented 2 years ago

Initial properties for grid layouts work find but changes at different breakpoints have no effect. Column count, gap, span, etc. can be set for different breakpoints but they don't actually change the layout of the element or child elements. This affects other components that use the grid layout as well. We've observed the same problems when using the Gallery component with a grid layout.

Steps to reproduce the behavior:

  1. Select the Full Screen breakpoint.
  2. Create a div. Give it a width of 100% and apply the grid layout with a column count of 2.
  3. Switch to another breakpoint and change the column count to 1.
  4. Create two divs within the grid layout.
  5. Switch between the breakpoints. The divs within the grid will always be displayed in two columns.

The same is true if you change any of the other properties as well, such as gap and span.

Spellhammer commented 2 years ago

@stvnthomas Does it work if you do the following after setting up the Grid?

  1. Select a breakpoint
  2. Choose Horizontal child layout
  3. Choose Grid layout and adjust the settings
stvnthomas commented 2 years ago

That seems to get Oxygen to recognize the property changes but there are some additional inconsistencies. The column count persists across breakpoints and can be modified using the Horizontal/Grid layout toggle. You can also adjust other settings like vertial and horizontal gap but the values get lost for additional breakpoints when doing the toggle.

I'm using large numbers so the changes are obvious:

  1. Follow all steps above.
  2. On Full Screen breakpoint, set the horizontal/vertical gap to 48.
  3. On Page Container breakpoint, set the gap to 72 and do the Horizontal/Grid layout toggle.
  4. Click the Less Than 992px breakpoint. Notice the values (column and gap) are correctly inherited from the Page Container breakpoint. Everything should be working as expected at this point.
  5. Set the column count to 2 and toggle the layout. The columns will be updated and gap values will show 72 inherited from the Page Container breakpoint but the true value for the gaps will be the system default of 20px.

These can be explicitly set after the layout toggle but inherited values no longer seem to work.

mikechacra commented 2 years ago

@stvnthomas Does it work if you do the following after setting up the Grid?

  1. Select a breakpoint
  2. Choose Horizontal child layout
  3. Choose Grid layout and adjust the settings

Yeah but it's still messed up. This should be a confirmed bug.

ymarketing commented 1 year ago

Pls fix this