Responsiveness using DxcGrid and DxcFlex

[saikrishna-gattupalli]

Hi,

I am using DxcGrid and DxcFlex for our application development. But I am facing issues with responsiveness. Based on the screen size, we may have to show content column wise or row wise, but unable to, since we are declaring in the component whether to show content in column wise or row wise and unable to change it based on screen size. If we can see below image, the three dropdowns are resized in the given space itself. Please let me know if there is a way to achieve responsiveness?

[GomezIvann]

Hi @saikrishna-gattupalli!

First of all, sorry for the late response. What you are trying to do can be achieved in two ways:

1. Custom flex container and a media querie which changes the direction depending on the screen width. This will give you full freedom to customize whether the inputs should wrap into the next line.
2. Use the DxcGrid container. You must use a special value called auto-fit in this case. The code would look like this.

   <DxcGrid
     templateColumns={["repeat(auto-fit, minmax(140px, 1fr))"]}
     gap="2rem"
   >
     <DxcTextInput label="Long label" size="fillParent" />
     <DxcTextInput label="Very very long label" size="fillParent" />
     <DxcTextInput label="Label" size="fillParent" />
   </DxcGrid>

   This code is telling the grid elements to shrink until they reach 140px width (when the screen is resized). In that case, jump to the next row. If the screen gets bigger and each item has more than 140px, grow them all and split the space evenly. Replace the 140px value with your own, depending on the screen and the use case.

[GomezIvann]

Since there have been no further responses, we consider this issue resolved and proceed to close it.

Thanks.