Simon Fredsted

TL;DR: Copy the HTML and CSS at the end of this post to your osTicket installation to make it somewhat acceptable on mobile.

I've been using osTicket for years. It's a pretty neat ticket system, and does pretty much what you want.

But since the osTicket administration interface expects you're at your workstation, the entire interface is wonky when viewed on your iPhone. You have to scroll and zoom and buttons are invisible. Click targets are small, or out of reach. When you click on a textarea, the entire screen zooms in, preventing you from viewing context, or even what you've entered. Things like that. It's not mobile friendly, and I couldn't find an app that works nicely.

Luckily, it's quite simple to fix this with a few lines of CSS and a meta tag. No need for a mobile "responsive" theme. You can just add this code to your osTicket installation, and voila. It's not the pinnacle of UI design, but it's better than nothing for when you're writing a quick answer while standing in line at the bakery.

Before and After

Here's roughly what it does:

• Sets the viewport and zoom to something that's mobile friendly
• Removes the default 960px page width
• Removes redundant space from menu items and tables
• Sets better default sizes for text boxes and modals

Insert this snippet in include/staff/header.inc.php, preferably around line 26, after the last <meta> tag:

    <!-- <Make osTicket Somewhat Acceptable on mobile> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!-- </Make osTicket Somewhat Acceptable on mobile> -->

Next, add the following lines to scp/css/scp.css, line 1:

/* <Make osTicket Somewhat Acceptable on mobile> */
@media (max-width: 767px) {
    #container {
        width: inherit;
        margin: 0 auto 20px auto;
    }

    table.ticket_info {
        width: 100%;
    }

    .jb-overflowmenu {
        width: inherit !important;
    }

    ul#nav {
        overflow-x: scroll;
        overflow-y: hidden;
        width: inherit;
    }

    ul#nav .active, ul#nav .inactive {
        display: inline-block;
        min-width: auto;
        width: auto;
        padding-left: 0px;
        padding-right: 1px;
        height: 26px;
        color: #555;
        text-align: center;
        position: relative;
        border-radius: 5px 5px 0 0;
        border-style: solid;
        border-width: 1px 1px 0;
        border-color: transparent;
    }

    ul#nav > li + li {
        margin-left: 0;
    }

    form#tickets, #content > form {
        overflow-y: scroll;
    }

    #header #logo img {
        display: none;
    }

    #reply .redactor-styles {
        font-size: 17px;
    }

    select, .select2 {
        max-width: 200px !important;
    }

    #popup.dialog.size-normal {
        width: 300px !important;
    }

    #basic_search .input input.basic-search {
        width: 100px;
    }

    .action-button {
        margin: 0 2px;
        padding: 2px 7px;
    }
}

/* </Make osTicket Somewhat Acceptable on mobile> */

This entry was posted on Monday, December 1st, 2025 at 10:57 and is filed under Articles. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.