Merge pull request #251 from greezybacon/issue/247

ui: Fix large image display

Reviewed-By: Peter Rotich <peter@osticket.com>

assets/default/css/theme.css

@@ -568,6 +568,15 @@ label.required {
   position: relative;
   top: 6px;
 }
+#ticketForm > table {
+    table-layout: fixed;
+}
+#ticketForm > table td {
+    width: 160px;
+}
+#ticketForm > table td + td {
+    width: auto;
+}
 #ticketForm td textarea,
 #clientLogin td textarea,
 #ticketForm div textarea,

css/thread.css

@@ -455,6 +455,7 @@ table.thread-entry {
 .image-hover {
     display: inline-block;
     position: relative;
+    max-width: 100%; /* Ensure image hovered is resized */
 }
 .image-hover .caption {
     background-color: rgba(0,0,0,0.5);

include/staff/cannedresponse.inc.php

@@ -28,8 +28,9 @@ $info=Format::htmlchars(($errors && $_POST)?$_POST:$info);
  <input type="hidden" name="a" value="<?php echo Format::htmlchars($_REQUEST['a']); ?>">
  <input type="hidden" name="id" value="<?php echo $info['id']; ?>">
  <h2>Canned Response</h2>
- <table class="form_table" width="940" border="0" cellspacing="0" cellpadding="2">
+ <table class="form_table fixed" width="940" border="0" cellspacing="0" cellpadding="2">
     <thead>
+        <tr><td></td><td></td></tr> <!-- For fixed table layout -->
         <tr>
             <th colspan="2">
                 <h4><?php echo $title; ?></h4>

include/staff/faq.inc.php

@@ -30,8 +30,9 @@ $info=Format::htmlchars(($errors && $_POST)?$_POST:$info);
  <input type="hidden" name="a" value="<?php echo Format::htmlchars($_REQUEST['a']); ?>">
  <input type="hidden" name="id" value="<?php echo $info['id']; ?>">
  <h2>FAQ</h2>
- <table class="form_table" width="940" border="0" cellspacing="0" cellpadding="2">
+ <table class="form_table fixed" width="940" border="0" cellspacing="0" cellpadding="2">
     <thead>
+        <tr><td></td><td></td></tr> <!-- For fixed table layout -->
         <tr>
             <th colspan="2">
                 <h4><?php echo $title; ?></h4>
@@ -125,7 +126,7 @@ $info=Format::htmlchars(($errors && $_POST)?$_POST:$info);
                 <em><strong>Help Topics</strong>: Check all help topics related to this FAQ.</em>
             </th>
         </tr>
-        <tr><td>
+        <tr><td colspan="2">
             <?php
             while(list($topicId,$topic)=db_fetch_row($res)) {
                 echo sprintf('<input type="checkbox" name="topics[]" value="%d" %s>%s<br>',

include/staff/page.inc.php

@@ -32,8 +32,9 @@ $info=Format::htmlchars(($errors && $_POST)?$_POST:$info);
  <input type="hidden" name="a" value="<?php echo Format::htmlchars($_REQUEST['a']); ?>">
  <input type="hidden" name="id" value="<?php echo $info['id']; ?>">
  <h2>Site Pages</h2>
- <table class="form_table" width="940" border="0" cellspacing="0" cellpadding="2">
+ <table class="form_table fixed" width="940" border="0" cellspacing="0" cellpadding="2">
     <thead>
+        <tr><td></td><td></td></tr> <!-- For fixed table layout -->
         <tr>
             <th colspan="2">
                 <h4><?php echo $title; ?></h4>

include/staff/ticket-open.inc.php

@@ -8,8 +8,13 @@ $info=Format::htmlchars(($errors && $_POST)?$_POST:$info);
  <input type="hidden" name="do" value="create">
  <input type="hidden" name="a" value="open">
  <h2>Open New Ticket</h2>
- <table class="form_table" width="940" border="0" cellspacing="0" cellpadding="2">
+ <table class="form_table fixed" width="940" border="0" cellspacing="0" cellpadding="2">
     <thead>
+    <!-- This looks empty - but beware, with fixed table layout, the user
+         agent will usually only consult the cells in the first row to
+         construct the column widths of the entire toable. Therefore, the
+         first row needs to have two cells -->
+        <tr><td></td><td></td></tr>
         <tr>
             <th colspan="2">
                 <h4>New Ticket</h4>

scp/css/scp.css

@@ -546,6 +546,17 @@ a.print {
     border-bottom:1px solid #ddd;
 }
 
+.form_table.fixed {
+    table-layout: fixed;
+    border-collapse: collapse;
+    width: 100%;
+}
+.form_table.fixed td {
+    width: 180px;
+}
+.form_table.fixed td + td {
+    width: auto;
+}
 
 td.multi-line {
     vertical-align:top;
@@ -902,8 +913,8 @@ h2 .reload {
     border-top:none;
 }
 
-#response_options > table {
-    width:928px;
+#response_options > form > table {
+    table-layout: fixed;
 }
 
 #response_options > table td {