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

DotNetNuke Splitter Height 100%

2 Answers 60 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
luc bonenfant
Top achievements
Rank 1
luc bonenfant asked on 19 Nov 2009, 01:22 AM
Hello,

I'm embarassed because with DotNetNuke, splitter height is 400px when we mention 100% (set correct size if height in pixel).
I tried many things to adapt splitter height to the content but it doesn't work.
I don't know if all parents of splitter are in percents, because it depends of dnn core. My skin height is 100%.

Could you try the splitter in a dnn solution (5.1.2 for me) and confirm splitter height always gets 400px ? If yes, do you know why ? I'm ready to adapt dnn core if needed to render my page better because i finalized my module but I conserve this problem.

Thank you very much.

2 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 19 Nov 2009, 09:15 AM
Hi luc bonenfant,
If a web page element has its height defined in percent, its parent element must have a height style as well. The rule applies recursively.

You can read about this rule on the W3 site (http://www.w3.org/TR/CSS21/visudet.html#the-height-property):

quote:
"<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. "

You can refer to this online article (http://demos.telerik.com/aspnet-ajax/Splitter/Examples/ResizeWithWindow/DefaultCS.aspx) for information as well.

I would recommend that you use IE Developer toolbar for IE or Firebug for FF to check the height of the parent elements of the RadSplitter. In case it would be easier for you, you can replace the RadSplitter with a simple DIV element with style=height:100% - as soon as you are able to get the DIV to display as high as you expect it to, you can replace it with the RadSplitter and the splitter will render as expected.

Regards,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
luc bonenfant
Top achievements
Rank 1
answered on 19 Nov 2009, 04:44 PM
Thank you for reply, I followed your explanation and after two full days of investigations, I found. So, I hope solution will help other DNN users :

DNN loads modules dynamically. Each module is inside a div tag with CssClass attribute. This css, as other parent elements of splitter, need incorporate 'height:100%;'.
To add the module height from the module, we must know its name ; the dnn core named it : DesktopModule Name + "Content".
(See \Library\UI\Modules\ModuleHost.vb, function OnPreRender)

So, I add this style to my module page :
<style type="text/css">  
.GEDManagerContent  
{  
    height:100%;  
}      
</style> 
 

and my splitter has now a 100% height !!!
Tags
Splitter
Asked by
luc bonenfant
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
luc bonenfant
Top achievements
Rank 1
Share this question
or