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

Make dropdown width same as control width

9 Answers 339 Views

DropDownTree

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

9 Answers, 1 is accepted

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.

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

Accepted

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.

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