I am using WebSplitter control as my page layout. On the left side is Navigation links, and the right side is content page.However, I don't know how to make the WebSplitter's height and width always equal to the Web Brower just like Microsoft MSDN Page.
How can I make the splitter look like this :
http://msdn.microsoft.com/en-us/library/aa545372.aspx
swcs:
The trick is that you have to tell the stylesheet to style the HTML, BODY and FORM elements in your page at 100%.
Try this style:
html, body, form, .tallElement { height:100%;}
With this markup:
<asp:ScriptManager runat="server" /> <cc1:WebSplitter ID="WebSplitter1" Height="100%" CssClass="tallElement" runat="server"> <panes> <cc1:SplitterPane runat="server"> <Template> left </Template> </cc1:SplitterPane> <cc1:SplitterPane runat="server"> <Template> right </Template> </cc1:SplitterPane> </panes></cc1:WebSplitter>
HTH,
Craig
I tried your code, but it didn't expand. I think it probably needs some javascript to expand it equal to the height and width of the browser.I need some suggestions.
Thanks
A couple of questions...
What browser are you testing this with?
What other markup is on your page?
I'm using Internet Explorer 7, and ASP.NET VB.
Here's the style sheet file contains:
<style>html, body, form, .tallElement { height:100%;}</style>
Here's my asp.net design page:
<%@ Register Assembly="Infragistics2.Web.v8.2, Version=8.2.20082.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.LayoutControls" TagPrefix="ig" %>
<body > <form id="form1" runat="server" > <asp:ScriptManager ID="ScriptManager1" runat="server" /> <ig:WebSplitter ID="WebSplitter1" Height="100%" CssClass="tallElement" runat="server"> <panes> <ig:SplitterPane runat="server" > <Template> left </Template> </ig:SplitterPane> <ig:SplitterPane runat="server" > <Template> right </Template> </ig:SplitterPane> </panes> </ig:WebSplitter>
</form> </body> </html>
Do you have the <style> tags in your mystyle.css file? This could be the problem.
Thanks so much.I took out the "<style>" tag in my css file, and now it's expanding.