Make dropdown width same as control width

10 posts, 1 answers
  1. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 09 Jul 2014 Link to this post

    In responsive design the DropDownTree control is usually configured with width=100%
    I wonder how in this case to make the dropdown width the same as the control width to make it responsive too?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Jul 2014 in reply to miksh Link to this post

    Hi miksh,

    Try to customize the class "rddtSlide" for changing the width of the DropDown as follows.

    CSS:
    .rddtSlide
    {
        width: 99% !important;
    }

    Let me know if you have any concern.

    Thanks ,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 10 Jul 2014 in reply to Princy Link to this post

    Thanks Princy but it doesn't work - the dropdown width expands to full window width and even goes beyond window.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Jul 2014 in reply to miksh Link to this post

    Ho miksh,

    By setting the width of 'rddtSlide' as 99%, it will take the width of the RadDropDownTree and it will take the 99% of the width mentioned in the RadDropDownTree. Please have a look into the sample code snippet which works fine at my end.

    ASPX:

    <telerik:RadDropDownTree ID="rdroptreeEmployees" runat="server" DataFieldID="EmployeeID" Width="25%" DataFieldParentID="ReportsTo" DataSourceID="sqldsEmployees" DataTextField="FirstName">
    </telerik:RadDropDownTree>

    CSS:
    .rddtSlide
    {
        width: 99% !important;
    }

    Thanks ,
    Princy.
  6. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 11 Jul 2014 in reply to Princy Link to this post

    Indeed, it works fine on a test page which have the only those controls. However, in real website scenario with 3rd party libraries like Bootstrap & custom css (which we have) that most likely won't work as the dropdown <div> with absolute positioning is created in the body container which might have different sizing to compare with the box sizing where the control is located so the width value in percentage format won't work.
    Try this code

    <%@ Page Language="C#" AutoEventWireup="true" %>
     
    <!DOCTYPE html>
    <head runat="server">
        <style>
            .rddtSlide {
                width: 99% !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
     
            <div>
                <h2>Works fine</h2>
                <telerik:RadDropDownTree ID="rdroptreeEmployees" runat="server"
                    Width="25%" RenderMode="Classic"
                    DataFieldID="EmployeeID"
                    DataFieldParentID="ReportsTo"
                    DataSourceID="sqldsEmployees" DataTextField="FirstName">
                </telerik:RadDropDownTree>
     
     
                <telerik:RadDropDownTree ID="RadDropDownTree1" runat="server"
                    Width="25%" RenderMode="Lightweight"
                    DataFieldID="EmployeeID"
                    DataFieldParentID="ReportsTo"
                    DataSourceID="sqldsEmployees" DataTextField="FirstName">
                </telerik:RadDropDownTree>
     
            </div>
     
            <div style="width: 600px;">
                <h2>Does not work</h2>
                <telerik:RadDropDownTree ID="RadDropDownTree2" runat="server"
                    Width="25%" RenderMode="Classic"
                    DataFieldID="EmployeeID"
                    DataFieldParentID="ReportsTo"
                    DataSourceID="sqldsEmployees" DataTextField="FirstName">
                </telerik:RadDropDownTree>
     
     
                <telerik:RadDropDownTree ID="RadDropDownTree3" runat="server"
                    Width="25%" RenderMode="Lightweight"
                    DataFieldID="EmployeeID"
                    DataFieldParentID="ReportsTo"
                    DataSourceID="sqldsEmployees" DataTextField="FirstName">
                </telerik:RadDropDownTree>
     
            </div>
        </form>
    </body>
    </html>
  7. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 16 Jul 2014 Link to this post

    Hello Michael,

    The width of the RadDropDownTree drop down can be expanded to fit the related element only by javascript. The reason for that is that the drop down is always rendered on top of the <form> tag.
    Please find attached a sample page, where we had set the width of the drop down in the function that is subscribed to the OnClientDropDownOpening handler.

    Regards,
    Magdalena
    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.

     
  8. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 16 Jul 2014 in reply to Princy Link to this post

    hi i am using raddropdown tree
    in that i have set dropdown width using 
         .rddtSlide {
                width: 70% !important;
            }
    its work fine but problem is that i have set raddrtopdown width 70% but it dont work 
    my header in raddropdown width is not set 70% how can i do that
    i have attached errror image 






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

    Posted 16 Jul 2014 in reply to Asutosh Link to this post

    Hi Asutosh,

    Please try the below CSS to achieve your scenario.

    CSS:
    .RadDropDownTree.RadDropDownTree_Silk
    {
        width: 70% !important;
    }

    Thanks,
    Shinu.
  10. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 17 Jul 2014 in reply to Shinu Link to this post

    hi shinu 
    thanks for your reply
    but it take it as 70px not in %
  11. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2014 in reply to Asutosh Link to this post

    Hi Asutosh,

    Unfortunately I couldn't replicate the issue at my end. Please elaborate your requirement for further help and provide your code also.

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017