Gadget window/div height problems

[adrian_williams]

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());

[dlender]

What value is being returned by $("#speedDialDiv").height(); seems that is a jquery issue not a gadgets.window.adjustHeight() issue.

[adrian_williams]

the value changes actually.  When the gadget first loads, the value is zero (presumably because the tab hasn't populated visibly yet.  However, upon refresh, the value populates to the correct size of the div (e.g. 114).  I have fixed issue number 2 buy adding a resetter into the code to reset the div height (speedDialDiv) to 60 (the height of the buttons) and have it recalc after the new table is built. 

So problems 1 and 3 still persist.  Gotta get rid of the scroll buttons (though no scrollable bar is present) and got to figure out how to tell it calculate the correct height on initial load.

Thanks,

Adrian

[dlender]

Regarding issue 1 you need to handle the tabvisible event so that when the user clicks the tab that wasn't previously visible, you then render your html.

[dlender]

It is unlikely the height of the gadget can be calculated when the tab the gadget is on is not visible.  Again, use the

containerServices.addHandler(finesse.containerservices.ContainerServices.Topics.ACTIVE_TAB, _handleTabVisible);

and then in the _handleTabVisible function render the html for your gadget and resize the gadget.

Scroll bars are a function of  the browser.  Make sure the html in your gadget does not exceed the width of the Finesee desktop.