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

RadDropDownList set DropDownWidth property to 100% doesn't work

18 Answers 392 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Blas
Top achievements
Rank 1
Blas asked on 13 Jun 2013, 11:31 AM
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



18 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 13 Jun 2013, 12:46 PM
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.
0
Blas
Top achievements
Rank 1
answered on 13 Jun 2013, 01:59 PM
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



0
Nencho
Telerik team
answered on 18 Jun 2013, 12:46 PM
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
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
Matthias
Top achievements
Rank 1
answered on 29 Oct 2013, 09:59 AM
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
0
Shinu
Top achievements
Rank 1
answered on 29 Oct 2013, 11:41 AM
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.
0
Matthias
Top achievements
Rank 1
answered on 29 Oct 2013, 12:57 PM
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

0
miksh
Top achievements
Rank 1
Iron
answered on 28 Apr 2014, 12:28 PM
Facing the same issue. Nowadays the responsive design is common. Any update when can that could be fixed?
0
Nencho
Telerik team
answered on 01 May 2014, 06:43 AM
Hello Michael,

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

Regards,
Nencho
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Len Simmons
Top achievements
Rank 2
answered on 22 Sep 2014, 07:15 AM
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.


0
Nencho
Telerik team
answered on 26 Sep 2014, 11:14 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Len Simmons
Top achievements
Rank 2
answered on 26 Sep 2014, 01:41 PM
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?).
0
Nencho
Telerik team
answered on 01 Oct 2014, 11:07 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Simon
Top achievements
Rank 1
answered on 21 Jan 2015, 08:44 AM
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?
0
Nencho
Telerik team
answered on 21 Jan 2015, 09:42 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Derek Swanson
Top achievements
Rank 2
answered on 29 Nov 2015, 07:53 AM

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!

0
Nencho
Telerik team
answered on 02 Dec 2015, 02:39 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Derek Swanson
Top achievements
Rank 2
answered on 02 Dec 2015, 04:49 PM

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

0
Nencho
Telerik team
answered on 07 Dec 2015, 09:31 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
DropDownList
Asked by
Blas
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Blas
Top achievements
Rank 1
Nencho
Telerik team
Matthias
Top achievements
Rank 1
miksh
Top achievements
Rank 1
Iron
Len Simmons
Top achievements
Rank 2
Simon
Top achievements
Rank 1
Derek Swanson
Top achievements
Rank 2
Share this question
or