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
>
9 Answers, 1 is accepted
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.
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
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.
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
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.
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.
[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
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.