Filter Layout


SharePoint List Filter has two layout modes: flexible and grid.

Grid

Simple layout based on grid which contains two columns (field caption and filter control) and row for each list field used in filter form. Width of the first column equals 200px and does not depends on screen size.

Grid Layout

Flexible

Flexible layout allows to build up more compact filter form. In case of using flexible layout size of whole filter form and filter controls depends on screen size.

There are two kinds of filter controls from flexible layout' point of view: normal and wide controls. The difference lies in the width of the control. Following controls are wide:

All other controls are normal.

Breakpoints

SharePoint List Filter based on Office UI Fabric. Therefore there are six breakpoints.

  • small (320px - 479px)
  • medium (480px - 639px)
  • large (640px - 1023px)
  • extra large (1024px - 1365px)
  • exta extra large (1366px - 1919px)
  • extra extra extra large (1920px and up)

The table below contains information about these breakpoints and size of filter controls (% of the web part width):

Control/Breakpoint SM MD LG XL XXL XXXL
Text 100% 50% 50% 33% 25% 25%
Text with options * 100% 100% 50% 50% 33% 33%
Autocomplete 100% 50% 50% 33% 25% 25%
List 100% 50% 50% 33% 25% 25%
List with multiple selection * 100% 100% 50% 50% 33% 33%
Date 100% 50% 50% 33% 25% 25%
Date range * 100% 100% 50% 50% 33% 33%
User or Group * 100% 100% 50% 50% 33% 33%
Multiple User or Group * 100% 100% 50% 33% 33% 33%
Yes/No 100% 50% 50% 33% 25% 25%
Taxonomy Term 100% 50% 50% 33% 25% 25%
Multiple Taxonomy Term * 100% 100% 50% 50% 33% 33%
Slider 100% 50% 50% 33% 25% 25%
Range slider 100% 50% 50% 33% 25% 25%
* - wide controls

Height of filter controls is fixed and equals 30px.

Flexible layout in action

Here is an example how flexible layout works. The same filter form in different screen sizes:

Small screen:

Flexible Layout in small screen

Medium screen:

Flexible Layout in small screen

Large screen:

Flexible Layout in small screen

Extra large screen (1024px and up):

Flexible Layout in small screen

Choose filter layout

To switch between filter layouts click on Settings button on top of the web part and make your choose:

Change SharePoint List Filter Layout