stretching background color to fill whole of RadPanelBarItem

2 posts, 0 answers
  1. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 18 May 2010 Link to this post

    Guys,

    see attached image to see exactly whats going on, but the problem is i have a grey background in my radpanelbar item.

    The code for my RadPanel bar is as follows.. any suggestions would be appreciated.

                                <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Outlook" Width="100%" 
                                    Height="100%" ExpandMode="FullExpandedItem" CssClass="TaskViewerText PanelBarTitleText" 
                                    BackColor="#EFEBDE"> 
                                    <Items> 
                                        <telerik:RadPanelItem Text="Summary" Font-Bold="true" Height="32px" Expanded="true" 
                                            runat="server"> 
                                            <Items> 
                                                <telerik:RadPanelItem id="uiSummaryPanel" runat="server" BackColor="#EFEBDE"> 
                                                    <ItemTemplate> 
                                                        <asp:Panel ID="Panel1" runat="server" BackColor="#EFEBDE"> 
                                                            <div style="margin-left: 3px; margin-right: 3px; width: 400px; height: 100%; background-color: #EFEBDE;"> 
                                                                <table class="TaskViewerText" style="height: 115px; margin-bottom:15px;"> 
                                                                    <tr> 
                                                                        <td style="width: 130px;"> 
                                                                            Document Number : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:Label ID="uiDocumentNumberLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Document Title : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:Label ID="uiDocumentTitleLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Owner : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:HyperLink ID="uiDocOwnerLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Admin Owner : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:HyperLink ID="uiDocAdminOwnerLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td> 
                                                                            Due Date : 
                                                                        </td> 
                                                                        <td> 
                                                                            <asp:Label ID="uiDueDateLabelText" Text="[insert text here]" runat="server" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                </table> 
                                                                <div style="margin-left: 10px; margin-bottom: 5px;"> 
                                                                    Administrator Comments : 
                                                                    <asp:TextBox ID="uiAdministratorComments" ReadOnly="true" TextMode="multiline" Height="125" 
                                                                        Width="350" runat="server" /> 
                                                                </div> 
                                                                <div style="margin-left: 10px; margin-bottom: 5px;"> 
                                                                    Document History Notes : 
                                                                    <asp:TextBox ID="uiAuditTrailNotes" ReadOnly="true" TextMode="multiline" Height="125" 
                                                                        Width="350" runat="server" /> 
                                                                </div> 
                                                                <div style="margin-left: 10px; margin-bottom: 5px;"> 
                                                                    <asp:Label ID="uiApproverText" Text="[insert text here]" runat="server" /> 
                                                                    <div style="overflow-x: auto; overflow-y: scroll; height: 125px; width: 350px; 
                                                                        border: solid 1px #7F9DB9; background-color: White;"> 
                                                                        <asp:PlaceHolder ID="uiSummaryHeader" runat="server" /> 
                                                                    </div> 
                                                                </div> 
                                                            </div> 
                                                        </asp:Panel> 
                                                    </ItemTemplate> 
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                        </telerik:RadPanelItem> 
                                        <telerik:RadPanelItem Text="Comment History" Height="32px" Font-Bold="true" runat="server"> 
                                            <Items> 
                                                <telerik:RadPanelItem id="uiChatPanel" runat="server" Height="100%" BackColor="#EFEBDE"> 
                                                    <ItemTemplate> 
                                                        <telerik:RadSplitter ID="ChatSplitter" runat="server" Height="98%" Width="398" Orientation="Horizontal" 
                                                            ResizeWithParentPane="false" PanesBorderSize="0" BorderSize="0" OnClientLoaded="scrollPositionBottom" 
                                                            OnClientResized="scrollPositionBottom"> 
                                                            <telerik:RadPane ID="uiChatPaneRadPane" runat="server" Scrolling="Y" BackColor="#EFEBDE"> 
                                                                <asp:PlaceHolder ID="uiChatConsole" runat="server" /> 
                                                            </telerik:RadPane> 
                                                            <telerik:RadSplitBar ID="uiTaskViewerSplitBar1" runat="server" CollapseMode="None" 
                                                                EnableResize="false" /> 
                                                            <telerik:RadPane Height="200" MinHeight="200" MaxHeight="200" ID="TopPane" runat="server" 
                                                                Scrolling="none" BackColor="#EFEBDE"> 
                                                                <div class="TaskViewerText" style="background-color: #EFEBDE;"> 
                                                                    <div style="text-align: left; margin-top: 5px; margin-left: 10px;"> 
                                                                        Comment : 
                                                                    </div> 
                                                                    <div style="text-align: left; margin-top: 3px; margin-left: 10px;"> 
                                                                        <asp:TextBox ID="uiChatComment" runat="server" TextMode="multiline" Style="height: 120px; 
                                                                            width: 375px;">  
                                                                        </asp:TextBox> 
                                                                    </div> 
                                                                    <div style="text-align: right; margin-top: 10px; margin-right: 10px;"> 
                                                                        <asp:Button Text="Submit" OnClick="sendMessage_Click" runat="server" Enabled="false" 
                                                                            ID="sendMessage" Style="width: 100px;"></asp:Button> 
                                                                    </div> 
                                                                </div> 
                                                            </telerik:RadPane> 
                                                        </telerik:RadSplitter> 
                                                    </ItemTemplate> 
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                        </telerik:RadPanelItem> 
                                        <telerik:RadPanelItem Text="Voting Summary" Height="32px" Font-Bold="true" runat="server"> 
                                            <Items> 
                                                <telerik:RadPanelItem id="uiVotingPanel" runat="server"> 
                                                    <ItemTemplate> 
                                                        <telerik:RadSplitter ID="VotingSplitter" runat="server" Height="100%" Width="398" 
                                                            Orientation="Horizontal" ResizeWithParentPane="false" PanesBorderSize="0" BorderSize="0" 
                                                            OnClientLoaded="SetSplitterHeight" OnClientResized="SetSplitterHeight"> 
                                                            <telerik:RadPane ID="uiVotingSummaryPanelUsers" runat="server" Scrolling="Y"> 
                                                                <asp:PlaceHolder ID="uiVotingSummary" runat="server" /> 
                                                            </telerik:RadPane> 
                                                            <telerik:RadSplitBar ID="uiTaskViewerSplitBar2" runat="server" CollapseMode="None" 
                                                                EnableResize="false" /> 
                                                            <telerik:RadPane Height="200" MinHeight="200" MaxHeight="200" ID="TopPane" runat="server" 
                                                                Scrolling="none"> 
                                                                <div class="TaskViewerText" style="height:200px; background-color: #EFEBDE;"> 
                                                                    <div style="text-align: left; margin-top: 1px; margin-left: 10px;"> 
                                                                        Vote : 
                                                                    </div> 
                                                                    <div style="text-align: left; margin-top: 1px; margin-left: 10px;"> 
                                                                        <asp:TextBox ID="uiComment" runat="server" TextMode="multiline" Style="height: 120px; 
                                                                            width: 375px;">  
                                                                        </asp:TextBox> 
                                                                    </div> 
                                                                    <table style="width: 100%"> 
                                                                        <tr style="width: 100%"> 
                                                                            <td style="width: 50%"> 
                                                                            </td> 
                                                                            <td style="width: 50%"> 
                                                                                <div style="text-align: right; margin-top: 10px; margin-bottom: 20px; margin-right: 10px;"> 
                                                                                    <asp:Button Text="Pass" OnClick="sendVotePass_Click" runat="server" ID="uiPassRadioButton" 
                                                                                        Style="width: 75px;"></asp:Button> 
                                                                                    <asp:Button Text="Fail" OnClick="sendVoteFail_Click" runat="server" ID="uiFailRadioButton" 
                                                                                        Style="width: 75px;" Enabled="false"></asp:Button> 
                                                                                </div> 
                                                                            </td> 
                                                                        </tr> 
                                                                    </table> 
                                                                </div> 
                                                            </telerik:RadPane> 
                                                        </telerik:RadSplitter> 
                                                    </ItemTemplate> 
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelBar> 

  3. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 19 May 2010 Link to this post

    Hello kevin,

    You can fix this problem by adding a css-class to the RadPanelItem's.
    Here is a snippet of how the first item should look like:
    <telerik:RadPanelItem Text="Summary" Font-Bold="true" Height="32px" Expanded="true" runat="server" ChildGroupCssClass="applyBackground" BackColor="#EFEBDE">

    After that you simply add a style to the page:
    .applyBackground
    {
        background-color:#EFEBDE !important;
    }
    This should do.

    Hope this solves your problem!


    Regards,
    Nikolay Tsenkov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top