1. Responsive Interactive Reports in Theme 25

    Here’s a small snippet of CSS you can add to your pages in your Theme 25 based application to make Interactive Reports more responsive. I hope to be able to include this in the next APEX patch but here’s a temporary fix for now.

    You can add this to the Inline CSS field of any page that has an Interactive Report that you’d like to make responsive.

    Here’s a quick screenshot of the result:

    Here’s the CSS:

    @media only screen and (max-width:767px){#apexir_WORKSHEET{overflow:auto}
    #apexir_TOOLBAR_CLOSE{height:auto;zoom:1}
    #apexir_TOOLBAR_CLOSE:before,#apexir_TOOLBAR_CLOSE:after{content:"\0020";display:block;height:0;overflow:hidden}
    #apexir_TOOLBAR_CLOSE:after{clear:both}
    #apexir_TOOLBAR_OPEN{border-bottom:none;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}
    .apexir_BUTTONS{margin:0;position:static;float:none;border:1px solid #AAA;border-top:none;padding:0 8px 8px 8px;background-color:#EAEAEA;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}
    .apexir_BUTTONS table{width:100% !important}
    .apexir_BUTTONS button{margin:8px 0 0 0 !important;display:block;width:100%}
    .apexir_SAVED_REPORTS,#apexir_SEARCH_BAR_OPTIONS{clear:both}
    .apexir_SAVED_REPORTS:empty,#apexir_SEARCH_BAR_OPTIONS:empty{display:none}
    #apexir_SEARCH_BAR_OPTIONS{padding:8px 8px 0 8px;margin:0;display:table;float:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%}
    #apexir_SEARCH_BAR_OPTIONS a.irr-pill{display:table-cell;float:none;width:auto}
    #apexir_SEARCH_BAR_OPTIONS a.irr-pill span{margin:4px auto}
    .apexir_COLUMN_SELECTOR,#apexir_SEARCH_COLUMN_DROP,.apexir_SEARCH,.apexir_SAVED_REPORTS{margin-bottom:0}
    .apexir_ACTION_MENU{float:none;padding:8px 8px 0 8px;margin:0;clear:both}
    .apexir_ACTION_MENU div.dhtmlMenuLGButton{float:none}
    .apexir_ACTION_MENU button#apexir_ACTIONSMENUROOT{float:none;width:100%}
    div#apexir_CONTROL_PANEL_DROP{overflow:auto;padding:8px}
    }
    @media only screen and (min-width:480px) and (max-width:767px){input#apexir_SEARCH{width:360px}
    }
    @media screen and (min-width:320px) and (max-width:479px){input#apexir_SEARCH{width:200px}
    }