Div height is not adjusting when RadMultiPage loads a long page
My asp.net page has a div (#multipage) that contains a Telerik MultiPage control. For those who are not familiar with Telerik controls think of it as a iFrame that loads various other page in response to the user's clicks on a tab control. My problem is that one of my pages loaded by the multipage control is a long one. And when it loads the browser wraps it with scrollbars rather than expanding the height of the div that contains it. I can't figure out why this is happening. I suppressed scrollbars in the control and did my best to configure my css such that the height of the div is dynamic.
Below is an abbreviated version of my asp.net markup showing only those elements that are related to layout. Can someone please tell me what I need to do to make the height of the multipage div dynamic?
<head runat="server">
<style type="text/css">
* {
margin: 0;
}
html, body
{
height: auto;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
background-color: #144e77;
color: #fff;
font-family: DejaVuSansBook, Sans-Serif;
}
#multipage
{
min-height: 100%;
height: auto !important;
height: 100%;
}
</style>
</head>
<body style="background:url(AuthImages/bg.jpg) repeat; margin:0px 0px 0px 0px">
<form id="form1" runat="server">
&开发者_JAVA技巧lt;div class="wrapper">
<div id="header_container">
<div id="header" style="width:100%; height:75px;">
<div id="logo" style="float:left"></div>
<div id="welcome" style="float:right; margin-right: 5px; margin-top:5px;">
</div>
</div>
</div>
<div id="tabs" style="width:100%; height:25px; border-bottom: 2px solid #144e77">
<telerik:RadTabStrip ID="RadTabStrip1" runat="server"
SelectedIndex="0" Width="100%" MultiPageID="RadMultiPage1">
<Tabs>
<!--tabs are here-->
</Tabs>
</telerik:RadTabStrip>
</div>
<div id="multipage">
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" ScrollBars="None">
<!--RadPageViews are here-->
</div>
<div class="push"></div>
</div>
<div class="footer">
</div>
</form>
There is no way via CSS to make a dynamic frame height.
I am not familiar with ASP nor RadMultiPage, however one solution is to use a javascript+css based tab navigation system that dynamically adjusts the height of the content container to match that of the height required/created by the content.
There's an informal list of a few here.
I seem to remember this one as being useful.
Go ahead and create a fresh Telerik site and copy the code below over the existing html to /html section.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
* {
margin: 0;
}
html, body
{
height: auto;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
background-color: #144e77;
color: #fff;
font-family: DejaVuSansBook, Sans-Serif;
}
#multipage
{
min-height: 100%;
height: auto !important;
background-color: Gray;
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div class="wrapper">
<div id="header_container">
<div id="header" style="width:100%; height:75px;">
<div id="logo" style="float:left"></div>
<div id="welcome" style="float:right; margin-right: 5px; margin-top:5px;">
</div>
</div>
</div>
<div id="tabs" style="width:100%; height:25px; border-bottom: 2px solid #144e77">
</div>
<div id="multipage" style="width: 100%">
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" ScrollBars="None"
SelectedIndex="0" Width="742px">
<!--RadPageViews are here-->
<telerik:RadPageView ID="RadPageView1" runat="server">
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server">
<asp:TextBox ID="TextBox1" runat="server" Height="461px"></asp:TextBox>
</telerik:RadPageView>
</telerik:RadMultiPage>
</div>
<div class="push">
</div>
</div>
<div class="footer">
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</div>
</form>
</body>
</html>
Then add this to the code behind:
protected void Button1_Click(object sender, EventArgs e)
{
RadMultiPage1.SelectedIndex = 1;
}
Run it and tell me if that works. As I recall I had to close a few tags that you left open in your code.
加载中,请稍侯......
精彩评论