Auto-added inline width?

[Alexander]

Hi,

i've already reported the problem with some mysterious inline width, added to my grid.
I can now see the same problem with radcombobox.
Here is the piece of markup:

<div style="width: 160px; visibility: visible;" hidecombo="true" class="RadComboBox RadComboBox_GreenSF LargeDropDownList floatRight" id="ddlClusterV2">
    <table style="border-width: 0pt; border-collapse: collapse; width: 160px;" summary="combobox" class="">
        <tbody><tr class="rcbReadOnly">
            <td class="rcbInputCell rcbInputCellLeft" style="width:100%;"><input type="text" readonly="readonly" value="All IBM Storwize & SVC Clusters" id="ddlClusterV2_Input" class="rcbInput" name="ddlClusterV2" autocomplete="off" tabindex="0"></td>
            <td class="rcbArrowCell rcbArrowCellRight"><a style="overflow: hidden;display: block;position: relative;outline: none;" id="ddlClusterV2_Arrow" tabindex="0">select</a></td>
        </tr>
    </tbody></table>
    <div style="z-index:6000;" class="rcbSlide"><div style="display:none;width:190px;" class="RadComboBoxDropDown RadComboBoxDropDown_GreenSF " id="ddlClusterV2_DropDown"><div style="width:100%;" class="rcbScroll rcbWidth"><ul style="list-style:none;margin:0;padding:0;zoom:1;" class="rcbList"><li class="rcbItem  rcbTemplate">
                    <span style="display:inline-block;width:155px;" class="itemText"><input type="checkbox" onclick="stopPropagation(event,this,'ddlClusterV2','' );" checked="checked" name="ddlClusterV2$i0$chbItem" id="ddlClusterV2_i0_chbItem" tabindex="0"><label for="ddlClusterV2_i0_chbItem">All SVC2 Clusters</label></span>
                </li><li class="rcbItem  rcbTemplate">
                    <span style="display:inline-block;width:155px;" class="itemText"><input type="checkbox" onclick="stopPropagation(event,this,'ddlClusterV2','' );" checked="checked" name="ddlClusterV2$i1$chbItem" id="ddlClusterV2_i1_chbItem" tabindex="0"><label for="ddlClusterV2_i1_chbItem">B4RPROD</label></span>
                </li><li class="rcbItem  rcbTemplate">
                    <span style="display:inline-block;width:155px;" class="itemText"><input type="checkbox" onclick="stopPropagation(event,this,'ddlClusterV2','' );" checked="checked" name="ddlClusterV2$i2$chbItem" id="ddlClusterV2_i2_chbItem" tabindex="0"><label for="ddlClusterV2_i2_chbItem">b4rpv01</label></span>
                </li><li class="rcbItem  rcbTemplate">
                    <span style="display:inline-block;width:155px;" class="itemText"><input type="checkbox" onclick="stopPropagation(event,this,'ddlClusterV2','' );" checked="checked" name="ddlClusterV2$i3$chbItem" id="ddlClusterV2_i3_chbItem" tabindex="0"><label for="ddlClusterV2_i3_chbItem">DEVSVC01</label></span>
                </li><li class="rcbItem  rcbTemplate">
                    <span style="display:inline-block;width:155px;" class="itemText"><input type="checkbox" onclick="stopPropagation(event,this,'ddlClusterV2','' );" checked="checked" name="ddlClusterV2$i4$chbItem" id="ddlClusterV2_i4_chbItem" tabindex="0"><label for="ddlClusterV2_i4_chbItem">DEVSVC02</label></span>
                </li></ul></div></div></div><input type="hidden" name="ddlClusterV2_ClientState" id="ddlClusterV2_ClientState" autocomplete="off" value="{"logEntries":[],"value":"","text":"All IBM Storwize & SVC Clusters","enabled":true,"checkedIndices":[]}" tabindex="0">
</div>

As you can see, strange 160px is added in two places! And it overrides my LargeDropDownList CSS class: as a result, my text does not fit into the textbox.

There is no place in my project, where I set inline width for RadComboBox.

[Kalina]

Hi Alexander,

When the RadComboBox control property Width is not set - a default width of 160px is applied to the control, because it needs this value in order to be rendered.
You can overcome the issue simply by setting the Width.

Best wishes,
Kalina
the Telerik team

[Felix]

Why is it hardcoded and not CSS driven?
I want to programmatically create such a control, but I want to control its width by CSS, not have to hard code it in order to override the 160px default.

[Shinu]

Hello Felix,

You can change the width of the RadComboBox using CSS by adding !important to it without hardcoding.
aspx:

<telerik:RadComboBox ID="RadComboBox1" runat="server" CssClass="combo">
</telerik:RadComboBox>

CSS:

<style type="text/css">
 .combo
   {
     width:155px !important;
   }
</style>

-Shinu.

[Peter]

Adding a CSS style width with !important didn't seem to work for me.

This inline 160px style is quite annoying on the RadNumericTextBox.

[Shinu]

Hello Peter,

You can either override the default CSS or set the width property of RadNumericTextBox. Here is the sample code.
aspx:

<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Width="50px"></telerik:RadNumericTextBox>

CSS:

<style type="text/css">
 .RadInput_Default
 {
   width: 50px !important;
 }
</style>

Thanks,
Shinu.

[mahmoud]

min-width: 80%;

http://www.telerik.com/help/aspnet-ajax/combobox-auto-width.html