RadDock padding

2 posts, 0 answers
  1. Paulo
    Paulo avatar
    31 posts
    Member since:
    Oct 2010

    Posted 08 Feb 2012 Link to this post

    Hello, Telerik Team.

    In the attached file, you will find a screen shot of the same web application in different browsers. On the left, Firefox 3.6.12; on the right, IE 8.0.

    In Firefox, a vertical scroll bar is displayed because the RadDock component is not large enough to display all controls.
    In IE, the vertical bar is not displayed.
    It appears that padding in IE is "smaller" than in Firefox.

    Is there any change I should implement in the following code in order to have a similar lay out in both browsers?
    <asp:Panel runat="server" ID="DockPanel">
        <telerik:RadDock 
            runat="server" ID="RadDock1" Width="445px" Height="410px" Closed="true" Style="z-index: 2000;" Title="Group Training Class" OnClientDockPositionChanged="dockMoved">
            <Commands>
                <telerik:DockCloseCommand />
            </Commands>
            <ContentTemplate>
                <div class="editForm">
                    <div class="content">
                        <table border="0" cellpadding="2" cellspacing = "5">
                            <tr><td></td><td></td></tr>
                            <tr><td></td><td></td></tr>
                            <tr>
                                <td align="right" style="padding:3px 0px 0px 0px;">
                                    <asp:Label ID="label1" runat="server">Description:</asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="description" runat="server" TextMode="MultiLine" Rows="2" Columns="50" ReadOnly="true" Style="padding:5px;"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td align="right" style="padding:3px 0px 0px 0px;">
                                    <asp:Label ID="label2" runat="server">Date:</asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="date" runat="server" ReadOnly="true" style="padding:2px;"></telerik:RadTextBox>
                                </td>
                            </tr>                          
                            <tr>
                                <td align="right" style="padding:3px 0px 0px 0px;">
                                    <asp:Label ID="label3" runat="server">Start Time:</asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="start_time" runat="server" ReadOnly="true" style="padding:2px;"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td align="right" style="padding:3px 0px 0px 0px;">
                                    <asp:Label ID="label4" runat="server">End Time:</asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="end_time" runat="server" ReadOnly="true" style="padding:2px;"></telerik:RadTextBox>
                                </td>
                            </tr>                            
                            <tr>
                                <td align="right" style="padding:3px 0px 0px 0px;">
                                    <asp:Label ID="label5" runat="server" style="padding:2px;">Personal Trainer:</asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="personal_trainer" runat="server" ReadOnly="true" style="padding:2px;"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr style="display:none;">
                                <td align="right">
                                    <asp:Label ID="label7" runat="server">Registered Members:</asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="registered_members" runat="server" TextMode="MultiLine" Rows="2" Columns="50" ReadOnly="true"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr style="display:none;">
                                <td align="right">
                                     <asp:Label ID="label8" runat="server">Wait List Members:</asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="wait_members" runat="server" TextMode="MultiLine" Rows="2" Columns="50" ReadOnly="true"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr style="display:none;">
                                <td align="right">
                                     <asp:Label ID="label9" runat="server">Date (mm/dd/yyyy format):</asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="date_mmddyyyy" runat="server" ReadOnly="true"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr style="display:none;">
                                <td align="right">
                                     <asp:Label ID="label10" runat="server">Start Time (hh:mm format):</asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="start_time_hhmm" runat="server" ReadOnly="true"></telerik:RadTextBox>
                                </td>
                            </tr>
                        </table>
      
                        <br />
                        <span style="padding:0px 145px 0px 3px;">Not Registered</span><span>Registered</span>
                        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" style="padding: 2px 0px 0px 3px;">
                            <telerik:RadListBox ID="members_not_assigned" runat="server" Width="225px" Height="100px"
                                SelectionMode="Single" AllowTransfer="true" TransferToID="members_assigned" AutoPostBackOnTransfer="false"
                                AllowReorder="false" AutoPostBackOnReorder="false" EnableDragAndDrop="true" ButtonSettings-ShowTransferAll="false" OnClientTransferring="TransferringListBoxItem">
                            </telerik:RadListBox>
                            <telerik:RadListBox ID="members_assigned" runat="server" Width="195px" Height="100px"
                                SelectionMode="Single" AllowReorder="false" AutoPostBackOnReorder="true" EnableDragAndDrop="true">
                            </telerik:RadListBox>
                        </telerik:RadAjaxPanel>
                        <label style="padding: 0px 0px 0px 3px; font-size:smaller">* Member name followed by an asterisk indicates member is on the wait list</label>
                    </div>
                    <br />
      
                    <div>
                        <input type="checkbox" id="agree" onclick="UpdateSubmitButton()" />I understand the terms and conditions listed
                        <a href="TermsAndConditions.aspx" target="_blank"> here</a>.
                    </div>
                    <br />
      
                    <div class="footer">
                        <button id="submit" onclick="UpdateAppointment()" type="button" disabled="disabled">Submit</button>
                        <button onclick="hideForm();" type="button">Cancel</button>
                    </div>
                </div>
            </ContentTemplate
        </telerik:RadDock>
    </asp:Panel>

    Thank you in advance.
    Paulo
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 13 Feb 2012 Link to this post

    Hello Paulo,

    As you mentioned, the scrollbars in the RadDock's container appear because its content cannot be displayed in the available size. Note that some HTML elements are displayed differently under the various browsers, because of their default styling. Please ensure that the elements in the RadDock content have similar appearance under IE and Firefox so that they occupy the same space and the scrollbar is not shown. This can be achieved by resetting the styles via CSS in order to avoid defaulting to the browser’s built-in styles, which differs from browser to browser. There are articles on the matter that can help you achieve the desired result, some of which are listed below:

    Feel free to contact us again if you run into more difficulties.

    Kind regards,
    Slav
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top