[Solved] Spin buttons not aligned with input box on resize

[Ryan]

Internet Explorer: The spin buttons get misaligned if you go from a browser that's not maximized to maximized.

Firefox seems to be ok.

Any ideas?

[Konstantin Petkov]

Hello Ryan,

I'm afraid I could not reproduce the problem. I tried that with the online demo here:

http://www.telerik.com/demos/aspnet/prometheus/Input/Examples/RadNumericTextBox/FirstLook/DefaultCS.aspx

Do you get that there as well? Let me know if I'm missing something out.

All the best,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Ryan]

The above links works for me too... here's my markup that's not working.  Keep in mind it's the spin buttons that are moving.  So if you load the page maximized and then click restore down they won't be lined up with the boxes...or if you load with the page restored down and click maximize they won't line up.

<%

@ Page Language="C#" AutoEventWireup="true" CodeBehind="samplenomaster.aspx.cs" Inherits="Sellers.Tools.samplenomaster" %>

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

html xmlns="http://www.w3.org/1999/xhtml" >

<

head runat="server">

<title>Untitled Page</title>

</

head>

<

body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

</telerik:RadStyleSheetManager>

<div>

<table class="style1" style="border: thin solid #000000;">

<tr>

<td>

Title:

</td>

<td>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<telerik:RadSpell ID="RadSpell1" Runat="server" ButtonType="PushButton"

ControlToCheck="TextBox1" FragmentIgnoreOptions="All"

SpellCheckProvider="PhoneticProvider" SupportedLanguages="en-US,English"

WordIgnoreOptions="None" />

</td>

<td>

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr bgcolor="#DADADA">

<td>

&nbsp;Category:</td>

<td>

<telerik:RadComboBox ID="RadComboBox2" Runat="server"

AppendDataBoundItems="True" DataSourceID="ObjectDataSource1"

DataTextField="CatName" DataValueField="CatID" RadComboBoxImagePosition="Right"

Skin="Default2006">

<Items>

<telerik:RadComboBoxItem runat="server" Text="Select A Category" />

</Items>

<

CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

<

ExpandAnimation Type="OutQuart"></ExpandAnimation>

</telerik:RadComboBox>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"

SelectMethod="GetAllActiveCategories"

TypeName="MyLibrary.Common.CategoryFunctionsCommon">

</asp:ObjectDataSource>

</td>

<td>

&nbsp;</td>

</tr>

<tr>

<td>

Description:

</td>

<td>

<telerik:RadEditor ID="RadEditor1" Runat="server" EditModes="Design"

Height="400px" Skin="Default" StripFormattingOnPaste="None"

StripFormattingOptions="None" ToolbarMode="Default" Width="680px"

ToolsFile="~/Tools/EditorTools.xml" EnableViewState="False">

<Content>

</

Content>

<

SpellCheckSettings SpellCheckProvider="PhoneticProvider" WordIgnoreOptions="None"></SpellCheckSettings>

</telerik:RadEditor>

</td>

<td>

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr bgcolor="#DADADA">

<td>

Qty:

</td>

<td>

<div><telerik:RadNumericTextBox ID="RadNumericTextBox1" Runat="server" MaxValue="20"

MinValue="1" ShowSpinButtons="True" Skin="Web20">

<

NumberFormat AllowRounding="True" DecimalDigits="0"></NumberFormat>

</telerik:RadNumericTextBox></div>

</td>

<td>

<i>Example: 1</i><br />

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr>

<td>

Price1:

</td>

<td>

<telerik:RadNumericTextBox ID="RadNumericTextBox2" Runat="server"

MaxValue="100000" MinValue="1" ShowSpinButtons="True" Type="Currency">

<

NumberFormat AllowRounding="True"></NumberFormat>

</telerik:RadNumericTextBox>

<font color="#000000"> per item (Numbers and decimal point &#39;.&#39; only)</font><font

color="#006600"><br />

</font>

</td>

<td>

<i>Example.: 3.00</i><br />

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr bgcolor="#DADADA">

<td>

price:2

</td>

<td>

<telerik:RadNumericTextBox ID="RadNumericTextBox8" Runat="server"

Culture="English (United States)" MaxValue="5000" MinValue="1"

ShowSpinButtons="True" Type="Currency" Value="1" Width="125px">

<

NumberFormat AllowRounding="True"></NumberFormat>

</telerik:RadNumericTextBox>

per item

<br />

</td>

<td>

<i>Example: 2.00</i><br />

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr>

<td>

Price3:

</td>

<td>

(

<telerik:RadNumericTextBox ID="RadNumericTextBox7" Runat="server"

Culture="English (United States)" MaxValue="200000" MinValue="0"

ShowSpinButtons="True" Type="Currency" Width="125px">

<

NumberFormat AllowRounding="True"></NumberFormat>

</telerik:RadNumericTextBox>

Numbers and decimal point

&#39;.&#39; only)</td>

<td>

<i>Example: 20.00</i><br />

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr bgcolor="#DADADA">

<td>

&nbsp;Price 4:</td>

<td>

(Numbers and decimal point

&#39;.&#39; only)<telerik:RadNumericTextBox

ID="RadNumericTextBox6" Runat="server" Culture="English (United States)"

MaxValue="200000" MinValue="0" ShowSpinButtons="True" Type="Currency"

Width="125px">

<

NumberFormat AllowRounding="True"></NumberFormat>

</telerik:RadNumericTextBox>

</td>

<td>

<i>Example: 10.00</i><br />

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr>

<td>

&nbsp;Start:</td>

<td>

<telerik:RadDateTimePicker ID="RadDateTimePicker1" Runat="server"

EnableViewState="False">

<

DateInput Width="100%"></DateInput>

<

DatePopupButton CssClass="radPopupImage_Default"></DatePopupButton>

<

Calendar MonthLayout="Layout_7columns_x_6rows" CellAlign="Center" CellVAlign="Middle" FirstDayOfWeek="Default" DayNameFormat="FirstLetter" Orientation="RenderInRows" TitleAlign="Center" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"></Calendar>

<

TimePopupButton CssClass="radPopupImage_Default"></TimePopupButton>

<

TimeView EndTime="22:00:00" StartTime="06:00:00" Interval="00:15:00"></TimeView>

</telerik:RadDateTimePicker>

</td>

<td>

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr bgcolor="#DADADA">

<td>

End:

</td>

<td>

<asp:DropDownList ID="DropDownList2" runat="server">

</asp:DropDownList>

&nbsp;days or

<telerik:RadDateTimePicker ID="RadDateTimePicker2" Runat="server"

EnableViewState="False">

<

DateInput Width="100%"></DateInput>

<

DatePopupButton CssClass="radPopupImage_Default"></DatePopupButton>

<

Calendar MonthLayout="Layout_7columns_x_6rows" CellAlign="Center" CellVAlign="Middle" FirstDayOfWeek="Default" DayNameFormat="FirstLetter" Orientation="RenderInRows" TitleAlign="Center" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"></Calendar>

<

TimePopupButton CssClass="radPopupImage_Default"></TimePopupButton>

<

TimeView EndTime="22:00:00" StartTime="06:00:00" Interval="00:15:00"></TimeView>

</telerik:RadDateTimePicker>

</td>

<td>

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr>

<td>

Weight:

</td>

<td>

<font face="Arial" size="2">pounds. (For items under 1lb. please use decimal

values like .3 or .6, for items over 1 pound please use whole numbers)

</font></td>

<td>

<font face="Arial" size="2">Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</font>

</td>

</tr>

<tr bgcolor="#DADADA">

<td>

Shipping:

</td>

<td>

<asp:DropDownList ID="DropDownList3" runat="server">

</asp:DropDownList>

</td>

<td>

<font face="Arial" size="2">&nbsp;Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem <br />

</font>

</td>

</tr>

<tr>

<td>

Price5:

</td>

<td>

<font face="Arial" size="2">(Numbers and decimal point &#39;.&#39; only)<telerik:RadNumericTextBox

ID="RadNumericTextBox4" Runat="server" Culture="English (United States)"

MaxValue="5000" MinValue="0" ShowSpinButtons="True" Type="Currency"

Width="125px">

</telerik:RadNumericTextBox>

</font>

</td>

<td>

<font face="Arial" size="2"><i>Example: 5.00</i></font><br />

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr bgcolor="#DADADA">

<td>

Price6:

</td>

<td>

(Numbers and decimal point

&#39;.&#39; only)<telerik:RadNumericTextBox

ID="RadNumericTextBox3" Runat="server" Culture="English (United States)"

MaxValue="100000" MinValue="0" ShowSpinButtons="True" Type="Currency"

Width="125px">

<

NumberFormat AllowRounding="True"></NumberFormat>

</telerik:RadNumericTextBox>

&nbsp;

</td>

<td>

<i>Example: 1.00</i><br />

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr>

<td>

Shipping:

</td>

<td>

<asp:DropDownList ID="DropDownList4" runat="server">

</asp:DropDownList>

<telerik:RadComboBox ID="RadComboBox1" Runat="server"

RadComboBoxImagePosition="Right" Skin="Vista"

HighlightTemplatedItems="True" MarkFirstMatch="True" Width="280px">

<

CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

<

ExpandAnimation Type="OutQuart"></ExpandAnimation>

<ItemTemplate>

<div class="qsfexCarrierView">

<img class="qsfexCarrierPic" src='/Images/Shippers/<%# DataBinder.Eval(Container, "Attributes['ImagePath']") %>' alt="" />

<span class="qsfexCarrierName"><%# DataBinder.Eval(Container, "Text") %></span>

</div>

</ItemTemplate>

<Items><telerik:RadComboBoxItem ImagePath="usps.jpg" Text="Usps" Value="1" />

<telerik:RadComboBoxItem ImagePath="ups.jpg" Text="UPS" Value="2" />

<telerik:RadComboBoxItem ImagePath="Fedex.gif" Text="FedEx" Value="3" />

</Items>

</telerik:RadComboBox>

</td>

<td>

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

<br />

<br />

</td>

</tr>

<tr bgcolor="#DADADA">

<td>

Check1:

</td>

<td>

<asp:CheckBox ID="CheckBox1" runat="server" />

</td>

<td>

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

<br />

</td>

</tr>

<tr>

<td>

Check2:

</td>

<td>

<asp:CheckBox ID="CheckBox2" runat="server" />

</td>

<td>

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

<br />

</td>

</tr>

<tr bgcolor="#DADADA">

<td>

&nbsp;Store:</td>

<td>

<asp:DropDownList ID="DropDownList5" runat="server">

</asp:DropDownList>

</td>

<td>

&nbsp;</td>

</tr>

<tr>

<td>

&nbsp;Description</td>

<td>

<asp:TextBox ID="TextBox11" runat="server"></asp:TextBox>

</td>

<td>

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

<tr>

<td align="center" bgcolor="#DADADA" colspan="3">

Additional Features (Optional)

</td>

</tr>

<tr>

<td>

Check3:

</td>

<td>

&nbsp;<asp:CheckBox ID="CheckBox3" runat="server" />

</td>

<td>

<strong>Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum

lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

Ipsum lorem Ipsum lorem Ipsum lorem

</strong>psum lorem Ipsum lorem Ipsum lorem

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum

lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

<br />

</td>

</tr>

<tr bgcolor="#DADADA">

<td>

Check4: Check4:

</td>

<td>

<br />

<asp:CheckBox ID="CheckBox4" runat="server" />

</td>

<td>

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum

lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem

Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum lorem Ipsum

lorem Ipsum lorem Ipsum lorem Ipsum lorem

</td>

</tr>

</table>

</div>

</form>

</

body>

</

html>

[Konstantin Petkov]

Hi Ryan,

I tried something similar, but to no avail.

Do you mean all the numeric text boxes from the pasted code are misaligned? Can you please check if you put some outside of the table if those spin buttons will get misaligned too? If that concerns the numerics in that table, would you share how the table class looks like?


Greetings,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Ryan]

Yeah it happens on all the numeric input boxes.  There is a class on the main table but there is no stylesheet associated with the page...I deleted the class reference and see the same behavior.  Here's a couple jpgs showing what's going on...I only circled one but you can see the others:

www.file-new.com/images/norm.jpg

www.file-new.com/images/maximized.jpg

[Konstantin Petkov]

Hi Ryan,

This looks too bad and this is the first time I see such a misalignment with the spin buttons.

Can you please submit a regular support ticket and send us a sample which replicates that? We will investigate it locally and get back to you with a solution.

Regards,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center