Is there an easy way to hide components based on the user’s screen width? For example, I have a search field in my navigation bar that I would like to hide if the user is accessing the page from a mobile device. Thanks!
Yup. Made a post on this. A small snippet and you’re set.
http://community.skuid.com/t/simple-solution-for-conditional-rendering-on-width
I used css to set breakpoints for mobile device if you’d like a css-only solution
@media only screen and (max-width: 768px) { /* Add css here that applies only to tablet and mobile sizes : */
#desktop-nav { display:none; } #desktop-nav #app-name { font-size: 15px; /* make title a bit smaller on smaller screens */
} } @media only screen and (min-width: 800px) { /* For desktop or any screen larger than 800px wide: */ #mobile-nav { display:none; } }<br />
This is really slick! I didn’t know about this kind of CSS capability. Not to mention nested CSS.
Just came across this and wanted to provide a quick update, since this can now be handled declaratively in Spark v2 using the new Viewport Width rendering condition.
