How to adjust the elements position if space is available?

I have multiple buttons that are visible based on a particular selection. The buttons associated with that selection are displayed, and they must adjust according to the available screen space.

Scenario:
In the case of ID and Age, the following buttons are visible: Pan, Aadhaar, Passport, DL, Other Document.
In the case of Address, the following buttons are visible: Aadhaar, Passport, DL, Other Document, Electricity Bill, Telephone Bill, Bank Statement.
In the case of Address Proof, the following buttons are visible: Passbook, Cheque, Bank Statement.

4 Likes

You can configure the grid list element to fetch dynamic data from a service based on user input. For example, if the user provides an ID proof as input, only then will the required data be retrieved from the service.

1 Like

@Neeraj_Kumar Ritik made a valid point. Instead of using hardcoded buttons for each document type, you should consider using a grid list. This approach is more scalable—it will allow you to easily add or remove document types in the future, and it fits well with the current requirements too.

2 Likes

If you don’t want to use an api service, you can use a JavaScript function. Pass the document as a parameter, retrieve a list from the function and store that in a entity., and display the documents using a grid or list layout.

@Vinay_Pratap_Singh @Ritik_Dixit, The whole development is done now, and your suggested approach will require redevelopment.
Apart from this approach, any other way?