DropdownList startup position

8 posts, 0 answers
  1. Anand
    Anand avatar
    1 posts
    Member since:
    Jul 2010

    Posted 12 Sep 2013 Link to this post

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

    Posted 13 Sep 2013 Link to this post

    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:
    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gunnar
    Gunnar avatar
    28 posts
    Member since:
    Aug 2009

    Posted 06 Nov 2013 Link to this post

    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.
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 08 Nov 2013 Link to this post

    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
    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. Gunnar
    Gunnar avatar
    28 posts
    Member since:
    Aug 2009

    Posted 11 Nov 2013 Link to this post

    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.
    <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>
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 12 Nov 2013 Link to this post

    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="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.
  8. Gunnar
    Gunnar avatar
    28 posts
    Member since:
    Aug 2009

    Posted 18 Nov 2013 Link to this post

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

    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.

     

     

     

  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Nov 2013 Link to this post

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