Auto-added inline width?

7 posts, 0 answers
  1. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 19 Jul 2011 Link to this post

    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.
  2. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 22 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Felix
    Felix avatar
    1 posts
    Member since:
    Jan 2011

    Posted 02 Apr 2012 Link to this post

    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.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Apr 2012 Link to this post

    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.
  6. Peter
    Peter avatar
    98 posts
    Member since:
    Mar 2012

    Posted 09 May 2012 Link to this post

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

    This inline 160px style is quite annoying on the RadNumericTextBox.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 09 May 2012 Link to this post

    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.
  8. mahmoud
    mahmoud avatar
    1 posts
    Member since:
    Mar 2015

    Posted 12 Mar 2015 Link to this post

    min-width: 80%;

    http://www.telerik.com/help/aspnet-ajax/combobox-auto-width.html
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017