stretching background color to fill whole of RadPanelBarItem

[Kevin]

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>

[Nikolay Tsenkov]

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.