conditional render based on page width?

  • 3
  • Idea
  • Updated 1 year ago
How did you guys do it on Skuidify.com?? When you decrease the page width, the Skuid logo switches to just the U without the word, the navigation items sprout icons and some disappear... it looks like you have conditional rendering based on page width. How??

Thanks in advance for divulging your secret sauce recipe. 
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb

Posted 3 years ago

  • 3
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Unfortunately, we used css media queries. I'm hoping a future release has declarative width-based conditional rendering, but alas, not there yet.
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
Inline CSS with media queries and custom CSS classes:





Note that media queries get complicated pretty quickly and don't work as you'd expect in some scenarios, which is why we've yet to offer them out of the box.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
^^^ bump ^^^
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
^^^ bump ^^^
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
^^^ bump ^^^
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb