Introduction
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);
}
footer{
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
