Problems spacing multiple comboboxes within a table.

11 posts, 1 answers
  1. Boris
    Boris avatar
    275 posts
    Member since:
    Oct 2012

    Posted 24 Dec 2013 Link to this post

    Just want to make sure I'm not missing any options.

    I have a screen with an html table and I need to put in multiple rows and columns with many radcombo boxes.  
    I'm currently running Version 2012.2.607.40.  For 'political' reasons I can't upgrade at this time.

    Is there any way at all to set the labels so that the labels and the dropdowns themselves all line up vertically?
    (Other than blanking out the dropdown labels and using separate label controls in separate cells?)

    Would upgrading to the latest Telerik control set offer any new options?
  2. Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 27 Dec 2013 Link to this post

    Hi Boris,

    I have tested the scenario you described and it all worked correctly at my side. Here is the code that I used for testing:
    <table>
              <thead>
                  <td>  <telerik:RadComboBox runat="server" ID="RadComboBox2" Label="testLabel">
              <Items>
                  <telerik:RadComboBoxItem Text="item1" />
                  <telerik:RadComboBoxItem Text="item2" />
                  <telerik:RadComboBoxItem Text="item3" />
                  <telerik:RadComboBoxItem Text="item4" />
                  <telerik:RadComboBoxItem Text="item5" />
              </Items>
          </telerik:RadComboBox></td>
                  <td>aa</td>
                  <td>aa</td>
                  <td>aaa</td>
                  <td>aaa</td>
              </thead>
              <tbody>
                   <td><telerik:RadComboBox runat="server" ID="RadComboBox4" Label="testLabel">
              <Items>
                  <telerik:RadComboBoxItem Text="item1" />
                  <telerik:RadComboBoxItem Text="item2" />
                  <telerik:RadComboBoxItem Text="item3" />
                  <telerik:RadComboBoxItem Text="item4" />
                  <telerik:RadComboBoxItem Text="item5" />
              </Items>
          </telerik:RadComboBox></td>
                  <td>aa</td>
                  <td>aa</td>
                  <td>aaa</td>
                  <td>  <telerik:RadComboBox runat="server" ID="RadComboBox3" Label="testLabel">
              <Items>
                  <telerik:RadComboBoxItem Text="item1" />
                  <telerik:RadComboBoxItem Text="item2" />
                  <telerik:RadComboBoxItem Text="item3" />
                  <telerik:RadComboBoxItem Text="item4" />
                  <telerik:RadComboBoxItem Text="item5" />
              </Items>
          </telerik:RadComboBox></td>
              </tbody>
          </table>

    Please let me know if your case is somehow different.

    Regards,
    Plamen
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Boris
    Boris avatar
    275 posts
    Member since:
    Oct 2012

    Posted 27 Dec 2013 Link to this post

    No.  You have completely misunderstood my message.

    I'm talking about lining up the labels of the RadCombo boxes. There's no way, at least not with my version, to control the label width of a RadComboBox.
  5. Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 30 Dec 2013 Link to this post

    Hello Boris,

    If you want to set different padding of the label of RadComboBox you can do is by changing the CSS as for example in the code below:
    <style type="text/css">
           #RadComboBox1 .rcbLabel {
           padding-right:30px !important;
            padding-left:30px !important;
           }
       </style>

    If your scenario is somehow different please elaborate what exactly are you trying to achieve so that we could be more helpful.

    Regards,
    Plamen
    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.
  6. Boris
    Boris avatar
    275 posts
    Member since:
    Oct 2012

    Posted 02 Jan 2014 Link to this post

    Let me be more specific.

    When you have a table on a page and need to display a mix of text boxes and combo boxes (and possibly other Telerik controls) it is difficult to line up combo boxes with anything else.  The problem is their labels.

    The text boxes have a label width parameter.  The combo boxes do not.  It is my understanding that there are technical reasons why the combo box does not have a label width parameter. 

    At times I find it simpler to just not use the combo box label and instead use a separate Asp.Net Label (in a separate cell) to line up the controls.  But it's extra work and I was looking for other alternatives.  Are there any I might have overlooked?  (A CSS setting to control combo box label width?)
  7. Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 07 Jan 2014 Link to this post

    Hi Boris,

    In such case we recommend adding some LabelCssClass to RadComboBox and add the appropriate CSS to them as you need.

    Regards,
    Plamen
    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.
  8. Boris
    Boris avatar
    275 posts
    Member since:
    Oct 2012

    Posted 07 Jan 2014 Link to this post

    Still no good.

    Within the Aspx, for the sake of testing, I created a css definition similar to what you have in your documentation.  The controls are set to the Default skin.
      <style type="text/css">
            label.MyLabelStyle.riLabel
            {
                background: #99aaff;
                color: red;
                width:500px;
            }

    I attached this to a textbox and a pair of radcombo boxes.  The color settings affected the textbox label only.  The width setting had no effect on either the textbox or the radcombo boxes.
  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Jan 2014 Link to this post

    Hi Boris,

    Please have a look into the following code snippet which works fine at my end.

    ASPX:
    <div class="ContainerClass">
        <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Label="Label">
        </telerik:RadNumericTextBox>
        <telerik:RadComboBox ID="RadComboBox1" runat="server" Label="Label2">
        </telerik:RadComboBox>
    </div>

    CSS:
    <style type="text/css">
        .ContainerClass .RadInput
        {
            width: 300px !important;
        }
        .ContainerClass .RadInput .riLabel
        {
            color: red !important;
            width: 40% !important;
        }
        .ContainerClass .rcbLabel
        {
            color: Green !important;
        }
    </style>

    Thanks,
    Shinu.
  10. Boris
    Boris avatar
    275 posts
    Member since:
    Oct 2012

    Posted 08 Jan 2014 Link to this post

    Perhaps this will give you a clearer idea of what I'm looking for.

    Nothing I do seems to affect the label width, either in the div or the html table.  Could this be a version problem?

    (Complete aspx page.  No code behind needed.  Results attached as jpeg.)
    ---------------------------------------------

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="test2.WebForm2" %>

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

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title></title>
        </head>
        <body>
            <style type="text/css">
                .ContainerClass .RadInput
                {
                    width: 300px !important;
                }
                .ContainerClass .RadInput .riLabel
                {
                    color: red !important;
                    width: 50% !important;
                }
                .ContainerClass .rcbLabel
                {
                    color: Green !important;
                    background-color: yellow !important;
                    width: 200px !important;
                }
            </style>
            <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>
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                        </asp:ScriptReference>
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
                        </asp:ScriptReference>
                    </Scripts>
                </telerik:RadScriptManager>

                <div class="ContainerClass">
                    <telerik:RadComboBox ID="RadComboBox6" runat="server" Label="Short Label">
                    </telerik:RadComboBox>
                    <telerik:RadComboBox ID="RadComboBox5" runat="server" Label="This is a very very very long label.">
                    </telerik:RadComboBox>
                    <br /><br />

                    <telerik:RadComboBox ID="RadComboBox8" runat="server" Label="This is a very very very long label.">
                    </telerik:RadComboBox>
                    <telerik:RadComboBox ID="RadComboBox7" runat="server" Label="Short Label">
                    </telerik:RadComboBox>
                </div>
                <br /><br />

                <div class="ContainerClass">
                    <table style="width:90%">
                        <tr>
                            <td>
                                <telerik:RadComboBox ID="RadComboBox1" runat="server" Label="Short Label" Width="400px">
                                </telerik:RadComboBox>
                            </td>
                            <td>
                                <telerik:RadComboBox ID="RadComboBox3" runat="server" Label="This is a very very very long label." Width="400px">
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <telerik:RadComboBox ID="RadComboBox2" runat="server" Label="This is a very very very long label." Width="400px">
                                </telerik:RadComboBox>
                            </td>
                            <td>
                                <telerik:RadComboBox ID="RadComboBox4" runat="server" Label="Short Label" Width="400px">
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                    </table>
                </div>
            </form>
        </body>
    </html>
  11. Answer
    Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 13 Jan 2014 Link to this post

    Hello Boris,

    Thank you for sharing the exact code. Yes indeed unfortunately this functionality is not yet supported internally by RadComboBox. One possible simple workaround is to set the desired positioning with jQuery as in the code below:
    function pageLoad() {
                        var $ = $telerik.$;
     
                        $(".RadComboBox").each(function myfunction(index, item) {
                            var label = $(item).find('label'),
                                width = label.width();
                            label.css('margin-right', 400-width);
                        });
                    }

    Hope this will be helpful.

    Hope this 
    Regards,
    Plamen
    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.
  12. Boris
    Boris avatar
    275 posts
    Member since:
    Oct 2012

    Posted 13 Jan 2014 Link to this post

    That works perfectly.  Thanks.
      
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017