1

What values does Lightning use to make the Small, Medium, Large, and Xlarge width determination?

Make Your Lightning Page Components Width-Aware with lightning:flexipageRegionInfo

There is nothing specified here:

Flexipage Region Info

2

Added based on comments

As a standard you get only 4 values as stated. If you want to render based on custom width/height, you can use media queries

The Media Queries Level 4 specification includes some syntax improvements to make media queries using features that have a "range" type, for example width or height, less verbose. Level 4 adds a range context for writing such queries. For example, using the max- functionality for width we might write the following:

@media (max-width: 30em) { ... }

In Media Queries Level 4 this can be written as:

@media (width <= 30em) { ... }

Using min- and max- we might test for a width between two values like so:

@media (min-width: 30em) and (max-width: 50em) { ... }

This would convert to the Level 4 syntax as:

@media (30em <= width <= 50em ) { ... }

Media Queries Level 4 also adds ways to combine media queries using full boolean algebra with and, not, and or.


OLD

You need not worry about the values used by flexipageRegionInfo. Just note that it will return the values SMALL, MEDIUM, LARGE, or XLARGE

Below is the sample:

COMPONENT:

<aura:attribute name="width" type="String"/>
<lightning:flexipageRegionInfo width="{!v.width}"/>

width = {!v.width}

lightning:flexipageRegionInfo will set the value of width which will be set on attribute because of 2-way data binding

Now put this component in different regions of flexipage to verify.

Output:

enter image description here

  • The problem I have is that I'm trying to render the elements in a component differently when the size is less than MEDIUM, but not SMALL. – Michael Sobczak Sep 19 at 19:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.