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.
Hi,
You may try to disable RenderMode=Inline. Most browsers do not support that attribute for DIV and SPAN and element gets collapsed.
Hi I also have the same problem with the WebSplitter, although mine is not inside an update panel, its indside a Content control.
My mark up looks like this:
<asp:Content ID="ContentMain" ContentPlaceHolderID="MasterContentMain" runat="Server">
<div id="MainDivElement" style="padding: 5px; height: 100%;">
<%
-- WEB SPLITTER --%>
<ig1:WebSplitter ID="MainWebSplitter" runat="server" DynamicResize="true" Width="100%" ResizeWithBrowser="true" Height="100%">
***STUFF INSDE WEB SPLITTER HERE***
</ig1:WebSplitter>
</div>
</
asp:Content>
In IE8/9 and Firefox 4/5 it works correctly, but the latest Safari and Chrome all start with the height of the WebSplitter squished up to a really small height?? If I apply a fixed height to web splitter it will size accordingly, but not when set to 100%.
I've noticed a quirky side to this issue is that if I click on the splitter bar it will then magically draw itself to a full 100% of the browser, but not before? Can you please help me?
Thanks
Gavin
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%.
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
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.
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.
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 methodWebSplitter.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%.