Hi There,
I have an issue while using dropdownlist control. I am assigning margin to body of the webpage. While assigning margin the startup position of the dropdown items are moving towards right side from the control actual position.
What would be solution for this issue. This issue is there even with datepicker too.
Regards
Anandh G
I have an issue while using dropdownlist control. I am assigning margin to body of the webpage. While assigning margin the startup position of the dropdown items are moving towards right side from the control actual position.
What would be solution for this issue. This issue is there even with datepicker too.
Regards
Anandh G
7 Answers, 1 is accepted
0
Shinu
Top achievements
Rank 2
Rank 2
answered on 13 Sep 2013, 06:57 AM
Hi Anand,
Please have a look at the following code that I have tried but i couldn't replicate the issue at my end.
ASPX:
CSS:
Please provide your full code it it doesn't help you.
Thanks,
Shinu.
Please have a look at the following code that I have tried but i couldn't replicate the issue at my end.
ASPX:
<body class="content"><form id="form1" runat="server"><div> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <telerik:RadDropDownList ID="RadDropDownList1" runat="server"> <Items> <telerik:DropDownListItem Text="item1" /> <telerik:DropDownListItem Text="item2" /> <telerik:DropDownListItem Text="item3" /> </Items> </telerik:RadDropDownList> <telerik:RadDatePicker ID="RadDatePicker1" runat="server"> </telerik:RadDatePicker> </div> </div></div></form></body>CSS:
<style> .content { height: 250px !important; width: 250px !important; border: 2px solid Red !important; margin-left: 10px; margin-top: 20px; }</style>Please provide your full code it it doesn't help you.
Thanks,
Shinu.
0
Gunnar
Top achievements
Rank 1
Rank 1
answered on 06 Nov 2013, 09:00 AM
I have a similar situation where the DropDownList items are displayed in the wrong position. I have pasted the suggested code to my page with the following results:
The position of the dropdown panel (rddlSlide) should be left:19, top:167
With the suggested style assigned to the body element, the position set on the rddlSlide item is left:31, top:193
With our ordinary body style (does not include any height, width or margin tags) I get:
In IE9: left:25, top:171
In FF18: left:187.5, top:171
In all cases, the dropdown box is displayed too low and too much to the right. In the FF case, the dropdown box is displayed completely outside of the control itself. And in all cases the position is set on the rddlSlide element, not inherited. DropDownList is the only RadControl that has this behavior, ComboBox and DatePicker works as expected.
The position of the dropdown panel (rddlSlide) should be left:19, top:167
With the suggested style assigned to the body element, the position set on the rddlSlide item is left:31, top:193
With our ordinary body style (does not include any height, width or margin tags) I get:
In IE9: left:25, top:171
In FF18: left:187.5, top:171
In all cases, the dropdown box is displayed too low and too much to the right. In the FF case, the dropdown box is displayed completely outside of the control itself. And in all cases the position is set on the rddlSlide element, not inherited. DropDownList is the only RadControl that has this behavior, ComboBox and DatePicker works as expected.
0
Hello Gunnar,
Can you please provide some more details on you particular scenario? For example the version of the RadControls that you are using, some code for the RadDropDownList and the css classes that you apply to the control would be very useful in replicating the issue from my side. Thus I could inspect it locally and assist you in the most efficient way.
Regards,
Kate
Telerik
Can you please provide some more details on you particular scenario? For example the version of the RadControls that you are using, some code for the RadDropDownList and the css classes that you apply to the control would be very useful in replicating the issue from my side. Thus I could inspect it locally and assist you in the most efficient way.
Regards,
Kate
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
Gunnar
Top achievements
Rank 1
Rank 1
answered on 11 Nov 2013, 08:37 AM
Hi, some additional information:
RadControls version 2013.2.717.40
I have tried to locate the style that cause the problem and I think the following code snippets might be used to reproduce the problem. When the style is used (and especially the "position:relative" setting), the problem is present. If that line is removed, the DropDownList work as expected.
When the style is active, the dropdown is diplayed as much to the right of the textbox as the MainContainer is indented from the left browser border.
RadControls version 2013.2.717.40
I have tried to locate the style that cause the problem and I think the following code snippets might be used to reproduce the problem. When the style is used (and especially the "position:relative" setting), the problem is present. If that line is removed, the DropDownList work as expected.
When the style is active, the dropdown is diplayed as much to the right of the textbox as the MainContainer is indented from the left browser border.
<style type="text/css">#DivMainContainer{ top: 0%; margin-top:-5px; left:auto; right:auto; position:relative; margin:0 auto; width:1032px; }</style><body> <div id="DivMainContainer"> <form id="Form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True" EnablePartialRendering="true" AsyncPostBackTimeout="360000" /> <telerik:RadDropDownList ID="RadDropDownList1" runat="server"> <Items> <telerik:DropDownListItem runat="server" Text="Item1" /> <telerik:DropDownListItem runat="server" Text="Item2" /> <telerik:DropDownListItem runat="server" Text="Item3" /> <telerik:DropDownListItem runat="server" Text="Item4" /> </Items> </telerik:RadDropDownList> </form></body>0
Hi Gunnar,
The issue that you experience is caused by the custom styles that you apply to the div element and its inner elements/controls. Please try placing the div with id="
Regards,
Kate
Telerik
The issue that you experience is caused by the custom styles that you apply to the div element and its inner elements/controls. Please try placing the div with id="
RadDropDownList1" inside the form element of the page and check how it goes from y our side. Regards,
Kate
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
Gunnar
Top achievements
Rank 1
Rank 1
answered on 18 Nov 2013, 04:08 PM
I've tried different scenarios and found the following:
On the containing div I have the style "margin:0 auto;" that seems to the the root cause of the problem (the "auto" part...).
On the containing div I have the style "margin:0 auto;" that seems to the the root cause of the problem (the "auto" part...).
When I switch order of the div and the form element as you suggest I get some different behavior; both wrong, but different.
With the order div-form the dropdown list will always drop down double the space from the left window border as is the main control. When the window is resized,the dropdown list will remain its position relative to the parent control.
With the order form-div (as you suggested) the dropdown list will always drop down exactly where it's supposed to be. When the window is resized, the dropdown list will remain its position relative to the left edge of the window, i.e. it will move away from its parent control.
In both scenarios style examination claim that the position is set directly on the dropdown element, not inherited from any style. On our site we (of course) have many different controls, amongst them various Telerik controls. The dropdownlist is the only control that has this kind of behavior.
0
Hello Gunnar,
Since the scenario that you have seems to be a custom one where you apply different styles to the various controls/elements that you have on the page I would kindly ask you to open a support ticket where you can attach a runnable project with all of the pages and controls that you are currently using and attach it to the post. Thus we can inspect it thoroughly and assist you in the most efficient way in resolving the issue that you are currently experiencing.
Regards,
Kate
Telerik
Since the scenario that you have seems to be a custom one where you apply different styles to the various controls/elements that you have on the page I would kindly ask you to open a support ticket where you can attach a runnable project with all of the pages and controls that you are currently using and attach it to the post. Thus we can inspect it thoroughly and assist you in the most efficient way in resolving the issue that you are currently experiencing.
Regards,
Kate
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.