RadDropDownList set DropDownWidth property to 100% doesn't work

19 posts, 0 answers
  1. Blas
    Blas avatar
    55 posts
    Member since:
    Dec 2007

    Posted 13 Jun 2013 Link to this post

    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



  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Jun 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Blas
    Blas avatar
    55 posts
    Member since:
    Dec 2007

    Posted 13 Jun 2013 Link to this post

    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



  5. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 18 Jun 2013 Link to this post

    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.
  6. Matthias
    Matthias avatar
    3 posts
    Member since:
    Oct 2013

    Posted 29 Oct 2013 Link to this post

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

    Posted 29 Oct 2013 Link to this post

    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.
  8. Matthias
    Matthias avatar
    3 posts
    Member since:
    Oct 2013

    Posted 29 Oct 2013 Link to this post

    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

  9. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 28 Apr 2014 in reply to Matthias Link to this post

    Facing the same issue. Nowadays the responsive design is common. Any update when can that could be fixed?
  10. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 01 May 2014 Link to this post

    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.

     
  11. Len Simmons
    Len Simmons avatar
    6 posts
    Member since:
    Feb 2009

    Posted 22 Sep 2014 in reply to Nencho Link to this post

    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.


  12. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 26 Sep 2014 Link to this post

    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.

     
  13. Len Simmons
    Len Simmons avatar
    6 posts
    Member since:
    Feb 2009

    Posted 26 Sep 2014 in reply to Nencho Link to this post

    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?).
  14. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 01 Oct 2014 Link to this post

    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.

     
  15. Simon
    Simon avatar
    1 posts
    Member since:
    Mar 2014

    Posted 21 Jan 2015 in reply to Nencho Link to this post

    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?
  16. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 21 Jan 2015 Link to this post

    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.

     
  17. Derek Swanson
    Derek Swanson avatar
    4 posts
    Member since:
    May 2010

    Posted 29 Nov 2015 in reply to Nencho Link to this post

    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!

  18. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 02 Dec 2015 Link to this post

    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
  19. Derek Swanson
    Derek Swanson avatar
    4 posts
    Member since:
    May 2010

    Posted 02 Dec 2015 in reply to Nencho Link to this post

    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

  20. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 07 Dec 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017