RadDropDownList set DropDownWidth property to 100% doesn't work

[Blas]

Hello,

Following this post suggestion and for performance purposes I’ve changed RadComboBox by RadDropDownList:

 
http://blogs.telerik.com/blogs/13-02-06/meet-the-better-performing-and-more-lightweight-dropdownlist-for-asp.net-ajax

The component is located in a responsive grid and its width is set to 100%. That works fine with RadCombobox and either the textbox and the list of items adjust their width to 100%. But with RadDropDownList the list width is not adjust to 100%, is adjusted to  width of the max length item.

<div class="container_16">
    <div class="grid_4">
      <asp:Literal runat="server" Text="<%$Resources:htmlContadorPedidos %>" />
    <div>
     <div class="grid_3">
         <telerik:RadDropDownList ID="ContadorPedidos" runat="server" Width="100%"  DropDownWidth="100%" Culture="es-ES" RenderMode="Lightweight">
          </telerik:RadDropDownList>
     </div>
 </div>
 <div class="clear">
</div>

How can I adjust dropdownwidth to 100%?

Thanks
Roberto

[Shinu]

Hi,

Have two suggestions to achieve the same.

1) set width in pixel.
ASPX:

<telerik:RadDropDownList ID="ContadorPedidos" runat="server" Width="400px" DropDownWidth="400px" Culture="es-ES" RenderMode="Lightweight">
   <Items>
     <telerik:DropDownListItem Text="Absolut" />
     <telerik:DropDownListItem Text="Anual" />
    </Items>
</telerik:RadDropDownList>

2) Try to set appropriate width for rddlSlide class and then set 100% width for the dropdown.
CSS:

.rddlSlide
{
  width: 37% !important;
}

Hope this will help you.

Thanks,
Shinu.

[Blas]

Hello Shinu,

Thank you very much for your response.

The problem that I have is that the RadDropDownList is placed inside a percentual div grid ( a sort of responsive 960grid) and the widht depends on the total width of screen.

Regards
Roberto

[Nencho]

Hello Roberto,

I was able to replicate the described issue. This is a rendering problem and I had already forwarded it to our developer team for further investigation. Thank you for pointing that out. In addition, I had updated your Telerik Points.

Regards,
Nencho
Telerik

[Matthias]

Hi,

did you find any soultion for this meanwhile?

I am facing the same problem, when setting the width of my DropDownList in percent and trying to set the DropDownWidth to 100%.
The DropDownWidth does not have the same width as the width of the DropDownList, but the width of the longest DropDownListItem.

In addition, if I do not provide any width, the width of the DropDownList is set to the default width of 160px and not to the length of the longest DropDownListItem.

I would appreciate not always taking care of the width in pixel. This is not always desired, particularly, if you have resizeable pages, using percentage values as width.

Thanks in advance!

Matthias

[Shinu]

Hi Matthias,

Please have a look into the following code snippet to set the width of RadDropDownList.

ASPX:

<telerik:RadDropDownList ID="RadDropDownList1" runat="server" AutoPostBack="true"
    Width="100%">
    <Items>
        <telerik:DropDownListItem Text="Mail" />
        <telerik:DropDownListItem Text="Contacts" />
    </Items>
</telerik:RadDropDownList>

JavaScript:

<script type="text/javascript">
    function pageLoad() {
        var $ = $telerik.$;
        var dlistwidth = $('#RadDropDownList1').width();
        $('.rddlPopup').width(dlistwidth );
    }
</script>

Thanks,
Shinu.

[Matthias]

Hi Shinu,

thanks for your solution.
I had to modify it a little bit, because I am using a MasterPage.
Furthermore I want to change only the DropDownWidth of  RadDropDownList1.
When setting the width of class '.rddlPopup', all DropDownLists on the page will adopt the DropDownWidth of RadDropDownList1, which is not desired.

So this is my solution.

<script type="text/javascript">

     function pageLoad() {
         var $ = $telerik.$;
         var dlistwidth = $('#<%= RadDropDownList1.ClientID %>').width();
         $('#<%= RadDropDownList1.ClientID %>' + '_DropDown').width(dlistwidth);
    }

</script>

 
I do not use javascript very often, so I would appreciate any helpful suggestions.

Thanks!
Matthias

[miksh]

Facing the same issue. Nowadays the responsive design is common. Any update when can that could be fixed?

[Nencho]

Hello Michael,

The fix will be release not later but with our upcoming official release, scheduled for 18^th of June 2014.

Regards,
Nencho
Telerik

 

 

[Len Simmons]

Hi Telerik,

Was this resolved? I am using the very latest build and I am still not able to get the drop down list item width to default to being 100% of the control width in a responsive layout. It's quite annoying and not at all very pleasing from a UI perspective.

[Nencho]

Hello,

Actually a fix is implemented, regarding the reported issue and it fixes the problematic behavior of the dropdown, having a width set to 100px, when the 100% is set as value for its width. The default behavior with the other dropdown controls is to have the width set the 150 by default.

As for your inquiry, I would like to ask you for your feedback, since we attempt to implement an enhancement with all of the drop down controls. With setting the DropDownWidth to 100% what behavior do you expect :

• DropDown to acquire the width of the element, where the control is nested in? (which is the behavior of the input of the RadDropDownList)?
• DropDown to acquire the width of the input element of the RadDropDownList?

Regards,
Nencho
Telerik

 

 

[Len Simmons]

Ok.

So before I answer your question. Can you tell me what changes I need to make to this code in order for the drop down to be the full width of the dropdownlist control (when it is set to 100%).

​<telerik:RadDropDownList ID="dlCtrys" runat="server" Skin="BootStrap" EnableEmbeddedSkins="false" Width="100%"
DataTextField="Name" DataValueField="ISOCode" DropDownHeight="200px" OnItemSelected="dlCtrys_ItemSelected" >
<ItemTemplate>
<img src='/assets/img/flags/16/<%# Eval("ISOCode") %>.png' alt="" /> <%# Eval("Name") %>
</ItemTemplate>
</telerik:RadDropDownList>

I have tried it with DropDownWidth="100%" and it doesn't resize either.

To answer your question. I expect it to be the full width of the dropdownlist - the dropdownlist button (is that the same as the input width?).

[Nencho]

Hello Len,

As demonstrated in the previous posts, you could use the OnClientLoad client-side event of the RadDropDownList, in order to implement a bit of a custom logic using jQuery, in order to achieve the desired behavior :

<script type="text/javascript">
        function OnClientLoad(sender) {
            var $ = $telerik.$;
            var dlistwidth = $('#<%= dlCtrys.ClientID %>').width();
            $('#<%= dlCtrys.ClientID %>' + '_DropDown').width(dlistwidth);
        }
    </script>

In addition, thank you for your feedback.

Regards,
Nencho
Telerik

 

 

[Simon]

Where you have dynamically generated controls, and a lot of them, this isn't really an acceptable solution. This issue's been outstanding for over a year, and you've already suggested that there is a fix available. Is there a planned release date for this fix?

[Nencho]

Hello Simon,

The fix is already implemented and it will be available with our upcoming Q1 2015 Beta release, scheduled for Feb 4, 2015.

Regards,
Nencho
Telerik

 

 

[Derek Swanson]

Hi,

Was this actually fixed in the Q1 2015 beta?  I'm using the latest version and I'm still seeing the same issue as described above.  If it hasn't been implemented, do you know when it will be?

Thanks!

[Nencho]

Hello Derek,

The fix is implemented in our latest official release and it should behave as expected - the DropDown should acquire the Width of the text  area of the control. Could you please specify if this is the problem that you are experiencing and if so - please demonstrate us the implementation that you use, in order to try to replicate the problem locally.

Regards,
Nencho
Telerik

[Derek Swanson]

Hi Nencho,

I am sending a link to a screencast of what I see:  http://screencast.com/t/cSFBFrpgoOT.  When the drop down list loads initially, the width is 100% of the first item in the list, which is good.  When I change the selection to an item that is shorter and then click the dropdown list again, the width of the drop down is only as wide as the currently selected item.

For example, when you view the screencast, the first item in the dropdown is longer than the other 2 items.  The dropdown loads correctly and when I try to select another item, that also displays correctly.  However, when I switch to a much shorter item, the longer item gets squished.

The only work around I can find is to manually set the width of the DropDownWidth property which doesn't seem to be the best case scenario as I won't know how long each item in the dropdown list will be.  My expectation would be the drop down would expand to show the entire item in the list and not make the item wrap as seen in the screencast.

Thoughts?

Cheers,
Derek

[Nencho]

Hello Derek,

The demonstrated behavior in the video is quite strange and it seems that some custom functionality is applied on the controls, which makes me think that we are not on the same page, regarding the bug and the proper behavior after its implementation.

Therefore, I would like to ask you to demonstrate us your implementation, in order to perform some local tests and determine what is causing the problem at your end.

Just to sum up the idea of the bug and the behavior that is aimed after it's implementation - once you have set the 100% width of the RadDropDownList - the dropdown should also acquire this value and have the same width as the text area of the control.

Regards,
Nencho
Telerik