Is Height:100% with filler possible?

[Pat]

Seems like right now the control will just size itself for whatever space it needs and it's just wrecking the page

I'm trying to get it to fillup the entire height of the area that it has. Basically I'd like to have it, act like outlook where

1) only one node is expanded and always at the top (but it's main icon still also stays displayed at the bottom)

2) If the active group doesn't need all that space, then the extra space is just there, blank.  If it needs more space, then there's just a scrollbar within the active group

#2 is the most important one right now.  Anyway to do this?

[Atanas Korchev]

Hi pat,

Unfortunately both features are not supported. The panelbar cannot work like outlook out of the box.

Rgards,
Atanas Korchev
the Telerik team

[Pat]

Are there any plans to at least add support for height:100% or even a fixed height with some filler?

When each group has different number of subitems, the constantly changing overall control height everytime a different group is picked is just really annoying. Demoed it, and they said no way...

[Atanas Korchev]

Hello pat,

I logged this as a feature request. We will consider it for a future release. I have also updated your Telerik points.

Regards,
Atanas Korchev
the Telerik team

[Pat]

Thanks, I appreciate it.

[bubus]

is possible that in this release that is about to leave to include this feature. Thank you.

[Tosin]

Based on my understanding of the initial question, the below script should work

<script type="text/javascript">

 

    $(document).ready(function () {
 $('.t-group').css({ overflow: "auto", height: ($(window).height() - 150) });
    });

</script>

Note: 150 will have to replaced by any number that will suite your purpose. In my case the Page Header was 150px in height. Mathematically, panel bar height = The height of the window - Page Header height.

you might also want to make sure that this height is retained after you collapse and expand. If it doesn't then you can try the following:

Assuming your mark up looks like this:

 

<input type="hidden" id="panelAdjuster" value="0" onchange="test();"/>

@{ Html.Telerik().PanelBar()

        .Name("RandomPanelBar")

        .HtmlAttributes(new { style = "width: 235px; float: left; margin-bottom: 0px; vertical-align:top;"})

        .ClientEvents( events => events

            .OnExpand("Sizer") )    ...

then the below script should fix it

<script type="text/javascript">

    $(document).ready(function () {

        $('.t-group').css({ overflow: "auto", height: ($(window).height() - 150) });      

        Sizer = function () {

            $('#panelAdjuster').trigger('onchange');

                  }

        test = function () {

            var id = setTimeout(function () {               

                $('.t-group').height(($(window).height() - 150))

                             .css({ overflow: "auto" });

            },

            1000);

           

        }

    });

   

</script>

[Suvendu]

Hi Tosin,

Do you have a sample which you can share ?

Thanks,
Suvendu.