This is how to have a responsive width
Simply put this in scripts and styles, css
:root {
--retool-canvas-max-width: auto;
}
This is how to have responsive height
It is a bit more complicated but it is still easy with a little bit of help.
- First you will have to look in the elements in your browser F12. When navigating the html, look for the containers that you want to take the full height. A lot of different html div will be representing the same container, but one will have a class name starting with _retool-container-$nameOfYourContainer
- Then find the component inside de container or the componentS, because you need to apply the style to the container and the components inside.
But I believe that an image is worth a thousand words, here is a screenshot for you to link the css to the dashboard.
._retool-container-UpdateForm_Container{
height: calc(100vh - 140px) !important;
}
._retool-container-container_planning {
height: calc(100vh - 140px) !important;
}
.retool-canvas-container {
overflow: hidden !important;
}
._retool-Form_Planning {
height: 100% !important;
}
._retool-container-container_planning .retool-grid {
height: 100% !important;
}
._retool-container-container_planning .retool-grid-content {
height: 100% !important;
flex: none !important;
}
._retool-container-Map_Planning{
transform: none !important;
height: 50% !important;
}
._retool-container-table_planning{
transform: none !important;
top: 50%;
height: 50% !important;
}
._retool-container-Form_Planning{
height: 100% !important;
transform: none; !important
}