alignment combobox different from radtextbox

6 posts, 0 answers
  1. Fabio Cirillo
    Fabio Cirillo avatar
    181 posts
    Member since:
    Jan 2010

    Posted 24 Jun 2013 Link to this post

    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>
  2. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 25 Jun 2013 Link to this post

    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.
  3. Fabio Cirillo
    Fabio Cirillo avatar
    181 posts
    Member since:
    Jan 2010

    Posted 25 Jun 2013 Link to this post

    hello Magdalena,
    my code is tested with chrome i dont use explorer 7.
    the code you posted what is it?
  4. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 25 Jun 2013 Link to this post

    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.
  5. Fabio Cirillo
    Fabio Cirillo avatar
    181 posts
    Member since:
    Jan 2010

    Posted 25 Jun 2013 Link to this post

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

  6. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 26 Jun 2013 Link to this post

    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.
Back to Top