Setting margin

3 posts, 0 answers
  1. Matt
    Matt avatar
    4 posts
    Member since:
    May 2009

    Posted 08 Jul 2010 Link to this post

    I have a RadPane that in the grand scheme of things serves as the content panel on the page. I would like to set a 10px margin for all content in this pane (so that there is a little room between other panes). How can I do this such that the width of the contents do not extend beyond the defined width of the content pane?

    Below is a snippet of code, where RadPane8 represents the content pane.

    <telerik:RadSplitter ID="RadSplitter2" runat="server" SplitBarsSize="" Orientation="Horizontal">
        <telerik:RadPane ID="RadPane3" runat="server" Height="26px">
            <telerik:RadMenu ID="radToolbar" runat="server" EnableSelection="False">
            </telerik:RadMenu>
        </telerik:RadPane>
        <telerik:RadPane ID="RadPane8" runat="server">
            <asp:Panel ID="pnlClaimSummary" runat="server" Visible="False">
                <telerik:RadSplitter ID="RadSplitter7" runat="server" Orientation="Horizontal">
                    <telerik:RadPane ID="RadPane13" runat="server" Height="55px">
                        <table style="width: 100%;" cellspacing="0" border="0">
                            <tr>
                                <td colspan="4" class="rgHeader" scope="col">
                                    Claim Details
                                </td>
                            </tr>
                            <tr class="rgFilterRow">
                                <td style="width: 25%;">
                                    <span class="InquiryLevel1">Claim Number: </span>
                                    <asp:Label ID="lblClaimSummaryClaimNumber" runat="server" Text="Label"></asp:Label>
                                </td>
                                <td style="width: 25%;">
                                    <span class="InquiryLevel1">Policy Number: </span>
                                    <asp:Label ID="lblClaimSummaryPolicyNumber" runat="server" Text="Label"></asp:Label>
                                </td>
                                <td style="width: 25%;">
                                    <span class="InquiryLevel1">Loss Date: </span>
                                    <asp:Label ID="lblClaimSummaryLossDate" runat="server" Text="Label"></asp:Label>
                                </td>
                                <td style="width: 25%;">
                                    <span class="InquiryLevel1">Occurrence: </span>
                                    <asp:Label ID="lblClaimSummaryLossOccurrence" runat="server" Text="Label"></asp:Label>
                                </td>
                            </tr>
                        </table>
                    </telerik:RadPane>
                    <telerik:RadPane ID="RadPane14" runat="server">
                        <telerik:RadSplitter ID="RadSplitter8" runat="server">
                            <telerik:RadPane ID="RadPane15" runat="server">
                                <table>
                                    <tr>
                                        <td>
                                            <span class="InquiryLevel1">Loss Description:</span>
                                        </td>
                                        <td>
                                            <telerik:RadTextBox ID="txtLossDescription" runat="server" ReadOnly="True" TextMode="MultiLine"
                                                Rows="5">
                                            </telerik:RadTextBox>
                                        </td>
                                    </tr>
                                </table>
                            </telerik:RadPane>
                            <telerik:RadPane ID="RadPane16" runat="server">
                                <telerik:RadGrid ID="grdClaimAssignment" runat="server" AllowSorting="True" AutoGenerateColumns="False"
                                    GridLines="None" OnNeedDataSource="grdClaimAssignment_NeedDataSource">
                                    <MasterTableView>
                                        <RowIndicatorColumn>
                                            <HeaderStyle Width="20px" />
                                        </RowIndicatorColumn>
                                        <ExpandCollapseColumn>
                                            <HeaderStyle Width="20px" />
                                        </ExpandCollapseColumn>
                                        <Columns>
                                            <telerik:GridBoundColumn DataField="Name" HeaderText="Assignee Name" UniqueName="AssigneeName">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Role" HeaderText="Role" UniqueName="AssignmentRole">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="WhenAssigned" DataType="System.DateTime" HeaderText="Assignment Date"
                                                UniqueName="WhenAssigned">
                                            </telerik:GridBoundColumn>
                                        </Columns>
                                    </MasterTableView>
                                </telerik:RadGrid>
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </asp:Panel>
            <asp:Panel ID="pnlDashboard" runat="server" Visible="False">
                <telerik:RadSplitter ID="RadSplitter5" runat="server" Orientation="Horizontal">
                    <telerik:RadPane ID="radItemListPane" runat="server">
                        <telerik:RadGrid ID="radDashGrid" runat="server" AllowFilteringByColumn="True" AllowSorting="True"
                            GridLines="None" Style="margin: 10px;" OnItemDataBound="radDashGrid_ItemDataBound"
                            AutoGenerateColumns="False" OnItemCommand="radDashGrid_ItemCommand" OnPreRender="radDashGrid_PreRender"
                            OnNeedDataSource="radDashGrid_NeedDataSource">
                            <MasterTableView DataKeyNames="ItemID">
                                <Columns>
                                    <telerik:GridBoundColumn DataField="ClaimNumber" HeaderText="Claim Number" UniqueName="ClaimNumber">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="PolicySymbol" HeaderText="Symbol" UniqueName="PolicySymbol">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="PolicyNumber" HeaderText="Policy Number" UniqueName="PolicyNumber">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="DateOfLoss" DataFormatString="{0:MM/dd/yyyy}"
                                        DataType="System.DateTime" HeaderText="Loss Date" UniqueName="DateOfLoss">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="LossOccurrence" HeaderText="Occurrence" UniqueName="column1"
                                        DataFormatString="{0:D2}" DataType="System.Int32">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="ItemType" HeaderText="Item Type" UniqueName="ItemType">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="DueDate" DataFormatString="{0:MM/dd/yyyy hh:mm tt}"
                                        DataType="System.DateTime" HeaderText="Due Date" UniqueName="DueDate">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="IsRead" DataType="System.Boolean" HeaderText="Read"
                                        UniqueName="IsRead" Visible="False" AllowFiltering="False" AllowSorting="False"
                                        Display="False" Groupable="False" Reorderable="False" Resizable="False" ShowSortIcon="False">
                                    </telerik:GridBoundColumn>
                                </Columns>
                                <SortExpressions>
                                    <telerik:GridSortExpression FieldName="DueDate" SortOrder="Ascending" />
                                </SortExpressions>
                            </MasterTableView>
                            <ClientSettings EnablePostBackOnRowClick="True" EnableRowHoverStyle="True">
                                <Selecting AllowRowSelect="True" />
                                <ClientEvents OnRowContextMenu="ShowDashboardContextMenu" />
                            </ClientSettings>
                        </telerik:RadGrid>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Forward">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="RadPane11" runat="server" Height="100%">
                        <asp:Panel ID="pnlDashboardDetailsContainer" runat="server">
                            <asp:Panel ID="pnlDashboardItemDetails" runat="server" Visible="false" Style="margin: 10px;"
                                CssClass="RadGrid RadGrid_WebBlue">
                                <table style="width: 100%;" cellspacing="0" border="0">
                                    <tr>
                                        <td colspan="4" class="rgHeader" scope="col">
                                            Suspense Details
                                        </td>
                                    </tr>
                                    <tr class="rgFilterRow">
                                        <td style="width: 25%;">
                                            <span class="InquiryLevel1">Claim Number: </span>
                                            <asp:LinkButton ID="lnkClaimNumber" runat="server" CssClass="lkNorm" OnCommand="lnkClaimNumber_Command">ClaimNumber</asp:LinkButton>
                                        </td>
                                        <td style="width: 25%;">
                                            <span class="InquiryLevel1">Policy Number: </span>
                                            <asp:Label ID="lblPolicyNumber" runat="server" Text="Label"></asp:Label>
                                        </td>
                                        <td style="width: 25%;">
                                            <span class="InquiryLevel1">Loss Date: </span>
                                            <asp:Label ID="lblLossDate" runat="server" Text="Label"></asp:Label>
                                        </td>
                                        <td style="width: 25%;">
                                            <span class="InquiryLevel1">Occurrence: </span>
                                            <asp:Label ID="lblOccurrence" runat="server" Text="Label"></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4">
                                            <div style="margin-top: 10px;">
                                                <table>
                                                    <tr>
                                                        <td>
                                                            <span class="InquiryLevel1">Date Sent:</span>
                                                        </td>
                                                        <td>
                                                            <telerik:RadDateInput ID="txtDateSent" runat="server" DateFormat="MM/dd/yyyy" DisplayDateFormat="MM/dd/yyyy"
                                                                ReadOnly="True" SelectedDate="06/28/2010" Width="175">
                                                            </telerik:RadDateInput>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <span class="InquiryLevel1">Sender:</span>
                                                        </td>
                                                        <td>
                                                            <telerik:RadTextBox ID="txtFrom" runat="server" Text="Person" Width="300" ReadOnly="True">
                                                            </telerik:RadTextBox>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <span class="InquiryLevel1">Message:</span>
                                                        </td>
                                                        <td>
                                                            <telerik:RadTextBox ID="txtMessage" runat="server" ReadOnly="True" TextMode="MultiLine"
                                                                Rows="6" Width="500" Text="Review information to ensure accuracy.">
                                                            </telerik:RadTextBox>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </asp:Panel>
                        </asp:Panel>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </asp:Panel>
        </telerik:RadPane>
    </telerik:RadSplitter>

  2. Matt
    Matt avatar
    4 posts
    Member since:
    May 2009

    Posted 09 Jul 2010 Link to this post

    I was able to address the problem by wrapping all of the content in a table, where the margin of the table is 10px. It's amazing what a little time away from things will do to clear the mind.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 13 Jul 2010 Link to this post

    Hi Matt,

    I am glad that you were able to fix the problem and shared the solution with the community.

    Also, you can find more detailed information regarding such scenarios in this KB article:
    RadSplitter which is 100% of the page and has margin applied

    Kind regards,
    Dobromir
    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