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

Problems spacing multiple comboboxes within a table.

10 Answers 129 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Boris
Top achievements
Rank 1
Boris asked on 24 Dec 2013, 03:03 PM
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?

10 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 27 Dec 2013, 01:02 PM
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.
0
Boris
Top achievements
Rank 1
answered on 27 Dec 2013, 01:36 PM
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.
0
Plamen
Telerik team
answered on 30 Dec 2013, 09:19 AM
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.
0
Boris
Top achievements
Rank 1
answered on 02 Jan 2014, 01:32 PM
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?)
0
Plamen
Telerik team
answered on 07 Jan 2014, 12:25 PM
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.
0
Boris
Top achievements
Rank 1
answered on 07 Jan 2014, 01:51 PM
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.
0
Shinu
Top achievements
Rank 2
answered on 08 Jan 2014, 06:02 AM
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.
0
Boris
Top achievements
Rank 1
answered on 08 Jan 2014, 08:28 PM
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>
0
Accepted
Plamen
Telerik team
answered on 13 Jan 2014, 09:33 AM
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.
0
Boris
Top achievements
Rank 1
answered on 13 Jan 2014, 01:49 PM
That works perfectly.  Thanks.
  
Tags
ComboBox
Asked by
Boris
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Boris
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Share this question
or