Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion

osTicket v1.10 (stable) and Maintenance Release v1.9.15 are now available! Go get it now

Make Page Width Flexible

In the Staff and Admin sections at the moment all the class="list" tables also have the width hard coded using
WIDTH="960"

It would be really helpful if this could be removed from the main code and possibly from the css for the container (980px) so that osTicket could be used on narrower and wider devices with ease.


Comments

  • There is a planned feature coming (probably in 2.0) that will make osTicket much easier to theme/skin than it is currently.  Sorry there is no public release date at this time, its a ways off.
  • I would settle for just moving the hard coded width statements from the html in the php to the css that way it would be easy to do basic customisation.
  • edited January 2014
    I made this work using jQuery.. mainly because I was dynamically resizing a preview of an attachment, and I wanted the body to fit too.. ;-)

    YMMV:

    Modify /scp/tickets.php, find right at the bottom:

    require_once(STAFFINC_DIR.'footer.inc.php');
    ?>


    Paste before:

    ?>

    <script>
    //Tell the window to respond to the width, along with the whole middle part.
    jQuery("div#container").css("width","75%");// dynamic width to fit into the screen.
    jQuery("table").attr('width', "100%"); //now that that has been resized, we need to make sure the th's fit within it.
    jQuery(".message th:nth-child(1)").attr('width',"20%");
    jQuery(".message th:nth-child(2)").attr('width',"30%");
    jQuery(".message th:nth-child(3)").attr('width',"30%");
    jQuery(".message th:nth-child(4)").attr('width',"20%");
    </script>
    <?php


    I have 4 table headings on my ticket threads, so, modify your numbers/widths as you like. The main "tickets.php" screen isn't affected by those headings selectors, only actual ticket-views.. so, its pretty clean.
  • Thank you that worked well and meant I only have a few files to manually change every time I put an update on. 
  • edited January 2014
    Ntozier,

    Any chance we can get the changes suggested by Grizly added to the next release as a short term fix until you can implement a better solution in the future with version 2.0 ?
  • edited January 2014
    Sorry I'm not a dev and dont have that sort of decision making power.  However I have asked them to take a look at this thread.

    Oh and you might be interested in viewing this: https://github.com/osTicket/osTicket-1.8/issues/490
  • FYI: I found a few issues with my fixes, 

    Script section now resembles:
    <script>
    jQuery(window).ready(function(){
    jQuery("div#container").css("width","75%");// dynamic width to better fit the screen, I only use 75% because I have other information displayed in the back of the page, you can change this if you want.
    jQuery("div#container").css("min-width","750px");//have to set a minimum, otherwise it looks stupid when shrunk, meaning, if you scale the window, things will start overlapping other things when smaller than this. 
    jQuery("table").attr('width', "100%"); //now that the window has been resized, we need to make sure the table's fit within it.
    /*jQuery(".message th:nth-child(1)").attr('width',"20%");//Only necessary if you have added extra data to the ticket thread entries, not everyone will have done this. (Think, Mod_Duration and kin)
    jQuery(".message th:nth-child(2)").attr('width',"30%");
    jQuery(".message th:nth-child(3)").attr('width',"30%");
    jQuery(".message th:nth-child(4)").attr('width',"20%");*/
    jQuery("#basic-ticket-search").closest("table[width='100%']").removeAttr("width"); //Reset for search form. ;-)
    jQuery("#basic_search").css("float","left");//remove that pointlessly dead section of the screen beneath the search box.
    jQuery("a.refresh").css("float","right");
    jQuery("div.clear").removeClass("clear");
    });
    </script>

    I've got loads more jQuery mods, mainly ajax and regex stuff for custom fields auto-population etc. I've added a search-box using the typeahead stuff and included a few jQuery plugins for image handling.. might be a bit much.
    You could simply add a css file there, add whatever you want, but you do need the jQuery/javascript to change the attributes of the elements.. you can't do that with css. (like, table width etc)

    If it gets any bigger, is probably better in a separate file, ie: /scp/js/tickets.php.customisations.js and simply linked here.

    If you are feeling adventurous, and have painfully small monitors, try adding this one:
    jQuery("td[nowrap]").removeAttr("nowrap");//Allow all table contents to wrap!

    It gets more "interesting" when trying to override an "!important" declaration, for instance, to get the response textarea to expand to fit the available screen space, so you don't have to type into that little box on a massive screen (especially a newer mac).
    //make the textarea input field fit the new screen size.
    function resizeTextArea(){
           var w = jQuery("#content").width();
           var h = jQuery("#content").height();//get the height and width of the the main thread space.
           var space = jQuery(window).width() * 0.75 - 51; //don't ask how I calculated 51.. it works, enough.
           var r = getAspectRatio(w,h,space,h*2);
           jQuery("textarea#response").removeAttr('style').attr('style', 'width: '+ (r.width - 90) + 'px !important;'); //Override the style for the element, -90 for the gutter/column
    }
    function getAspectRatio(srcWidth, srcHeight, maxWidth, maxHeight) {
           var ratio = [maxWidth / srcWidth, maxHeight / srcHeight ];
           ratio = Math.min(ratio[0], ratio[1]);
           return { width:srcWidth*ratio, height:srcHeight*ratio };
    }
    resizeTextArea();
    //Create event listener to dynamically modify the textarea when page resized
    jQuery(window).bind("resize", function(){ resizeTextArea(); });
    //Allow the box to expand by telling its parent box to be wider.
    jQuery("textarea#response").parent().attr("width","100%");


    I tell you what the best change I made though, was reordering the menu, putting "Tickets" first, instead of the Dashboard, how often do you click Tickets compared to Dashboard? LOADS.. Its in /include/class.nav.php

    Find and reorder the getTabs function for staff (line 95).
  •  putting "Tickets" first, instead of the Dashboard, how often do you click Tickets compared to Dashboard?

    Yes I did that as well.   Drove me mad every time I overshot Open by a tad the menu dropping down over the options I wanted.

    I'll take a look at the others, when I get back off holiday.
Sign In or Register to comment.