ItemTemplate with Metro skin - rpTemplate width too wide

[Matt]

I'm using RadPanelBar inside of a RadTooltip.  My RadPanelBar contains four panel items, and each panel item utilizes an itemtemplate. I am setting my panel bar to have a specific width of 650px.  The problem is that the rpTemplate div is being rendered with a width of 670px instead of 650px, which is causing scrollbars to appear at times.  Why does that div have a width of 670px?  I see it has 10px of padding on each side, which would be OK if it wasn't making the width 20px wider.  My markup for the panel bar is below and a screenshot showing my issue is attached.

<div>
    <div class="ControlPanel" id="ControlPanel" style="width: 650px" runat="server">
        <div style="float: left">
            <div class="ControlPanelLabel">Configure report</div>
        </div>
        <div style="float: right; margin-right: 10px;">
            <asp:LinkButton id="ApplyParameters" runat="server" Text="Apply changes" CssClass="ControlPanelButton" OnClientClick="applyChanges(false); return false;" />
            <asp:LinkButton id="SaveParameters" runat="server" Text="Save as default" CssClass="ControlPanelButton" OnClientClick="applyChanges(true); return false;" />
            <div class="ControlPanelButton" onclick="closeCurrentToolTip()">Cancel</div>
        </div>
    </div>
    <telerik:RadPanelBar ID="ParametersPanelBar" runat="server" ExpandMode="FullExpandedItem" Width="650px" Height="480px" BorderColor="#cdcdcd">
        <Items>
            <telerik:RadPanelItem Text="Report Grouping" Expanded="true">
                <ContentTemplate>
                    <div class="PopupPanelItem">
                        <div class="PopupTextGroup" id="GroupingLabel" runat="server" visible="true">This report includes a variety of grouping options which alter the columns which are displayed. Choose a grouping mode from the list below:</div>
                        <div class="PopupTextGroup">
                            <telerik:RadComboBox ID="GroupingComboBox" runat="server" AutoPostBack="false" style="z-index: 10000" Width="610px" />
                        </div>
                        <div class="PopupTextGroup">Products can be displayed by specific name, or the more generic product category. It may be useful to display by product category when comparing multiple locations that do not utilize the same product IDs. Choose the appropriate display type below:</div>
                        <div class="PopupTextGroup">
                            <telerik:RadButton ID="ShowProductsByCategory" runat="server" AutoPostBack="false" ToggleType="CheckBox" ButtonType="ToggleButton" Text="Show products by category name instead of detailed name" Checked="false" />
                        </div>
                    </div>
                </ContentTemplate>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Location(s) Included" Expanded="false">
                <ContentTemplate>
                    <div id="LocationsPanel" runat="server" class="PopupPanelItem">
                        <div class="PopupTextGroup">This report can include one or more locations. Choose the location selection mode and other options below:</div>
                        <div class="PopupTextGroup">
                            <telerik:RadButton ID="SingleLocation" runat="server" AutoPostBack="false" ToggleType="Radio" ButtonType="ToggleButton" Text="Single location" Checked="true" GroupName="LocationsRadio" OnClientClicked="toggleLocationControlsVisiblity" />
                        </div>
                        <div class="PopupTextGroup">
                            <telerik:RadComboBox ID="LocationComboBox" runat="server" AutoPostBack="false" style="z-index: 10000" Width="610px" />
                        </div>
                        <div class="PopupTextGroup">
                            <telerik:RadButton ID="SingleOrganization" runat="server" AutoPostBack="false" ToggleType="Radio" ButtonType="ToggleButton" Text="Single organization" GroupName="LocationsRadio" OnClientClicked="toggleLocationControlsVisiblity" />
                        </div>
                        <div class="PopupTextGroup">
                            <telerik:RadComboBox ID="OrganizationComboBox" runat="server" AutoPostBack="false" style="z-index: 10000" Width="610px" />
                        </div>
                        <div class="PopupTextGroup">
                            <telerik:RadButton ID="CustomLocationList" runat="server" AutoPostBack="false" ToggleType="Radio" ButtonType="ToggleButton" Text="Custom list of locations" GroupName="LocationsRadio" OnClientClicked="toggleLocationControlsVisiblity" />
                        </div>
                        <div class="PopupTextGroup">
                            <telerik:RadGrid ID="LocationGrid" runat="server" Width="610px" Height="180px" Skin="Metro" AutoGenerateColumns="false" AllowMultiRowSelection="true">
                                <HeaderStyle CssClass="GridHeader" />
                                <SelectedItemStyle CssClass="GridHighlight" />
                                <ClientSettings>
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                                    <Selecting AllowRowSelect="True" UseClientSelectColumnOnly="true" />
                                </ClientSettings>
                                <MasterTableView DataKeyNames="tblLocationsID" >
                                    <Columns>
                                        <telerik:GridClientSelectColumn />
                                        <telerik:GridBoundColumn DataField="tblLocationsID" DataType="System.Int32" Display="false" />
                                        <telerik:GridBoundColumn DataField="OrganizationName" HeaderText="Organization" DataType="System.String" />
                                        <telerik:GridBoundColumn DataField="LocationName" HeaderText="Location" DataType="System.String" />
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>
                        </div>
                    </div>
                </ContentTemplate>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Date Range" Expanded="false">
                <ContentTemplate>
                    <div id="DatesPanel" runat="server" class="PopupPanelItem">
                        <div class="PopupTextGroup">Select the date range for the report using the options below:</div>
                        <div class="PopupTextGroup">
                            <telerik:RadButton ID="SingleMonth" runat="server" AutoPostBack="false" ToggleType="Radio" ButtonType="ToggleButton" Text="Single month" Checked="true" GroupName="DateRadio" OnClientClicked="toggleDateControlsVisiblity"/>
                        </div>
                        <div class="PopupTextGroup">
                            <telerik:RadComboBox ID="MonthComboBox" runat="server" AutoPostBack="false" style="z-index: 10000" Width="610px" />
                        </div>
                        <div class="PopupTextGroup">
                            <telerik:RadButton ID="SingleYear" runat="server" AutoPostBack="false" ToggleType="Radio" ButtonType="ToggleButton" Text="Single year" GroupName="DateRadio" OnClientClicked="toggleDateControlsVisiblity"/>
                        </div>
                        <div class="PopupTextGroup">
                            <telerik:RadComboBox ID="YearComboBox" runat="server" AutoPostBack="false" style="z-index: 10000" Width="610px" />
                        </div>
                        <div class="PopupTextGroup">
                            <telerik:RadButton ID="CustomDateRange" runat="server" AutoPostBack="false" ToggleType="Radio" ButtonType="ToggleButton" Text="Custom date range" GroupName="DateRadio" OnClientClicked="toggleDateControlsVisiblity"/>
                        </div>
                        <div id="CustomDateRangeControls" runat="server" class="PopupTextGroup" >
                            <div style="float: left">
                                <span style="width: 300px">Start date:</span>
                                <telerik:RadCalendar ID="CustomStartDate" runat="server" Width="300px" EnableMultiSelect="false" AutoPostBack="false" />
                            </div>
                            <div style="float: right">
                                <span style="width: 300px">End date:</span>
                                <telerik:RadCalendar ID="CustomEndDate" runat="server" Width="300px" EnableMultiSelect="false" AutoPostBack="false" />
                            </div>
                        </div>
                    </div>
                </ContentTemplate>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Deal Statuses" Expanded="false">
                <ContentTemplate>
                    <div id="DealStatusPanel" runat="server" class="PopupPanelItem">
                        <div class="PopupTextGroup">Select deal statuses to include in the report:</div>
                        <div class="PopupTextGroup">
                            <telerik:RadButton ID="IncludeClosedDeals" runat="server" AutoPostBack="false" ToggleType="CheckBox" ButtonType="ToggleButton" Text="Closed deals" Checked="false" />
                        </div>
                        <div class="PopupTextGroup">
                            <telerik:RadButton ID="IncludeFinalizedDeals" runat="server" AutoPostBack="false" ToggleType="CheckBox" ButtonType="ToggleButton" Text="Finalized deals" Checked="true"/>
                        </div>
                    </div>
                </ContentTemplate>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>
</div>

And here is my style sheet (sorry it's a little big):

/****************************************************************************************************************************************************/
/* Primary page elements
/****************************************************************************************************************************************************/
html, body, form
{
    margin: 0;
    padding: 0;
    height: 100%;
    background: #f0f0f0;
    color: #000;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    min-width: 740px;
}

html
{
    overflow: auto;
}

a
{
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.AjaxPanel
{
    position:absolute;
    z-index:20000;
    top:0;
    left:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background: #ffffff url(images/loading.gif) center center no-repeat;
}

.ErrorMessage
{
    color: #cc0000;
}

.FloatLeft
{
    float: left;
}

.FloatRight
{
    float: right;
}

.Validator
{
    line-height: 30px;
    color: #cc0000;
}

/****************************************************************************************************************************************************/
/* Containers
/****************************************************************************************************************************************************/
#headWrap
{
    width: 100%;
    height: 60px;
    margin: 0px;
    padding: 0px;
    float: left;
    background: #0C638E repeat-x center center;
    color: #fff;
    font-size: 30px;
    line-height: 60px;
}
#headPanel
{
    width: 740px;
    height: 100%;
    margin: 0 auto;
    padding: 0px;
}
#contentWrap
{
    font-size: 16px;
    line-height: 30px;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    float: left;
}
#contentPanel
{
    width: 740px;
    margin: 0 auto;
    padding: 20px 0px 20px 0px;
}
.PageFooter
{
    background-color: #0C638E;
    color: #fff;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-align: center;
    position: absolute;
    bottom: 0px;
}
.TextBlock
{
    margin-bottom: 30px;
    overflow: auto;
}
.InputLabel
{
    line-height: 36px;
    width: 100px;
    float: left;
}
.ReportGridContainer
{
    position: absolute;
    width: 100%;
    bottom: 30px;
    top: 50px;
    outline: none !important;
}
.PopupPanelItem
{
    width: 630px;
    overflow: hidden !important;
}

.PopupTextGroup
{
    margin-top: 10px;
    margin-bottom: 10px;
}
.ExportButtonContainer
{
    float: left;
    margin-top: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
}

/****************************************************************************************************************************************************/
/* Report ListBox
/****************************************************************************************************************************************************/
.ReportListBoxTitle
{
    font-weight: 900;
}

.ReportListBoxDescription
{
    font-size: 14px;
}
.ListBox .rlbGroup
{
    border-top: 0px !important;
}
.ListBox .rlbHovered
{
   cursor: pointer !important;
}

/****************************************************************************************************************************************************/
/* Tooltips
/****************************************************************************************************************************************************/
.RadToolTip_Default .rtWrapper .rtWrapperContent
{
    background-color: #dedede !important;
}

/****************************************************************************************************************************************************/
/* Panel bars
/****************************************************************************************************************************************************/
.RadPanelBar .rpRootGroup
{
    border-width: 0px !important;
}

/****************************************************************************************************************************************************/
/* Control panel and associated items
/****************************************************************************************************************************************************/
.ControlPanel
{
    background-color: #0C638E;
    color: #fff;
    width: 100%;
    height: 50px;
}
.ControlPanelInWindow
{
    background-color: #0C638E;
    color: #fff;
    width: 650px;
    height: 50px;
    overflow: hidden;
}
.ControlPanelLabel
{
    line-height: 50px;
    height: 50px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 900;
}
.ControlPanelButton
{
    line-height: 30px;
    height: 30px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #fff;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
}
.ControlPanelButton:hover
{
    cursor: pointer;
    background-color: #25A0DA;
}

/****************************************************************************************************************************************************/
/* Standalone buttons
/****************************************************************************************************************************************************/
.StandaloneButton
{
    border: 0px;
    background-color: #0C638E;
    line-height: 50px;
    height: 50px;
    /*float: left;*/
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0px;
    margin-bottom: 20px;
    color: #fff;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-decoration: none;
}
.StandaloneButton:hover
{
    cursor: pointer;
    background-color: #25A0DA;
}
.StandaloneButton:disabled
{
    background-color: #bbbbbb;
    cursor: inherit;
}


/****************************************************************************************************************************************************/
/* Grids
/****************************************************************************************************************************************************/
.GridHeader
{
    background-color: #25A0DA;
    color: #fff !important;
    font-weight: bold;
    border-left: 0px !important;
    border-bottom: 0px !important;
}

.rgHeader a
{
    color: #fff !important;
}

.RadGrid_Metro th.rgSorted
{
    background-color: #25A0DA !important;
}

.rgHeaderWrapper
{
    background-color: #25A0DA;
    border-left: 0px !important;
    border-bottom: 0px !important;
}

.rgHeaderDiv
{
    border-right: 0px !important;
}

.GridHighlight
{
    /*
    background-color: #ffd158 !important;
    color: #000 !important;
    */
    background-color: #25A0DA !important;
    color: #fff !important;
    border-color: rgb(229, 229, 229) !important;
}

.GridHighlight td
{
    border-color: rgb(229, 229, 229) !important;
}

.rgRow td, .rgAltRow td, .rgEditRow td, .rgFooter td, .rgFooterAlt td
{
    border-width: 0px 0px 0px 1px !important;
}
.FooterRow
{
    background-color: #ffd158;
    font-weight: bold;
}
.FooterRow td
{
    padding: 4px 7px 3px 7px !important;
}
.FooterRowAlt
{
    background-color: #ffe6a3;
    font-weight: bold;
}
.FooterRowAlt td
{
    padding: 4px 7px 3px 7px !important;
}
.RowLabel
{
    text-decoration: none;
    font-weight: bold;
}
.ClickThroughCell
{
    cursor: pointer !important;
}
.ClickThroughCell:hover
{
    /*background-color: rgb(255,209,88);*/
    background-color: #25A0DA;
    color: #fff;
}
.rgEditForm a
{
    color: #fff !important;
}
.rgRow a, .rgAltRow a
{
    text-decoration: underline;
}

[Magdalena]

Hi Matt,

I tried to run your code and the div with the class "rpTemplate" is 650 pixels width so everithing looks OK (there is a screenshot image in the attached archive file). Could you modify the attached files to simulate your scenario?

Regards,
Magdalena
Telerik