Slimmer Interactive Report Controls for Modal Dialogs

Whats this about? OK so you've created an Oracle APEX Modal Dialog Page and you've added an Interactive Report and its decided to drop the IR Actions Button down a line and you lose a tonne of vertical height - see picture below.

You expected it to look like this fine example on Normal Pages

I have a fix for you to make your modal dialog look like this:

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

@media (max-width: 767px) {
  /* Prevent IRR toolbar and its children from stacking or stretching on small screens */
  .a-IRR-controls,
  .a-IRR-toolbar,
  .a-IRR-controlGroup,
  .a-IRR-actions,
  .a-IRR-buttons {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  /* Prevent IRR buttons from growing, shrinking, or wrapping */
  .a-IRR-button,
  .a-IRR-button--actions,
  .a-IRR-button--search,
  .a-IRR-button--colSearch {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    white-space: nowrap !important;
  }
}

ENJOY!

What’s the picture? These are Valais Blacknose Sheep originating in the Valais region of Switzerland, now loving life in Yorkshire.