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

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

9 Answers 735 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jeremy Libertor
Top achievements
Rank 1
Jeremy Libertor asked on 10 Dec 2010, 02:42 AM
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>

9 Answers, 1 is accepted

Sort by
0
Accepted
Cori
Top achievements
Rank 2
answered on 10 Dec 2010, 02:26 PM
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.
0
Daniel Aquere
Top achievements
Rank 2
answered on 19 Apr 2011, 02:20 PM
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
0
Helen
Telerik team
answered on 19 Apr 2011, 02:48 PM
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.

0
Daniel Aquere
Top achievements
Rank 2
answered on 19 Apr 2011, 03:40 PM
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
0
Helen
Telerik team
answered on 20 Apr 2011, 10:36 AM
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.

0
Jeff
Top achievements
Rank 1
answered on 17 Sep 2014, 10:34 PM
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.
0
Ivan Zhekov
Telerik team
answered on 22 Sep 2014, 10:12 AM
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.

 
0
Jeff
Top achievements
Rank 1
answered on 22 Sep 2014, 09:45 PM

[quote]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.[/quote]
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

0
Ivan Zhekov
Telerik team
answered on 24 Sep 2014, 05:23 PM
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.

 
Tags
TabStrip
Asked by
Jeremy Libertor
Top achievements
Rank 1
Answers by
Cori
Top achievements
Rank 2
Daniel Aquere
Top achievements
Rank 2
Helen
Telerik team
Jeff
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Share this question
or