This is a migrated thread and some comments may be shown as answers.

RadDock padding

1 Answer 152 Views

Dock

This is a migrated thread and some comments may be shown as answers.

Paulo asked on 08 Feb 2012, 08:45 PM

padding.PNG

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 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>

</ContentTemplate>

</telerik:RadDock>

</asp:Panel>

Thank you in advance.
Paulo

1 Answer, 1 is accepted

answered on 13 Feb 2012, 12:26 PM

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:

Resetting Your Styles with CSS Reset

CSS Tools: Reset CSS

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 >>