This is a migrated thread and some comments may be shown as answers.

ReportViewer Height

1 Answer 122 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
WombatEd
Top achievements
Rank 1
WombatEd asked on 11 Jan 2011, 06:52 AM
I'm trying to get my ReportViewer to use all the available vertical space on my WebForm.  I've seen numerous posts that say I have to set the entire doc tree to "style='height: 100%'", but I've done that, and my ReportViewer is still scrolling vertically.

The issue may be complicated by the fact that my ReportViewer is on a content page and the <html>, etc., tags are in the master page.

Here's my ReportViewer page:
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/WlacSchedule.Master" CodeBehind="MyPlannerReport.aspx.vb" Inherits="WLAC.MyPlannerReport" %>
<%@ MasterType VirtualPath="~/WlacSchedule.Master" %>
<%@ Register TagPrefix="telerik" Assembly="Telerik.ReportViewer.WebForms" Namespace="Telerik.ReportViewer.WebForms" %>
<%@ Assembly Name="Telerik.ReportViewer.WebForms" %>
  
<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphMenu" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphMain" runat="server">
    <center id="center">
        <telerik:ReportViewer ID="ReportViewer1"
            Height="100%"
            runat="server" 
            ShowParametersButton="False"
            Width="100%"
            ZoomMode="PageWidth">
        </telerik:ReportViewer>
    </center>
</asp:Content>

And here's my Master Page: (The content area containing the ReportViewer is "cphMain", about twenty lines from the end of the page.)

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="WlacSchedule.master.vb" Inherits="WLAC.WlacSchedule" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head runat="server">
    <%--<title>West Los Angeles College</title>--%>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="robots" content="index, follow" />
    <meta name="author" content="West Los Angeles College" />
    <meta name="copyright" content="copyright, West Los Angeles College" />
    <meta name="usage" content="all rights reserved. Contact West Los Angeles College for reproduction permission." />
    <meta name="generator" content="hand-coded" />
    <meta name="homepage" content="www.wlac.edu" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <meta name="MSSmartTagsPreventParsing" content="TRUE" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
    <link rel="stylesheet" type="text/css" href="general/wlac-schedule.css" media="all" />
    <link rel="stylesheet" href="general/wlac-schedule-print.css" type="text/css" media="print" />
  
    <script type="text/JavaScript" language="Javascript" src="general/pagescript.js"></script>
  
    <script type="text/javascript" src="general/swfobject.js"></script>
  
    <script type="text/javascript" src="general/planner.js"></script>
  
    <!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="general/ie-6-fix.css" media="all" />
        </style>
    <![endif]-->
    <meta name="description" content="Schedule of Classes and Planner for West Los Angeles College: Through innovative programs and responsive Community services, West Los Angeles College empowers students to succeed." />
    <style type="text/css" media="all">
        /* styles for this page only */</style>
    <link href="general/p7EPM04.css" rel="stylesheet" type="text/css" media="all" />
  
    <script type="text/javascript" src="general/p7EPMscripts.js"></script>
  
    <link href="general/wlac_Ed.css" rel="stylesheet" type="text/css" />
    <link href="general/PlannerClasses.css" rel="stylesheet" type="text/css" />
    <title>West Los Angeles College</title>
    <asp:ContentPlaceHolder ID="cphHead" runat="server">
    </asp:ContentPlaceHolder>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body style="height: 100%">
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%-- Needed for JavaScript IntelliSense in VS2010 --%>
                <%-- For VS2008 replace RadScriptManager with ScriptManager --%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" RestoreOriginalRenderDelegate="false">
        </telerik:RadAjaxManager>
        <div id="wrapper">
            <div id="header">
                <div id="skip">
                    <a href="#content">Skip to Main Content</a>
                </div>
                <div id="header-right">
                    <a href="http://www.cccapply.org/applications/CCCApply/apply/West_Los_Angeles_College.html" title="Apply Online">
                        <img src="images/nav-applyonline.jpg" alt="Apply Online" width="197" height="31"
                            border="0" /></a>
                    <div class="headerlink">
                        View <a href="http://www.wlac.edu/scheduleofclass/schedulecalendar.html">WLAC ACADEMIC
                            CALENDAR</a>
                    </div>
                </div>
                <div id="header-left">
                    <a href="http://www.wlac.edu/">
                        <img src="images/nav-homelogo.jpg" alt="West LA College HOME" width="181" height="108"
                            border="0" /></a>
                </div>
                <h1>
                    West Los Angeles College Schedule of Classes and Planner</h1>
            </div>
            <!-- end header -->
            <div id="elevator">
                <asp:ContentPlaceHolder ID="cphMenu" runat="server">
                </asp:ContentPlaceHolder>
                <div id="pcs">
                    <div id="p7EPM_1" class="p7EPM04">
                        <div id="p7EPMt_1" class="p7epm_trigs">
                            <ul>
                                <li class="t1"><a href="#p7EPMc1_1" id="p7EPMtrg1_1"></a></li>
                                <li class="t2"><a href="#p7EPMc1_2" id="p7EPMtrg1_2"></a></li>
                            </ul>
                            <div class="p7epm_ie5clear">
                                 </div>
                        </div>
                        <div id="p7EPMdw_1">
                            <div id="p7EPMw1_1" class="p7epm_cwrapper">
                                <div id="p7EPMc1_1" class="p7epm_content pan1">
                                    <div id="pcs-top">
                                        <div id="pcs-top-col1">
                                            <img src="images/header-pcs.png" alt="Printed Classs Schedules and Policies" width="297"
                                                height="35" />
                                        </div>
                                        <div id="pcs-top-col2">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a diam enim, nec
                                            vulputate felis. Aliquam ligula arcu, tincidun.</div>
                                        <div id="pcs-top-col3">
                                            <img src="images/nav-closepanel.gif" alt="Close this panel" width="82" height="16"
                                                onclick="P7_EPMctl('p7EPMtrg1_1','close')" /></div>
                                    </div>
                                    <div id="pcs-col1">
                                        <ul id="col1-list">
                                            <li><a href="App_Data/test.pdf">
                                                <img src="images/pdf-fall2010.png" alt="Fall Classes 2010 [PDF]" width="286" height="33" /></a></li>
                                            <li><a href="App_Data/test.pdf">
                                                <img src="images/pdf-winter2011.png" alt="Winter Classes 2011 [PDF]" width="286"
                                                    height="33" /></a></li>
                                            <li><a href="App_Data/test.pdf">
                                                <img src="images/pdf-spring2011.png" alt="Spring Classes 2011 [PDF]" width="286"
                                                    height="33" /></a></li>
                                            <li><a href="App_Data/test.pdf">
                                                <img src="images/pdf-summer2011.png" alt="Summer Classes 2011 [PDF]" width="286"
                                                    height="33" /></a></li>
                                        </ul>
                                    </div>
                                    <!-- end col1 -->
                                    <div id="pcs-col2">
                                        <p>
                                            <a href="App_Data/test.pdf">
                                                <img src="images/pdf-howtoenroll.png" alt="How To Enroll [PDF]" width="198" height="34" /></a></p>
                                        <ul>
                                            <li>Dates to Know</li>
                                            <li>Who May Apply</li>
                                            <li>How To Enroll</li>
                                            <li>About Matriculation</li>
                                            <li>How To Add/Drop Classes</li>
                                            <li>Fees & Financial Aid</li>
                                            <li>List of Majors/Certificates</li>
                                            <li>Empezar el Proceso</li>
                                        </ul>
                                    </div>
                                    <!-- end col2 -->
                                    <div id="pcs-col3">
                                        <p>
                                            <a href="App_Data/test.pdf">
                                                <img src="images/pdf-thingstoknow.png" alt="Things To Know / Policies [PDF]" width="234"
                                                    height="34" /></a></p>
                                        <ul>
                                            <li>For High School Students</li>
                                            <li>Transfer Honors Program</li>
                                            <li>Transfer Requirements (UC, CSU, IGTCE)</li>
                                            <li>Graduation Requirements</li>
                                            <li>Graduation Petition Process</li>
                                            <li>Services for Students</li>
                                            <li>Policies: Student Code of Contact, Academic Policies, Financial Policies, Non-Discrimination,
                                                Legal Protections, Crime Stats, Other</li>
                                            <li>Off-Campus Locations</li>
                                            <li>Admissions Check List</li>
                                            <li>Paper Application</li>
                                        </ul>
                                        <p>
                                             </p>
                                    </div>
                                    <!-- end col3 -->
                                </div>
                            </div>
                        </div>
                        <!-- end pcs -->
                        <div id="p7EPMw1_2" class="p7epm_cwrapper">
                            <div id="p7EPMc1_2" class="p7epm_content pan2">
                                <div id="help_content">
                                    <!-- Flash content:
                                        1)  It sits inside the Div IDed "help_content".
                                        2)  A reference to the swfobject.js script can go here, or in the <head>.  I put it in the <head>.
                                        3)  Please upload the Flash file too! It's called helppanel.swf and it goes right next to all of your pages. 
                                        4)  The way it works: helppanelcontent div is set to be display:none. 
                                            EXCEPT if you're a spiderbot or have no Flash or an older version, or if you have JavaScript turned off.
                                            Then it displays instead of the Flash file.  -->
                                        <div id="helppanelcontent">
                                            <img src="images/helpflash.jpg" alt="Help Panel" width="990" height="250" />
                                        </div>
                                        <script type="text/javascript">
                                            var so = new SWFObject("helppanel.swf", "movie", "990", "250", "8", "#FFFFFF");
                                            so.addParam("menu", "false");
                                            so.write("helppanelcontent"); 
                                        </script>
                                    <!-- End of Flash content -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--[if IE 5]><style>.p7epm_trigs {width: 100%;} .p7epm_ie5clear {clear: both;} .p7epm_content, .p7epm_content li a {height: 1%;}</style><![endif]-->
                    <!--[if IE 6]><style>.p7epm_trigs, .p7epm_content div {zoom: 1;} .p7epm_trigs a {height: auto !important;}</style><![endif]-->
  
                    <script type="text/javascript">
<!--
                        P7_opEPM('p7EPM_1', 0, 1, 1, 0, 0, 1000, 0, 0, 250, 1, 1, 0);
//-->
                    </script>
  
                </div>
            </div>
            <div id="content" style="height: 100%">
                <div id="content-wrap" style="height: 100%">
                    <asp:ContentPlaceHolder ID="cphMain" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
                <!-- end content wrap -->
            </div>
            <!-- end content -->
            <div id="footer">
                West Los Angeles College - 9000 Overland Avenue - Culver City, CA 90230 - 310-287-4200
                - <a href="http://www.lacolleges.net/" target="_blank">LAColleges.net</a> - <a href="http://www.laccdbuildsgreen.org/" target="_blank">
                LACCDBuildsGreen.org</a>
            </div>
            <!-- end footer -->
        </div>
        <!-- end wrapper -->
    </div>
    </form>
</body>
</html>

Any help would be appreciated.

1 Answer, 1 is accepted

Sort by
0
Massimiliano Bassili
Top achievements
Rank 1
answered on 11 Jan 2011, 08:48 AM
You can use Firebug or IE Developer Tools to check the generated html and find the missing height to a DOM element.

Cheers!
Tags
General Discussions
Asked by
WombatEd
Top achievements
Rank 1
Answers by
Massimiliano Bassili
Top achievements
Rank 1
Share this question
or