There are cases where the list does not expand according to the screen width when zooming out in the browser. If there are numerous List's column, a horizontal scrollbar will appear instead of expanding according to the screen width.

The issues occur mainly when using the following UI themes:
1. DX 8 Plain
2. DX 8 Angle
3. DX 8 Color Admin

The issue is shown in Figure 1:

Figure 1: Non-Responsive List

Steps Examples

Step 1

Apply the following CSS code to custom CSS field in UI Builder > Advanced Settings as shown in Figure 3.

If you don't want the CSS to be applied globally, you may insert the code into an 'HTML Code' component element inside the desired List UI as shown below:

Figure 2: Custom HTML Code

Figure 3: Paste code in Custom CSS field

#content.page_content {
    width: calc(100vw - 350px);

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

Step 2

Test the UI out, the list should now expand according to the screen width.


Figure 4: Expected Result


Sample App

  • No labels