Adaptive HTML elements to the window size

#13 · closed · 1 comments

View on GitHub ↗

ervinalla99

Hi, I tried to fix something very simple like making the panels responsive to the size of the window because you can't see properly the app with a laptop for example, or when you restore down the window. ![image](https://github.com/user-attachments/assets/81ca85f6-3bad-409d-b46f-641d4945bb5b) I tried to use some CSS style but I failed😅 Can you take care of this?

Comments

agviegas

We control this [here](https://github.com/ThatOpen/engine_templates/blob/87bd6e75422d299c561fe78ab22abdd44d2b3c5b/templates/vanilla/src/ui-templates/grids/viewport.ts#L97). It uses grid [layouts](https://www.w3schools.com/css/css_grid.asp). The variables that control the column widths are [here](https://github.com/ThatOpen/engine_templates/blob/87bd6e75422d299c561fe78ab22abdd44d2b3c5b/templates/vanilla/src/globals.ts#L3-L4). So if you set them to something like `30%`, this will work for you. You can also customize the grid layout to fit your needs. Cheers!