DotNetNuke Splitter Height 100%

3 posts, 0 answers
  1. luc bonenfant
    luc bonenfant avatar
    53 posts
    Member since:
    Sep 2007

    Posted 18 Nov 2009 Link to this post

    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. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 19 Nov 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. luc bonenfant
    luc bonenfant avatar
    53 posts
    Member since:
    Sep 2007

    Posted 19 Nov 2009 Link to this post

    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 !!!
Back to Top