Making Overview columns responsive

Engines Overview Engine
1

Our project uses multiple overviews defined using the overview models. We want to optimize the width of our columns. The first and last columns of the table contain values with predefined widths and can be defined with a static value. So we defined their width and set the “Fixed Width” property to true. We also have columns that contain long string entries that can vary in size,
so we left the fixed width property to false and just configured a minimum width. Our expectation, based on the documentation, was that the center columns would take the space available either based on the ratio of the configured minimum width, or based on the length of the strings in the cells and that on window resize the width would shrink up to minimum width before the horizontal scrolling starts, but in fact, the center columns stays fixed and does not vary in width.

How can we make the width of our columns responsive ?

2

Hi @jeanpierre-golden-knoll , can you post the part of column configuration of your model here ?

3 
    "columns": [
      {
        "id": "column-58741",
        "label": [
          {
            "locale": "en",
            "text": "Prio"
          },
          {
            "locale": "de",
            "text": "Prio"
          }
        ],
        "width": 0.7,
        "fixedWidth": true,
        "styles": {},
        "elementRef": "field_75fd6",
        "sortable": true,
        "preferredSorting": "ASC"
      },
      {
        "id": "column-5bd25",
        "width": 0.9,
        "fixedWidth": true,
        "elementRef": "field_f78b8",
        "sortable": true,
        "preferredSorting": "ASC"
      },
      {
        "id": "column-53fb4",
        "label": [
          {
            "locale": "en",
            "text": "Auftragstyp"
          },
          {
            "locale": "de",
            "text": "Auftragstyp"
          }
        ],
        "width": 4,
        "elementRef": "F5",
        "sortable": true,
        "preferredSorting": "ASC"
      },
      {
        "id": "column-5847d",
        "width": 2.8,
        "elementRef": "F4",
        "sortable": true,
        "preferredSorting": "ASC"
      },
      {
        "id": "column-36e45",
        "label": [
          {
            "locale": "en",
            "text": "Anzahl"
          },
          {
            "locale": "de",
            "text": "Anzahl"
          }
        ],
        "width": 0.8,
        "fixedWidth": true,
        "elementRef": "F6",
        "sortable": false
      },
      {
        "id": "column-ae035",
        "label": [
          {
            "locale": "en",
            "text": "Stand"
          },
          {
            "locale": "de",
            "text": "Stand"
          }
        ],
        "width": 0.6,
        "fixedWidth": true,
        "elementRef": "field_033cd",
        "sortable": false
      }
    ]
4

Look like you don’t have any pinned column. You need at least a pinned column for the scrollbar to appear when shrinking.

5

This wasn’t what we where looking for. In the end we found out that the issue was that responsive resizing only works when manual resizing is not allowed in the model. The solution was to remove all “Enable Columns Resize” and “Fixed Width”.