Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

alignment combobox different from radtextbox

5 Answers 256 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Fabio Cirillo
Top achievements
Rank 1
Fabio Cirillo asked on 24 Jun 2013, 04:47 PM
screenshot.jpg
Hello,
I have created an aspx page, the image was attached to this post. I put a table in html and I put the label radcombobox two and a radtextbox. The theme I use is the "silk". Now as you can see from the attached, the combobox not only aligned to radtextbox. I set the values ​​for padding and margin to zero but nothing. Also sending the html code.
How can I align everything correctly?

<table style="width: 662px;padding:0px;margin:0px">
           <tr>
               <td style="width: 102px;padding:0px;margin:0px;">
                   <asp:Label ID="Label3" runat="server" Text="Tipo alloggiato:" Width="102px"></asp:Label>
               </td>
               <td style="width: 150px;padding:0px;margin:0px;">
                   <telerik:RadComboBox ID="tipoalloggiato" Runat="server" Culture="it-IT" Skin="Silk" Width="130px">
                       <Items>
                           <telerik:RadComboBoxItem runat="server" Text="Ospite singolo" Value="16" />
                           <telerik:RadComboBoxItem runat="server" Text="Capo famiglia" Value="17" />
                           <telerik:RadComboBoxItem runat="server" Text="Capo gruppo" Value="18" />
                       </Items>
                   </telerik:RadComboBox>
               </td>
               <td style="width: 105px;padding:0px;margin:0px">
                   <asp:Label ID="Label4" runat="server" Text="nr. componenti:" Width="105px"></asp:Label>
               </td>
               <td style="width: 70px;padding:0px;margin:0px">
                   <telerik:RadNumericTextBox ID="RadNumericTextBox1" Runat="server" Culture="it-IT" DbValueFactor="1" LabelWidth="0px" Skin="Silk" Value="1" Width="50px" DataType="System.Int32" MaxLength="4">
                       <NumberFormat ZeroPattern="n" DecimalDigits="0" DecimalSeparator="."></NumberFormat>
                       <DisabledStyle Font-Underline="False" HorizontalAlign="Right" />
                   </telerik:RadNumericTextBox>
               </td>
               <td style="width: 85px;padding:0px;margin:0px">
                   <asp:Label ID="Label5" runat="server" Text="Tipo gruppo:" Width="85px"></asp:Label>
               </td>
               <td style="width: 160px;padding:0px;margin:0px">
                   <telerik:RadComboBox ID="tipogruppo" Runat="server" Skin="Silk">
                   </telerik:RadComboBox>
               </td>
           </tr>
           </table>

5 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 25 Jun 2013, 11:10 AM
Hello Fabio,

 I tested the code you had provided and the issue with the alignment occurs in a IE7 browser only. Tested browsers are Firefox, Chrome, Opera and Internet Explorer. So you can target this browser and correct the position as following:

/* target IE6 and IE7 */
 
@media screen\9 {
    html .riTextBox {
        position: relative;
        top: -2px;
    }
}
Regards,
Magdalena
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Fabio Cirillo
Top achievements
Rank 1
answered on 25 Jun 2013, 02:56 PM
hello Magdalena,
my code is tested with chrome i dont use explorer 7.
the code you posted what is it?
0
Magdalena
Telerik team
answered on 25 Jun 2013, 03:48 PM
Hi Fabio,

The code snippet I sent you is for targeting IE6 and IE7 because there was a little discrepancy of the alignment in IE7 only. I tested the code you attached in the original post and it was correctly aligned in  Chrome. You can see the behavior of the scenario in this video. Could you clarify what version of controls you are using and whether you are applying some additional styles?

Regards,
Magdalena
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Fabio Cirillo
Top achievements
Rank 1
answered on 25 Jun 2013, 06:45 PM
screenshot.jpg
sorry, but my code dont function.
I posted screenshot and html, css code again, please help me to find the problem of the alignment combobox.

html code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="schedineps.aspx.vb" Inherits="schedineps" %>
 
<!DOCTYPE html>
 
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="App_Themes/browser/chrome.css" rel="stylesheet" type="text/css" />
    <title></title>
    </head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxManager>
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="WebBlue">
        </telerik:RadSkinManager>
        <div id="container">
                    <div class="date">
                        <table style="padding: 0px; margin: 0px;">
                            <tr>
                                <td style="padding: 0px; margin: 0px">
                                    <asp:Label ID="Label1" runat="server" Text="Data arrivo:" Width="80px"></asp:Label></td>
                                <td style="padding: 0px; margin: 0px">
                                    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Width="120px">
                                        <Calendar ID="Calendar1" runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"></Calendar>
                                        <DateInput ID="DateInput1" runat="server" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy" LabelWidth="40%"></DateInput>
                                        <DatePopupButton ToolTip="Apri calendario" />
                                    </telerik:RadDatePicker>
                                </td>
                                <td style="padding: 0px; margin: 0px">
                                    <asp:Label ID="Label2" runat="server" Text="Data partenza:" Width="100px"></asp:Label>
                                </td>
                                <td style="padding: 0px; margin: 0px">
                                    <telerik:RadDatePicker ID="RadDatePicker2" runat="server" Width="120px">
                                        <Calendar ID="Calendar2" runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"></Calendar>
                                        <DateInput ID="DateInput2" runat="server" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy" LabelWidth="40%"></DateInput>
                                        <DatePopupButton ToolTip="Apri calendario" TabIndex="1" />
                                    </telerik:RadDatePicker>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="tipogruppo">
                        <table style="padding: 0px; margin: 0px">
                            <tr>
                                <td style="padding: 0px; margin: 0px;">
                                    <asp:Label ID="Label3" runat="server" Text="Tipo cliente:" Width="102px"></asp:Label>
                                </td>
                                <td style="padding: 0px; margin: 0px;">
                                    <telerik:RadComboBox ID="tipoalloggiato" runat="server" Culture="it-IT" Width="130px">
                                        <Items>
                                            <telerik:RadComboBoxItem runat="server" Text="Ospite singolo" Value="16" />
                                            <telerik:RadComboBoxItem runat="server" Text="Capo famiglia" Value="17" />
                                            <telerik:RadComboBoxItem runat="server" Text="Capo gruppo" Value="18" />
                                        </Items>
                                    </telerik:RadComboBox>
                                </td>
                                <td style="padding: 0px; margin: 0px">
                                    <asp:Label ID="Label4" runat="server" Text="nr. componenti:" Width="105px"></asp:Label>
                                </td>
                                <td style="padding: 0px; margin: 0px">
                                    <telerik:RadNumericTextBox ID="componenti" runat="server" Culture="it-IT" DbValueFactor="1" LabelWidth="0px" Value="1" Width="50px" DataType="System.Int32" MaxLength="4">
                                        <NumberFormat ZeroPattern="n" DecimalDigits="0" DecimalSeparator="."></NumberFormat>
                                        <ReadOnlyStyle HorizontalAlign="Right" />
                                        <DisabledStyle Font-Underline="False" HorizontalAlign="Right" />
                                        <EnabledStyle HorizontalAlign="Right" />
                                    </telerik:RadNumericTextBox>
                                </td>
                                <td style="padding: 0px; margin: 0px">
                                    <asp:Label ID="Label5" runat="server" Text="Tipo gruppo:" Width="85px"></asp:Label>
                                </td>
                                <td style="padding: 0px; margin: 0px">
                                    <telerik:RadComboBox ID="tipogruppo" runat="server">
                                    </telerik:RadComboBox>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="anagrafica">
                        <table style="padding: 0px; margin: 0px">
                            <tr>
                                <td style="padding: 0px; margin: 0px">
                                    <asp:Label ID="Label6" runat="server" Text="Cognome:" Width="65px"></asp:Label>
                                </td>
                                <td style="padding: 0px; margin: 0px">
                                    <telerik:RadTextBox ID="cognome" runat="server" MaxLength="30" Width="300px">
                                    </telerik:RadTextBox>
                                </td>
                                <td style="padding: 0px; margin: 0px">
                                    <asp:Label ID="Label7" runat="server" Text="Nome:" Width="42px"></asp:Label>
                                </td>
                                <td style="padding: 0px; margin: 0px">
                                    <telerik:RadTextBox ID="nome" runat="server" MaxLength="30" Width="300px">
                                    </telerik:RadTextBox>
                                </td>
                                <td style="padding: 0px; margin: 0px">
                                    <asp:Label ID="Label8" runat="server" Text="Sesso:" Width="45px"></asp:Label>
                                </td>
                                <td style="width: 80px; padding: 0px; margin: 0px">
                                    <telerik:RadComboBox ID="sesso" runat="server" Culture="it-IT" Width="80px">
                                        <Items>
                                            <telerik:RadComboBoxItem runat="server" ImageUrl="~/image/icone/male16x16.png" Text="Uomo" Value="1" />
                                            <telerik:RadComboBoxItem runat="server" ImageUrl="~/image/icone/Girl16x16.png" Text="Donna" Value="2" />
                                        </Items>
                                    </telerik:RadComboBox>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="luogo">
                        <table style="padding: 0px; margin: 0px">
                            <tr>
                                <td>
                                    <asp:Label ID="Label9" runat="server" Text="Cittadinanza:"></asp:Label>
                                </td>
                                <td>
                                    <telerik:RadComboBox ID="cittadinanza" runat="server" Width="200px" EnableVirtualScrolling="True" Filter="StartsWith" LoadingMessage="Caricamento...">
                                    </telerik:RadComboBox>
                                </td>
                                <td>
                                    <asp:Label ID="Label10" runat="server" Text="Luogo di nascita:"></asp:Label>
                                </td>
                                <td>
                                    <telerik:RadComboBox ID="luogonascita" runat="server" Width="200px" EnableVirtualScrolling="True" Filter="StartsWith" LoadingMessage="Caricamento...">
                                    </telerik:RadComboBox>
                                </td>
                                <td>
                                    <asp:Label ID="Label11" runat="server" Text="Luogo di residenza:"></asp:Label>
                                </td>
                                <td>
                                    <telerik:RadComboBox ID="luogoresidenza" runat="server" Width="200px" EnableVirtualScrolling="True" Filter="StartsWith" LoadingMessage="Caricamento...">
                                    </telerik:RadComboBox>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="documento">
                        <table style="padding: 0px; margin: 0px">
                            <tr>
                                <td>
                                    <asp:Label ID="Label12" runat="server" Text="Documento:"></asp:Label>
                                </td>
                                <td>
                                    <telerik:RadComboBox ID="documento" runat="server" Width="250px" LoadingMessage="Caricamento...">
                                    </telerik:RadComboBox>
                                </td>
                                <td>
                                    <asp:Label ID="Label13" runat="server" Text="numero:"></asp:Label>
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="numdocumento" runat="server">
                                    </telerik:RadTextBox>
                                </td>
                                <td>
                                    <asp:Label ID="Label14" runat="server" Text="Luogo di rilascio:"></asp:Label>
                                </td>
                                <td>
                                    <telerik:RadComboBox ID="luogodocumento" runat="server" Width="200px" EnableVirtualScrolling="True" Filter="StartsWith" LoadingMessage="Caricamento...">
                                    </telerik:RadComboBox>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="camera">
                        <table style="width:166px; padding:0px; margin: 0px">
                            <tr>
                                <td style="padding:0px;margin:0px">
                                    <asp:Label ID="Label15" runat="server" Text="Camera nr:"></asp:Label>
                                </td>
                                <td style="padding:0px;margin:0px">
                                    <telerik:RadComboBox ID="camera" runat="server" EnableVirtualScrolling="True" Filter="StartsWith" Width="80px">
                                    </telerik:RadComboBox>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="button">
                        <table style="padding: 0px; margin: 0px">
                            <tr>
                                <td>
                                    <telerik:RadButton ID="Btnsalva" runat="server" Text="Salva cliente">
                                    </telerik:RadButton>
                                </td>
                                <td> </td>
                                <td>
                                    <telerik:RadButton ID="Btnelimina" runat="server" Text="Elimina cliente">
                                    </telerik:RadButton>
                                </td>
                                <td> </td>
                                <td>
                                    <telerik:RadButton ID="Btncerca" runat="server" Text="Cerca schedina">
                                    </telerik:RadButton>
                                </td>
                                <td> </td>
                                <td>
                                    <telerik:RadButton ID="Btnuscita" runat="server" Text="Uscita">
                                    </telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="divisore">
                        <hr />
                    </div>
       </div>
    <asp:HiddenField ID="idrecord" runat="server" />
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" Skin="Metro">
        </telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>

css code:

body {
 border-style: none;
 border-color: inherit;
 border-width: 0px;
 font-family: Verdana;
 font-size: small;
 margin: 0px;
 padding: 0px;
}
/* div al centro pagina*/
div#container {
    position: absolute;
    background-color:#e5e7e8;
    left: 50%;
    width: 1024px;
    height: 768px;
    margin-left: -512px;
    padding: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.banner {
    background-image: url(/image/banner.jpg);
    height:100px;
}
.menu {
    position:absolute;
    width: 820px;
    height: 26px;
    top: 38px;
    left: 190px;
}
.date {
    position:absolute;
    top:6px;
    left:3px;
    width:430px;
    background-color: aliceblue;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.tipogruppo {
    position:absolute;
    top:39px;
    left:3px;
    width:650px;
    background-color: ghostwhite;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.anagrafica {
    position:absolute;
    top:75px;
    left:3px;
    width:851px;
    background-color: ghostwhite;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.luogo {
    position:absolute;
    top:111px;
    left:3px;
    width:960px;
    background-color: ghostwhite;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.documento {
    position:absolute;
    top:149px;
    left:3px;
    width:885px;
    background-color: aliceblue;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.button {
    position:absolute;
    top:190px;
    left:3px;
}
.camera {
    position:absolute;
    top:3px;
    left:486px;
    width:166px;
    background-color: aliceblue;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.divisore {
    position:absolute;
    top:220px;
    width:1024px;
}
.griglia {
    position:absolute;
    top:240px;
    width:1024px;
}

0
Magdalena
Telerik team
answered on 26 Jun 2013, 10:55 AM
Hi Fabio,

Thank you for sending all code. I was able to successfully to reproduce your scenario with broken alignment. It can be corrected in either one of two ways:

  1. by adding relative position to the combobox
    .RadComboBox {
        position: relative;
        top: 2px;
    }
  2. by applying a fixed height to the combobox
    .RadComboBox {
        height: 22px;
    }

If you have further question, do not hesitate to contact us back.

Regards,
Magdalena
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
ComboBox
Asked by
Fabio Cirillo
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Fabio Cirillo
Top achievements
Rank 1
Share this question
or