How to Fit List According to Screen Size

Introduction

In Joget, ensuring that your application’s user interface is responsive is crucial, especially when dealing with lists that contain numerous columns. A horizontal scrollbar may appear if your list does not expand according to the screen width when zooming out in the browser. This issue primarily occurs with the following UI themes:

• DX 8 Plain
• DX 8 Angle
• DX 8 Color Admin

This guide will show you how to resolve this issue by applying custom CSS to make the list responsive.

How does it work?

To fix the list's responsiveness, you need to apply specific CSS code that adjusts the width of the page content and footer, ensuring that the list expands to fit the screen size. 

Steps to Implement:

You can apply the CSS code globally or to a specific list UI component.

1. Go to UI Builder > Advanced Settings. Paste the following CSS code into the Custom CSS field:
   

   #content.page_content {
       width: calc(100vw - 350px);
   }
    
    
   footer{
       width: calc(100vw - 350px);
   }
   body:not(.horizontal_menu) #page {
   max-width: unset
   }

   
   

If you prefer not to apply the CSS globally, insert the CSS code into an 'HTML Code' component within the desired list UI. This allows the code to be applied only to the specific list where the issue occurs.

Expected outcome

After applying the custom CSS, your list will adjust dynamically to the screen size, eliminating the need for a horizontal scrollbar. This ensures a more seamless and user-friendly experience across different devices and screen sizes.

Download sample app