Cannot set RadMultiPage to Height="100%", only Fixed height

10 posts, 1 answers
  1. Jeremy Libertor
    Jeremy Libertor avatar
    2 posts
    Member since:
    Nov 2009

    Posted 09 Dec 2010 Link to this post

    I am using Telerik Q3 2010 release.

    I have several tabs, all are using ContentURL.  I wish to set the hight of the RadMultiPage to 100%, bit it renders about 300px tall.  If I set the RadMultiPage to a fixed height (i.e. Height="1000px"), then this does take.

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        

       <div style="padding: 1em">

       <table width="100%"><tr><td align="left">


           <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
               MultiPageID="RadMultiPage1" SelectedIndex="0">
               <Tabs>
                   <telerik:RadTab Text="Films"></telerik:RadTab>             
                   <telerik:RadTab Text="Pending Approvals" Selected="True"></telerik:RadTab>
               </Tabs>
           </telerik:RadTabStrip>


            <telerik:RadMultiPage 
            ID="RadMultiPage1" 
            runat="server" 
            Height="100%" 
            SelectedIndex="0" 
            Width="100%" 
            BorderColor="Gray" 
            BorderStyle="Solid" 
            BorderWidth="1px" >

               <telerik:RadPageView ID="RadPageView1" runat="server" ContentURL="TABFilms.aspx">
                </telerik:RadPageView>
                  
               <telerik:RadPageView id="PendingApprovals" runat="server" ContentURL="TABApprovals.aspx">              
               </telerik:RadPageView>

           </telerik:RadMultiPage>

    </td></tr></table>



        </div>


    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        

       <div style="padding: 1em">

       <table width="100%"><tr><td align="left">


           <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
               MultiPageID="RadMultiPage1" SelectedIndex="0">
               <Tabs>
                   <telerik:RadTab Text="Films"></telerik:RadTab>             
                   <telerik:RadTab Text="Pending Approvals" Selected="True"></telerik:RadTab>
               </Tabs>
           </telerik:RadTabStrip>


            <telerik:RadMultiPage 
            ID="RadMultiPage1" 
            runat="server" 
            Height="100%" 
            SelectedIndex="0" 
            Width="100%" 
            BorderColor="Gray" 
            BorderStyle="Solid" 
            BorderWidth="1px" >

               <telerik:RadPageView ID="RadPageView1" runat="server" ContentURL="TABFilms.aspx">
                </telerik:RadPageView>
                  
               <telerik:RadPageView id="PendingApprovals" runat="server" ContentURL="TABApprovals.aspx">              
               </telerik:RadPageView>

           </telerik:RadMultiPage>

    </td></tr></table>



        </div>


    </asp:Content>


    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        

       <div style="padding: 1em">

       <table width="100%"><tr><td align="left">


           <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
               MultiPageID="RadMultiPage1" SelectedIndex="0">
               <Tabs>
                   <telerik:RadTab Text="Films"></telerik:RadTab>             
                   <telerik:RadTab Text="Pending Approvals" Selected="True"></telerik:RadTab>
               </Tabs>
           </telerik:RadTabStrip>


            <telerik:RadMultiPage 
            ID="RadMultiPage1" 
            runat="server" 
            Height="100%" 
            SelectedIndex="0" 
            Width="100%" 
            BorderColor="Gray" 
            BorderStyle="Solid" 
            BorderWidth="1px" >

               <telerik:RadPageView ID="RadPageView1" runat="server" ContentURL="TABFilms.aspx">
                </telerik:RadPageView>
                  
               <telerik:RadPageView id="PendingApprovals" runat="server" ContentURL="TABApprovals.aspx">              
               </telerik:RadPageView>

           </telerik:RadMultiPage>

    </td></tr></table>



        </div>


    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
         
     
       <div style="padding: 1em">
     
       <table width="100%"><tr><td align="left">
     
     
           <telerik:RadTabStrip ID="RadTabStrip1" runat="server"
               MultiPageID="RadMultiPage1" SelectedIndex="0">
               <Tabs>
                   <telerik:RadTab Text="Films"></telerik:RadTab>            
                   <telerik:RadTab Text="Pending Approvals" Selected="True"></telerik:RadTab>
               </Tabs>
           </telerik:RadTabStrip>
     
     
            <telerik:RadMultiPage
            ID="RadMultiPage1"
            runat="server"
            Height="100%"
            SelectedIndex="0"
            Width="100%"
            BorderColor="Gray"
            BorderStyle="Solid"
            BorderWidth="1px" >
     
               <telerik:RadPageView ID="RadPageView1" runat="server" ContentURL="TABFilms.aspx">
                </telerik:RadPageView>
                   
               <telerik:RadPageView id="PendingApprovals" runat="server" ContentURL="TABApprovals.aspx">             
               </telerik:RadPageView>
     
           </telerik:RadMultiPage>
     
    </td></tr></table>
     
     
     
        </div>
     
     
    </asp:Content>


    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        

       <div style="padding: 1em">

       <table width="100%"><tr><td align="left">


           <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
               MultiPageID="RadMultiPage1" SelectedIndex="0">
               <Tabs>
                   <telerik:RadTab Text="Films"></telerik:RadTab>             
                   <telerik:RadTab Text="Pending Approvals" Selected="True"></telerik:RadTab>
               </Tabs>
           </telerik:RadTabStrip>


            <telerik:RadMultiPage 
            ID="RadMultiPage1" 
            runat="server" 
            Height="100%" 
            SelectedIndex="0" 
            Width="100%" 
            BorderColor="Gray" 
            BorderStyle="Solid" 
            BorderWidth="1px" >

               <telerik:RadPageView ID="RadPageView1" runat="server" ContentURL="TABFilms.aspx">
                </telerik:RadPageView>
                  
               <telerik:RadPageView id="PendingApprovals" runat="server" ContentURL="TABApprovals.aspx">              
               </telerik:RadPageView>

           </telerik:RadMultiPage>

    </td></tr></table>



        </div>


    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        

       <div style="padding: 1em">

       <table width="100%"><tr><td align="left">


           <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
               MultiPageID="RadMultiPage1" SelectedIndex="0">
               <Tabs>
                   <telerik:RadTab Text="Films"></telerik:RadTab>             
                   <telerik:RadTab Text="Pending Approvals" Selected="True"></telerik:RadTab>
               </Tabs>
           </telerik:RadTabStrip>


            <telerik:RadMultiPage 
            ID="RadMultiPage1" 
            runat="server" 
            Height="100%" 
            SelectedIndex="0" 
            Width="100%" 
            BorderColor="Gray" 
            BorderStyle="Solid" 
            BorderWidth="1px" >

               <telerik:RadPageView ID="RadPageView1" runat="server" ContentURL="TABFilms.aspx">
                </telerik:RadPageView>
                  
               <telerik:RadPageView id="PendingApprovals" runat="server" ContentURL="TABApprovals.aspx">              
               </telerik:RadPageView>

           </telerik:RadMultiPage>

    </td></tr></table>



        </div>


    </asp:Content>


    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        

       <div style="padding: 1em">

       <table width="100%"><tr><td align="left">


           <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
               MultiPageID="RadMultiPage1" SelectedIndex="0">
               <Tabs>
                   <telerik:RadTab Text="Films"></telerik:RadTab>             
                   <telerik:RadTab Text="Pending Approvals" Selected="True"></telerik:RadTab>
               </Tabs>
           </telerik:RadTabStrip>


            <telerik:RadMultiPage 
            ID="RadMultiPage1" 
            runat="server" 
            Height="100%" 
            SelectedIndex="0" 
            Width="100%" 
            BorderColor="Gray" 
            BorderStyle="Solid" 
            BorderWidth="1px" >

               <telerik:RadPageView ID="RadPageView1" runat="server" ContentURL="TABFilms.aspx">
                </telerik:RadPageView>
                  
               <telerik:RadPageView id="PendingApprovals" runat="server" ContentURL="TABApprovals.aspx">              
               </telerik:RadPageView>

           </telerik:RadMultiPage>

    </td></tr></table>



        </div>


    </asp:Content>


    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        

       <div style="padding: 1em">

       <table width="100%"><tr><td align="left">


           <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
               MultiPageID="RadMultiPage1" SelectedIndex="0">
               <Tabs>
                   <telerik:RadTab Text="Films"></telerik:RadTab>             
                   <telerik:RadTab Text="Pending Approvals" Selected="True"></telerik:RadTab>
               </Tabs>
           </telerik:RadTabStrip>


            <telerik:RadMultiPage 
            ID="RadMultiPage1" 
            runat="server" 
            Height="100%" 
            SelectedIndex="0" 
            Width="100%" 
            BorderColor="Gray" 
            BorderStyle="Solid" 
            BorderWidth="1px" >

               <telerik:RadPageView ID="RadPageView1" runat="server" ContentURL="TABFilms.aspx">
                </telerik:RadPageView>
                  
               <telerik:RadPageView id="PendingApprovals" runat="server" ContentURL="TABApprovals.aspx">              
               </telerik:RadPageView>

           </telerik:RadMultiPage>

    </td></tr></table>



        </div>


    </asp:Content>


    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        

       <div style="padding: 1em">

       <table width="100%"><tr><td align="left">


           <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
               MultiPageID="RadMultiPage1" SelectedIndex="0">
               <Tabs>
                   <telerik:RadTab Text="Films"></telerik:RadTab>             
                   <telerik:RadTab Text="Pending Approvals" Selected="True"></telerik:RadTab>
               </Tabs>
           </telerik:RadTabStrip>


            <telerik:RadMultiPage 
            ID="RadMultiPage1" 
            runat="server" 
            Height="100%" 
            SelectedIndex="0" 
            Width="100%" 
            BorderColor="Gray" 
            BorderStyle="Solid" 
            BorderWidth="1px" >

               <telerik:RadPageView ID="RadPageView1" runat="server" ContentURL="TABFilms.aspx">
                </telerik:RadPageView>
                  
               <telerik:RadPageView id="PendingApprovals" runat="server" ContentURL="TABApprovals.aspx">              
               </telerik:RadPageView>

           </telerik:RadMultiPage>

    </td></tr></table>



        </div>


    </asp:Content>

  2. Answer
    Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 10 Dec 2010 Link to this post

    Hello Jeremy,

    You can only set the Height to 100% if the element it's contained in has a fixed height. So if you set a height for the TD element, it should take on it's height.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel Aquere
    Daniel Aquere avatar
    85 posts
    Member since:
    Mar 2011

    Posted 19 Apr 2011 Link to this post

    Hi Everyone,

    I have the same problem... My MultiPage don´t appears using all screen height.

    Please, Jeremy, how do you solve this issue?

    Thanks, best

    Daniel
  5. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 19 Apr 2011 Link to this post

    Hi all,

    You may try the following workaround:

    <head id="Head1" runat="server">
        <title></title>
     </head>
    <body>
    <form id="form1" runat="server">
    <asp:scriptmanager id="ScriptManager1" runat="server">
    </asp:scriptmanager>
      
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="MultiPage1">
        <Tabs>
            <telerik:RadTab Text="Telerik" Selected="true" PageViewID="RadPageView1">
            </telerik:RadTab>
            <telerik:RadTab Text="Microsoft" PageViewID="RadPageView2">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="MultiPage1" runat="server">
        <telerik:RadPageView ID="RadPageView1" runat="server" Selected="true" ContentUrl="http://www.telerik.com" Height="100%">
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView2" runat="server" ContentUrl="http://www.Microsoft.com" Height="100%">
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    <script type="text/javascript">
          
        function pageLoad() {
          
            var $ = $telerik.$;
            var height = $(window).height();
             
            var multiPage = $find("<%=MultiPage1.ClientID %>");
            var totalHeight = height - 42;
            multiPage.get_element().style.height = totalHeight + "px";
         
        }
    </script>
    </form>
    </body>


    Regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Daniel Aquere
    Daniel Aquere avatar
    85 posts
    Member since:
    Mar 2011

    Posted 19 Apr 2011 Link to this post

    Hi Helen,

    Bingo!!! You Solved my problem and thanks for quickly response.
    I don´t resist... I need to do a new question, Can I?

    It´s about TabStrip and MultiPage: I use ContentUrl to load other pages.
    Please, how can I show a window to informs "Loading Information, please, wait..." if possible with an image like a animated gif.

    Thanks again.

    Best,

    Daniel
  7. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 20 Apr 2011 Link to this post

    Hello Daniel,

    Please review the following code library how to achieve this:

    http://www.telerik.com/community/code-library/aspnet-ajax/tabstrip/display-a-loading-animation-while-an-external-page-is-loading-in-a-radpageview.aspx

    Hope it helps.

    Regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Jeff
    Jeff avatar
    14 posts
    Member since:
    Aug 2013

    Posted 17 Sep 2014 Link to this post

    I'm three years late, but thank you, Helen.  I'm using the 2014 Q2 release and that snippet of JavaScript is what I needed.  We're now well into the latter half of 2014 and all these controls should natively support responsive layout without resorting to pageLoad() hacks, but this does work.  Hopefully, an upcoming release of the UI for ASP.NET AJAX controls will support proper responsive (%-based) layout.
  9. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 22 Sep 2014 Link to this post

    Hello, Jeff.

    Setting something to 100% height is tricky: 100% of what? Would be the parent container? Would it be the available space? Would the rest of the screen?

    That's why even 3 years later we haven't made the controls autosize.

    On a related note, should you need containers to be always 100% of the browser window, you can use vw (from viewport width) and vh (from viewport height). Of course those units do not work with older browsers...

    Regards,
    Ivan Zhekov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Jeff
    Jeff avatar
    14 posts
    Member since:
    Aug 2013

    Posted 22 Sep 2014 in reply to Ivan Zhekov Link to this post

    Ivan Zhekov said:
    Setting something to 100% height is tricky: 100% of what? Would be the parent container? Would it be the available space? Would the rest of the screen?

    That's why even 3 years later we haven't made the controls autosize.

    Hi Ivan,

    You folks are the component developers.  You could certainly add a property to make that determination about how to consume a Height of "100%":

    • Parent container
    • Available space
    • The rest of the screen

    To say that "it's tricky" doesn't wash.  Of course it's tricky, and every web developer has to figure out a way around it.  We all have to at some point, and we all do it in the end.  It's not unreasonable to expect a bit of assistance from a component library.

    If Telerik's web controls are going to tout how responsive and mobile-ready they are, they have to overcome and encapsulate these "tricky" things.

    Regards,
    ~Jeff

  11. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 24 Sep 2014 Link to this post

    Jeff, I respectfully disagree.

    By default 100% height (and width for that matter) means 100% of the parent height. We have to also factor in any borders / padding / margin depending on the box model of the respective elements.

    It might happen that a given parent is not set to be 100% of its respective parent and so on and so forth, so even if we make our controls stretch / fit their parent, they still won't be as stretchy as needed due to the way CSS works.

    One other similar case is when you have height 100% and margin top.

    Then come some really interesting cases ( the part I am referring to as "tricky") -- for the sake of argument, let's assume we get the dimensions right on page load. Say we extend a given multipage to fit, say to all available space. Then at some point in time we change the parent -- be it a new element is added, or something else changes with effectively changes the available space. How do our controls get notified about that? Clearly we can't monitor everything that's happening... We do have client side repaint method that takes cares of some cases, but not all...

    ---

    Let's for a moment forget what's not possible, what's hard, what's tricky and so on. Let's start with a clean slate and look things from another perspective.

    What if we didn't say this element should be that much percent of its parent, but instead we had the parent enforce dimensions to its children? Wouldn't that make more sense?

    One other reason why this is a better idea is because component vendors do not control (can not modify the styles of) elements they don't own (outside of their respective components). But when something is placed inside a vendors component, well... different rules apply.

    What I am trying to say is, that if you had a "thin" layout component that let you align / distribute its children in a way you like, would that suffice? In traditional desktop / application development it would be called Hbox, HorizontalLaout, Flexbox, grid etc... In css terms it's either flexbox or grid, depending on the exact requirements.

    Currently we do not offer such component, true, but it doesn't mean we can't make one.

    And lastly, but not least, if you share more details to your project, perhaps we could offer you and ad-hoc solution. Or if you are willing to, we could include you in the trials for this new control, should we make one. (And clearly we should make one)

    Regards,
    Ivan Zhekov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017