Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Make dropdown width same as control width

9 Answers 233 Views
DropDownTree
This is a migrated thread and some comments may be shown as answers.
miksh
Top achievements
Rank 1
Iron
miksh asked on 09 Jul 2014, 03:23 PM
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?

9 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 10 Jul 2014, 03:23 AM
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.
0
miksh
Top achievements
Rank 1
Iron
answered on 10 Jul 2014, 01:18 PM
Thanks Princy but it doesn't work - the dropdown width expands to full window width and even goes beyond window.
0
Princy
Top achievements
Rank 2
answered on 11 Jul 2014, 03:11 AM
dropdowntree.png
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.
0
miksh
Top achievements
Rank 1
Iron
answered on 11 Jul 2014, 12:57 PM
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>
0
Accepted
Magdalena
Telerik team
answered on 16 Jul 2014, 06:36 AM
expandPopup.rar
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.

 
0
Asutosh
Top achievements
Rank 1
answered on 16 Jul 2014, 07:33 AM
radtree.png
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 






0
Shinu
Top achievements
Rank 2
answered on 16 Jul 2014, 10:28 AM
Hi Asutosh,

Please try the below CSS to achieve your scenario.

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

Thanks,
Shinu.
0
Asutosh
Top achievements
Rank 1
answered on 17 Jul 2014, 09:54 AM
hi shinu 
thanks for your reply
but it take it as 70px not in %
0
Shinu
Top achievements
Rank 2
answered on 17 Jul 2014, 12:39 PM
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.
Tags
DropDownTree
Asked by
miksh
Top achievements
Rank 1
Iron
Answers by
Princy
Top achievements
Rank 2
miksh
Top achievements
Rank 1
Iron
Magdalena
Telerik team
Asutosh
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Share this question
or