FormDecorator not working with Checkbox List in div overflow

11 posts, 0 answers
  1. Curt
    Curt avatar
    82 posts
    Member since:
    Sep 2012

    Posted 13 Aug 2008 Link to this post

    I have a checkboxlist inside a div:

    <div style="overflow:auto; height: 250px;"
                            <asp:CheckBoxList ID="cblStaff" runat="server" RepeatColumns="5" CellSpacing="25" DataTextField="FullName" DataValueField="Email" /> 
                            </div> 

    this works fine.  When I add the formdecorator to the page I now get a lot of white space being added to the end of the page.  When you click on a checkbox that you had to scroll to inside the div, the page jumps down into the white space (I assume where the checkbox would have been rendered if the overflow:auto was not there).

    Any ideas how to overcome this?  I am using 2008.2.723.35

    Thanks

    -Brent


  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 15 Aug 2008 Link to this post

    Hi sl6rp,

    I tried to reproduce the problem but everything is working as expected on my side. Could you please open a support ticket and provide the following:
    1. Sample page where the problem can be reproduced
    2. Screenshots of the observed behavior
    3. Detailed description of the desired behavior.
    We will check it and do our best to help.

    All the best,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. PaladinMRB
    PaladinMRB avatar
    8 posts
    Member since:
    Dec 2008

    Posted 07 Jan 2009 Link to this post

    Is there a solution to this? I have run in to a very similar problem:

    Using Telerik ASP.NET Ajax Controls, DLL v2008.3.1125.20

    Objective:
    Create a complex form with multiple floated ASP Panels containing the form-fields in a pop-up window. The popped-up window cannot be resized, therefore form-field panels which would exceed the height of the window should scroll within themselves.

    One panel will contain a variable number of ASP CheckBoxes in an ASP CheckBoxList. This panel is likely to require scrolling.

    Another panel will contain two different forms, of which one will be chosen based on the client's preferences. This is to be accomplished with a Telerik RadTabStrip to toggle the forms and a Telerik RadMultiPage heirarchy.

    Finally, the entire form page should be skinned consistently using CSS and the Telerik FormDecorator control.

    Problem:
    Before enabling the FormDecorator the form functions as expected.

    With the FormDecorator enabled, the form page exhibits odd behaviors:
    1. The page, which is styled to not scroll beyond the width or height of the fixed pop-up window size, shows a large scroll-able vertical height on the window. This height appears to coincide with the actual height of the CheckBoxList which is scrollable in it's container panel. This is undesireable. However setting the HTML tag to have "overflow:hidden;" in CSS hides the window scroll bar.
    2. When choosing the second tab in the tabbed panel, and checking or unchecking a checkbox which is "lower" in the panel the page jumps down unexpectedly, revealing whitespace. This is even worse when combined with the "disabled window scroll-bar work around" described previously which must be abandoned. This is because the user needs to scroll the page back up when it jumps, this jump is undesireable in the first place and does not occur when the FormDecorator is not enabled.

    Currently I am faced with two possible work arounds:
    1. Do not use FormDecorator, which is an objective requirement.
    2. Allow the panels to exceed the height of the popped-up window requiring scrolling when the ASP CheckBoxList is large. Again the stake holder does not want this behavior.

    Likely #2 would prevail over #1, however I would like to not have to abandon either objective. I can live with hiding the scroll bar on the window if necessary, but the jumping behavior is totally unacceptable.

    Therefore please consider the following example which illustrates the problem (at least on my machine):

    <%@ Page Language="VB" %> 
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <script runat="server"
         
        'Input the number of check boxes to create 
        Private CheckBoxes As Integer = 50 
         
        Public Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs) Handles MyBase.Load 
             
            If Not Page.IsPostBack Then 
                FillCheckBoxList() 
            End If 
             
        End Sub 
         
        Private Sub FillCheckBoxList() 
                                    
            For i As Integer = 1 To Me.CheckBoxes 
                Dim liTest As New System.Web.UI.WebControls.ListItem 
                With liTest 
                    .Text = String.Format("Test{0}", i) 
                    .Value = i 
                End With 
                Me.cblTest.Items.Add(liTest) 
            Next                 
             
        End Sub 
     
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
        <title>Form Decorator &amp; Large Vertical CheckBoxList Behavioral Test Page</title> 
        <style type="text/css" media="screen"
        <!-- 
             
            /*html { overflow: hidden; } /*Disable Scroll Bar On Page*/ 
            html, form, body { padding:0; margin:0; } 
            td { vertical-align: top; } 
            .wrapper{ 
                width: 100%; 
                height: 100%; 
                padding: 10px 0; 
                background-color: #088; 
            }         
            .form-container{ 
                margin-left: 10px; 
                float: left; 
                border:solid 2px #000; 
                background-color: #EEE; 
                padding:10px;  
                width:200px;  
                height:450px; 
            } 
        --> 
        </style> 
    </head> 
    <body> 
        <form id="fTest" runat="server"
         
        <asp:ScriptManager ID="smTest" runat="server" /> 
         
        <%--<telerik:RadFormDecorator ID="rfdTest" Skin="Web20" DecoratedControls="all" runat="server" />--%> 
         
        <div class="wrapper"
            <asp:Panel ID="pnlTest1" CssClass="form-container" ScrollBars="vertical" runat="server"
                <asp:CheckBoxList ID="cblTest" RepeatDirection="Vertical" runat="server" /> 
            </asp:Panel> 
            <asp:Panel ID="pnlTest2" CssClass="form-container" ScrollBars="None" runat="server"
                <telerik:RadTabStrip ID="rtsTest1" MultiPageID="mpTest1" Skin="Outlook" Width="100%" Align="Justify" runat="server"
                    <Tabs> 
                        <telerik:RadTab Text="Form 1" Value="rtForm1" PageViewID="rpvTest1" Selected="true" runat="server" /> 
                        <telerik:RadTab Text="Form 2" Value="rtForm2" PageViewID="rpvTest2" runat="server" /> 
                    </Tabs> 
                </telerik:RadTabStrip> 
                <telerik:RadMultiPage id="mpTest1" runat="server" SelectedIndex="0" Width="100%"
                    <telerik:RadPageView ID="rpvTest1" runat="server"
                        <table> 
                        <tr> 
                            <td>Input 1&nbsp;</td> 
                            <td><asp:TextBox ID="tbxTestForm1" TextMode="SingleLine" Width="100px" runat="server"/></td> 
                        </tr><tr
                            <td>Input 2&nbsp;</td> 
                            <td><asp:TextBox ID="tbxTestForm2" TextMode="SingleLine" Width="100px" runat="server"/></td> 
                        </tr><tr
                            <td>Input 3&nbsp;</td> 
                            <td><asp:TextBox ID="tbxTestForm3" TextMode="SingleLine" Width="100px" runat="server"/></td> 
                        </tr><tr
                            <td>Input 4&nbsp;</td> 
                            <td><asp:TextBox ID="tbxTestForm4" TextMode="SingleLine" Width="100px" runat="server"/></td> 
                        </tr><tr
                            <td>Selection&nbsp;</td> 
                            <td> 
                                <asp:RadioButtonList ID="rblTestForm1" RepeatDirection="Vertical" runat="server"
                                    <asp:ListItem Text="Test1" Value="1" /> 
                                    <asp:ListItem Text="Test2" Value="2" /> 
                                    <asp:ListItem Text="Test3" Value="3" /> 
                                    <asp:ListItem Text="Test4" Value="4" /> 
                                    <asp:ListItem Text="Test5" Value="5" /> 
                                </asp:RadioButtonList> 
                            </td> 
                        </tr> 
                        </table>             
                        <fieldset> 
                            <legend>Options 1</legend> 
                            <div> 
                                <asp:CheckBox ID="cbTestForm1" Text="Test 1" runat="server" /> 
                            </div> 
                            <div> 
                                <asp:CheckBox ID="cbTestForm2" Text="Test 2" runat="server" /> 
                            </div>             
                        </fieldset>             
                        <div style="clear:both;">&nbsp;</div> 
                        <fieldset> 
                            <legend>Options 2</legend> 
                            <div> 
                                <asp:CheckBox ID="cbTestForm3" Text="Test 3" runat="server" /> 
                            </div> 
                            <div> 
                                <asp:CheckBox ID="cbTestForm4" Text="Test 4" runat="server" /> 
                            </div> 
                        </fieldset> 
                    </telerik:RadPageView> 
                    <telerik:RadPageView ID="rpvTest2" runat="server"
                    <table> 
                        <tr> 
                            <td>Input 5&nbsp;</td> 
                            <td><asp:TextBox ID="tbxTestForm5" TextMode="SingleLine" Width="100px" runat="server"/></td> 
                        </tr><tr
                            <td>Input 6&nbsp;</td> 
                            <td><asp:TextBox ID="tbxTestForm6" TextMode="SingleLine" Width="100px" runat="server"/></td> 
                        </tr><tr
                            <td>Input 7&nbsp;</td> 
                            <td><asp:TextBox ID="tbxTestForm7" TextMode="SingleLine" Width="100px" runat="server"/></td> 
                        </tr><tr
                            <td>Input 8&nbsp;</td> 
                            <td><asp:TextBox ID="tbxTestForm8" TextMode="SingleLine" Width="100px" runat="server"/></td> 
                        </tr><tr
                            <td>Selection&nbsp;</td> 
                            <td> 
                                <asp:RadioButtonList ID="rblTestForm2" RepeatDirection="Vertical" runat="server"
                                    <asp:ListItem Text="Test6" Value="6" /> 
                                    <asp:ListItem Text="Test7" Value="7" /> 
                                    <asp:ListItem Text="Test8" Value="8" /> 
                                    <asp:ListItem Text="Test9" Value="9" /> 
                                    <asp:ListItem Text="Test10" Value="10" /> 
                                </asp:RadioButtonList> 
                            </td> 
                        </tr> 
                        </table>             
                        <fieldset> 
                            <legend>Options 1</legend> 
                            <div> 
                                <asp:CheckBox ID="cbTestForm5" Text="Test 5" runat="server" /> 
                            </div> 
                            <div> 
                                <asp:CheckBox ID="cbTestForm6" Text="Test 6" runat="server" /> 
                            </div>             
                        </fieldset>                     
                        <fieldset> 
                            <legend>Options 2</legend> 
                            <div> 
                                <asp:CheckBox ID="cbTestForm7" Text="Test 7" runat="server" /> 
                            </div> 
                            <div> 
                                <asp:CheckBox ID="cbTestForm8" Text="Test 8" runat="server" /> 
                            </div> 
                        </fieldset> 
                    </telerik:RadPageView> 
                </telerik:RadMultiPage> 
            </asp:Panel> 
        </div> 
         
        </form> 
    </body> 
    </html> 
     

    Since this will run in a normal browser window, please resize your browser such that the aqua background is fully visible and the whitespace below it is not. Experience the form without FormDecorator enabled (it is commented currently). Then uncomment the FormDecorator and see that the scroll bar is longer than the Aqua background and tab to "Form 2" in panel 2 and click some checkboxes in the fieldsets near the bottom to experience the jumping behavior.

    For reference my environment is:  Dell Precision M4400 Laptop / WindowsXP Professional v2002 SP3 / Internet Explorer v7.0.5730.13

    Any help would be appreciated on this issue, if a trouble ticket is required please advise.

    Thanks!


  5. Martin
    Admin
    Martin avatar
    585 posts

    Posted 09 Jan 2009 Link to this post

    Hello,

    This is a common issue with absolutely positioned form controls (we are hiding the original checkboxes and radiobuttons with position: absolute and left: -9999px) when getting focus in Internet Explorer in overflown parents. The solution for that particular case is to add onclick="window.location = '#';" in the server declaration of the checkbox. This is a temporary solution, and we are still working on solving the issue with a rock solid solution.

    On the scrollbar issue - I believe it is caused because the html {overflow: hidden} in the code that has been provided is commented and thus - not applied.

    Greetings,
    Martin Ivanov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Kevin Pipher
    Kevin Pipher avatar
    4 posts
    Member since:
    Nov 2005

    Posted 19 Jan 2009 Link to this post

    Hi Martin,

    Your suggestion of attaching window.location='#' to the onclick event of the radio / checkbox objects only works when you do not have to scroll down to see the input controls.

    If to access the radio buttons or checkboxes, you must scroll down the page, then executing window.location="#" causes the page to scroll to the very top when clicking. This is just as bad a behavior as the original issue of scrolling to the very bottom.

    Are there any other more usable workarounds with JavaScript to force the scrolling to cancel?

    As a side note - the issue only occurs in IE. FF works fine regardless of scroll position or CSS overflow settings.
  7. Martin
    Admin
    Martin avatar
    585 posts

    Posted 20 Jan 2009 Link to this post

    Hello Kevin,

    Unfortunately, you have created a rather complex form, and as seen from your example page, the issue is observed on initially hidden elements, which combined with the absolute position of the original checkboxes leads to this unwanted behavior. At present we cannot provide you with a bulletproof solution, as it is obvious that the problem may be fixed by changing the position of its immediate parent. However, here is a fix for your particular case. Add the following CSS in the head section of your webpage or in your external styles:

    .radfd_fieldset
    {
         position: relative;
    }

    Regards,
    Martin Ivanov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Eric
    Eric avatar
    24 posts
    Member since:
    Jan 2008

    Posted 17 Feb 2010 Link to this post

    Hi, any new developments on this issue?
  9. Ingo Buck
    Ingo Buck avatar
    9 posts
    Member since:
    Jan 2009

    Posted 17 Feb 2010 Link to this post

    Yes, I still have the same problem.

    I'm using version 2009.2.701.35.

    Using a large number of ListItem in a CheckBoxList within a fixed height DIV (overflow: auto), IE 8 jumps down to an empty page area.

    The css patch did not help. I guess you changed the class names?

    Beside that, the browser has a high CPU-load on very keystroke in a radtextbox. Not just after loading.
    As soon as CheckBox and RadioButton are excluded from decoration, everything is ok.

    Any ideas?

    regards,
    Ingo
  10. Eric
    Eric avatar
    24 posts
    Member since:
    Jan 2008

    Posted 18 Feb 2010 Link to this post

    Try this.

    .rfdRealInput
    {
        top: -99999px;
    }

    it worked for me, but I am still waiting a solution from Telerik team since I have no idea what this change breaks in other controls.




  11. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 19 Feb 2010 Link to this post

    Hi Eric,

    This class is specific for RadFormDecorator and it should not affect other controls. If you want, you could send us a small sample with your exact setup and the problem itself and we will check if there is another solution that we could suggest.


    Greetings,
    Georgi Tunev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  12. ortal
    ortal avatar
    2 posts
    Member since:
    Jun 2014

    Posted 17 Jun 2014 Link to this post

    hi,
    you can use:  ControlToSkip="chackboxes"

    <telerik:RadFormDecorator id="rd1" ControlToSkip="chackboxes" runat="server" DecoratedControl="All"/>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017