How to have a responsive height/width for your app?

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.

  1. 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
  2. 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
}

1 Like