Full Width Interactive Report Search Field

In this blog, I demonstrate how to always display a full width Interactive Report Search field regardless of the browser width, mobile or any CSS media queries.

Here is what is looks like as standard

Here is what it looks like with the modification

This especially works well when combined with the Slimmer Interactive Report Controls for Modal Dialogs CSS fix. See picture:

All you need to do is paste in this big wad of CSS as Page > CSS > Inline

/* Force the toolbar and controls to use the full width */
#a-IRR-toolbar,
.a-IRR-toolbar,
.a-IRR-controls {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100vw !important;
  display: flex !important;
}

/* Make the search group and field container grow */
.a-IRR-controlGroup--search {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
}

.a-IRR-search {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}

.a-IRR-searchFieldContainer {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
}

.a-IRR-search-field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

ENJOY!

What’s the picture? When the contrail lines up perfectly above a tree - Farm near Kirkby Overblow. Visit Yorkshire!