Height not sat on postback

2 posts, 0 answers
  1. Kim
    Kim avatar
    10 posts
    Member since:
    Oct 2013

    Posted 06 Nov 2013 Link to this post

    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>+45 22 33 44 55</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>

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 11 Nov 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top