2

In creating reusable components for communities I have come up against a bit of a challenge with layout. Let's say I am designing a simple table. When a user places this table in a main layout column, I would like it to display as a normal table does. However, if placed in a sidebar or viewed on a narrower device it should reflow to display rows as cards. A responsive layout with respect to viewport size can be accomplished with media queries, but CSS does not support element queries yet.

Has anyone solved this problem in lightning in a reusable fashion or had luck bringing in a third party library such as EQCSS (http://elementqueries.com/) to accomplish this? Is current best practice to have a design attribute that users must choose their layout type instead of it being dynamically determined based on placement?

Improve this question
2
  • I have a similar question here that has yet to get an answer that works: salesforce.stackexchange.com/questions/155296/…
    – Eric
    Commented Mar 8, 2017 at 1:51
  • @Eric If I don't get any info on here I am going to just try a number of the third party libraries to see if there are any that don't require a complete rewrite of SLDS to work.
    – dsharrison
    Commented Mar 8, 2017 at 3:10

2 Answers 2

Reset to default
1

They made the media queries even easier to access with the visibility classes.

https://www.lightningdesignsystem.com/components/utilities/visibility/#flavor-responsive

You can use the combination of below classes to hide or show items.

Salesforce visibility media queries

you can display your results in three different items

large and medium tables

<table class="slds-medium-show"></table>

small cards

<div class="slds-small-show-only"></div>

really small cards

<div class="slds-x-small-show-only"></div>

hope this helps.

Improve this answer
3
  • Those utility classes are still using the viewport size though, right?
    – dsharrison
    Commented May 12, 2017 at 23:46
  • @dsharrison Correct. So if you component lives in a small region (for instance a sidebar) you'd still have issues, even though the viewport size could be large.
    – Björn
    Commented Feb 22, 2018 at 14:05
  • If only they placed a link to this in the LDS Grid section! I was looking for this and didn't notice this section at all. Thanks @Sid!
    – markgarg
    Commented Jun 1, 2018 at 13:30
0

You can use the lightning design system which provides a full grid for you.

Improve this answer
3
  • 1
    Is their grid system based off of container size and not device size? I looked at the scss source code and I only saw media queries in there.
    – dsharrison
    Commented Mar 8, 2017 at 1:15
  • I am not 100% sure. Might be worth just trying it in a small POC
    – Jannis Bott
    Commented Mar 8, 2017 at 1:33
  • 2
    @JannisBott - Grid sizing unfortunately does not work properly when in the narrow right side or lightning page until the window is narrowed
    – Eric
    Commented Mar 8, 2017 at 1:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .