WebSplitter not sizing properly inside an UpdatePanel

1140

Wallace posted over 13 years ago

The WebSplitter is not filling 100% height when dropped into an UpdatePanel from Safari and Chrome (works fine in IE and Firefox). The UpdatePanel contains a Div panel set to 100% height/width and it is the parent of the WebSplitter. Here is the markup:

<ig:SplitterPane runat="server" Size="65%" ScrollBars="Hidden">
        <Template>
          <div class="AvrioModule100Percent">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
              <ContentTemplate>
                <div class="AvrioModule100Percent">
                  <ig:WebSplitter ID="igSplitTree" runat="server" Orientation="Vertical" Width="100%"
                    Height="100%" DynamicResize="true" ResizeWithBrowser="True" Enabled="true" EnableAjaxViewState="true">
                    <Panes>
The stuff inside the splitter (i.e., the tree and associated grid, each in a separate pane
                    </Panes>
                  </ig:WebSplitter>
                </div>
              </ContentTemplate>
            </asp:UpdatePanel>
          </div>
        </Template>
      </ig:SplitterPane>

...

Any ideas as to what we need to do to get this to work properly in Chrome and Safari.

24497

[Infragistics] Viktor Snezhko posted over 13 years ago in reply to Lenny

Hi Lenny,

If WebSplitter does not have px height, then inside of UpdatePanel it will be probably collapsed.

If it is the case, then there is no easy way to fix it because UpdatePanel does not expose any properties related to its size. Application within onload or similar event, may try to find reference to html-DIV element used by UpdatePanel and set its height to 100%.
Cancel
Reply

Cancel
455

Lenny posted over 13 years ago in reply to [Infragistics] Viktor Snezhko

I am having the same issue. I took your example and wrapped an asp:UpdatePanel around it and sure enough it does not resize. Any ideas?

Thanks Lenny
Cancel
Reply

Cancel
24497

[Infragistics] Viktor Snezhko posted over 13 years ago in reply to Gavin

Hi,

The UltraWebGrid is rather old control and at the time when it was first released, there were no such browsers. It is possible that in some applications, the UltraWebGrid may have issues under Safari and Chrome.

I suggest you to use WebDataGrid instead.
Cancel
Reply

Cancel
60

Gavin posted over 13 years ago in reply to [Infragistics] Viktor Snezhko

Thanks a lot for your help and for your quick response.

I have followed your advice and reworked the way I have done my sizing. This has fixed my issues so I have it working in Safari and Chrome! :)

Just another quick question: Is the UltraWebGrid compatable with Safari and Chrome? Solving the first issue was great, but it seems I'm seeing problems with the behaviour of the UltraWebGrid now? Again with 100% sizing and also column header widths not algining to cells.

Thanks
Cancel
Reply

Cancel
24497

[Infragistics] Viktor Snezhko posted over 13 years ago in reply to Gavin

Hi Gavin,

I tested a simplified version of your application and it worked same way in IE, Firefox, Safari, Chrome.
Below is my sample.

<head runat="server">
<style type="text/css">
    body, html, form { height:100%; }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div style="width:90%;height:20%;background:pink;"></div>
<div id="ContentMain" style="width:90%;height:70%;background:cyan;">
   <div id="MainDivElement" style="padding:5px;height:100%;">
    <ig:WebSplitter ID="WebSplitter1" runat="server" Width="100%" DynamicResize="True" Height="95%">
     <Panes>
      <ig:SplitterPane runat="server"></ig:SplitterPane>
      <ig:SplitterPane runat="server"></ig:SplitterPane>
     </Panes>
    </ig:WebSplitter>
   </div>
    </div>
    </form>
</body>

However, if size of ContentMain is unknown, or if it changes after load of page, or if it depends on other content/children, which may change their size after load (like running their own initialzation scripts or loading src for IMG objects), then that may affect size of MainDivElement and size of its child WebSplitter will be wrong.

If that is the case, then application may try to process those actions and when layout of page which may affect the size of MainDivElement was finalized, then application may trigger layout of splitter. To perform layout, application should call method
WebSplitter.layout(widthPixels, heigthtPixels)

Exactly that is done internally if splitter is located inside of LayoutManager, such as SplitterPane, WebDialogWindow, etc. In this case if size of parent was modified, then LayoutManager notifies WebSplitter about that change by calling layout method.

Also, I noticed that in your sample, the container of WebSplitter has padding:5px and height of WebSplitter is set to 100%. In general case that is "illegal" layout, because actual size of splitter will be 10px larger than size of its container. If to add to it borders of WebSplitter, which are 1px wide, then outer size of WebSplitter will be 12px larger than size of MainDivElement. In order to support % width/height with combination of padding and border of children and container, application should do quite a lot of work in javascript. Otherwise, application may try to reduce % by targetting average size. For example, instead of 100% use 90..99.5%.
Cancel
Reply

Cancel