Height not sat on postback

[Kim]

Hey.

I have this problem, when i press a button that makes a postback, the height is not being sat properly.

.rpRootGroup {
            padding: 0px 0px 0px 0px !important;
            /* background-color: #808080 !important; */
            background: url(../images/ListeTopBg.gif) !important;
            border: none 0px #ffffff !important;
        }


        .rpRootGroup {
            background-image: url(Images/ulbg.jpg);
            padding: 0px 0px 0px 0px !important;
            border: none 0px #ffffff !important;
        }

        .rpText, .rpLink, .rpOut {
            color: #000000 !important;
            list-style: none;
            height: 30px !important;
            border: none 0px #ffffff !important;
            background: none !important;
            padding: 0px 0px 2px 2px !important;
            margin: 0px 0px 0px 0px !important;
            line-height: 30px !important;
        }

        .rpHeader {
            padding: 2px 0px 0px 0px !important;
            background-color: #f3f4f5 !important;
            /* background: url(../images/ListeTopBg.gif) !important; */
            border: solid 1px #808080 !important;
            height: 30px !important;
        }

        .rpListItem {
            list-style: none;
            color: #000000;
            height: 30px !important;
            border: none 0px #ffffff !important;
            background: none !important;
            padding: 0px 0px 2px 2px !important;
            margin: 0px 0px 0px 0px !important;
            line-height: 30px !important;
        }

        .rpListItemClicked {
            list-style: none;
            color: #000000;
            height: 30px !important;
            border: none 0px #ffffff !important;
            background-color: #f0f5df !important;
            padding: 0px 0px 2px 2px !important;
            margin: 0px 0px 0px 0px !important;
            line-height: 30px !important;
        }

        .rpListItem:hover {
            background-color: #f0f5df !important;
        }

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="870px" Height="70%" ExpandMode="FullExpandedItem" ExpandAnimation-Type="OutSine">
            <Items>
                <telerik:RadPanelItem Text="Afdelinger" Expanded="False" CssClass="rpHeader" Height="30px">
                    <Items>
                        <telerik:RadPanelItem Text="Opret ny..." Expanded="False" CssClass="rpListItem" SelectedCssClass="rpListItemClicked">
                            <ContentTemplate>
                                <div>
                                    <table style="width: 855px">
                                        <tr>
                                            <td>Afdelingsnavn:</td>
                                            <td>
                                                <asp:TextBox ID="txtDepartmentName" runat="server"></asp:TextBox></td>
                                        </tr>
                                        <tr>
                                            <td>Telefon nummer:</td>
                                            <td>
                                                <asp:TextBox ID="txtPhoneNumber" runat="server"></asp:TextBox></td>
                                        </tr>
                                        <tr>
                                            <td>Adresse:</td>
                                            <td>
                                                <asp:TextBox ID="txtAdress" runat="server"></asp:TextBox></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" style="text-align: right;">
                                                <asp:Button ID="Submit" Text="Gem" runat="server" /></td>
                                        </tr>
                                    </table>
                                </div>
                            </ContentTemplate>
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="HG" Expanded="False" CssClass="rpListItem" SelectedCssClass="rpListItemClicked">
                            <ContentTemplate>
                                <div>
                                    <table style="width: 855px">
                                        <tr>
                                            <td>Afdelingsnavn:</td>
                                            <td>HG</td>
                                        </tr>
                                        <tr>
                                            <td>Telefon nummer:</td>
                                            <td>[phone]</td>
                                        </tr>
                                        <tr>
                                            <td>Adresse:</td>
                                            <td>Silkeborgvej 140, 8700 Horsens</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" style="text-align: right;">
                                                <asp:Button ID="Edit" Text="Rediger" runat="server" /></td>
                                        </tr>
                                    </table>
                                </div>
                            </ContentTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Uddannelser" Expanded="False" CssClass="rpHeader" Height="30px">
                    <Items>
                        <telerik:RadPanelItem Text="Opret ny..." Expanded="True" CssClass="rpListItem" SelectedCssClass="rpListItemClicked">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Historie" Expanded="False" CssClass="rpHeader" Height="30px">
                    <Items>
                        <telerik:RadPanelItem Text="Opret ny..." Expanded="True" CssClass="rpListItem" SelectedCssClass="rpListItemClicked">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>

[Magdalena]

Hello Kim,

The issue you described comes from setting the property ExpandMode to FullExpandedItem without adding the property Height to the RadPanelBar. To resolve the issue, please set this property. You can find more information about the ExpandMode property in this article.

I have noticed you are using the !important in CSS code you have provided. The good practice is to avoid using it unless it is necessary (for example if you would like to overwrite an inline styles). Instead of it you can use some stronger selector. For example if the element .rpRootGroup has applied padding with the selector .RadPanelBar .rpRootGroup you can overwrite it with the html .RadPanelBar .rpRootGroup.

Do not hesitate to contact me if you have other questions.

Regards,
Magdalena
Telerik