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
Thanks so much.I took out the "<style>" tag in my css file, and now it's expanding.
Do you have the <style> tags in your mystyle.css file? This could be the problem.
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>
A couple of questions...
What browser are you testing this with?
What other markup is on your page?