AnsweredAssumed Answered

Gadget window/div height problems

Question asked by adrian_williams on Jan 27, 2014
Latest reply on Jan 29, 2014 by dlender

Hi Guys,

 

     Here's another fun one for ya....I'll do my best to explain the problem but it's challenging.

 

     I have a gadget with almost completely dynamic content...the content consists of a buttonset radio button group and a table of data.  The buttons allow the user to change the date for the data load for the content of the table. All of this is working well.

 

     The problem we continue to have is trying to get the height of the window to dynamically size correctly, taking into account the size of the content in the window. 

 

     The table sizes correctly for the content but the window resize appears to ignore the added height of the div containing the buttons. We have this code (below) quasi-working but with 3 problems:

 

     1.)  On initial login, this tab is not the first tab visible and the div height is zero, so when the user nav's to this tab, the content is hidden (window height set to zero).

 

     2.)  The resize sort of works...except that it keeps the tallest height no matter what the content size is.  For example, if the current view is 200px tall (say...5 rows in the table) and you change the date (which just reloads the table and re-fires the sizing handler) and that data only has 1 row, the window doesn't resize to that...it leaves the window 200px tall. Alternatively, if the new dataset is tallker, the window does resize correctly to accommodate the height. 

 

     3.)  For some very strange reason, this code has forced the horizontal scroll buttons to appear in the window...they span the width of the window and don't seem to be affected by the width of the table.

 

     I really appreciate any help y'all can provide with this.  I apologize in advance if this is difficult to follow...it's really difficult to explain the behavior in a post.

 

Thanks,

Adrian

 

Here is the xml/html code for the table & button div:

 

       <div id="speedDialDiv">

             

              <div id="dateSelectionDiv">

              

              </div>

 

              <table id="agentHistoryTable" border="0" class="tg-table-light">

                <tr>

                  <th class="tg-center"><button class="refreshButton" type="img" onClick="finesse.modules.MyGadget.reloadPage();"><img id="refreshIcon" src="images/refreshIcon.png"</img></button></th>

                  <th class="tg-center">Icon</th>

                  <th class="tg-left">Event</th>

                  <th class="tg-left">Date-Time</th>

                  <th class="tg-center">Duration</th>

                  <th class="tg-center">Number</th>

                  <th class="tg-left">Skill Group</th>

                  <th class="tg-left">Call Type</th>

                  <th class="tg-center">Wrapup Data</th>

                  <th class="tg-center">Agent Phone</th>

                </tr>

              </table>

        </div>

 

And here is the .js code that is currently handling the sizing:

 

        $("#speedDialDiv").height($("#speedDialDiv").height());

        gadgets.window.adjustHeight($("#speedDialDiv").height());

Outcomes