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

FormDecorator not working with Checkbox List in div overflow

10 Answers 370 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Curt
Top achievements
Rank 1
Curt asked on 13 Aug 2008, 10:24 PM
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


10 Answers, 1 is accepted

Sort by
0
Georgi Tunev
Telerik team
answered on 15 Aug 2008, 11:52 AM
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.
0
PaladinMRB
Top achievements
Rank 1
answered on 07 Jan 2009, 04:49 PM
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!


0
Martin
Telerik team
answered on 09 Jan 2009, 10:02 AM
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.
0
Kevin Pipher
Top achievements
Rank 1
answered on 19 Jan 2009, 08:57 PM
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.
0
Martin
Telerik team
answered on 20 Jan 2009, 09:39 AM
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.
0
Eric
Top achievements
Rank 1
answered on 17 Feb 2010, 11:21 AM
Hi, any new developments on this issue?
0
Ingo Buck
Top achievements
Rank 1
answered on 17 Feb 2010, 01:58 PM
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
0
Eric
Top achievements
Rank 1
answered on 18 Feb 2010, 02:29 PM
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.




0
Georgi Tunev
Telerik team
answered on 19 Feb 2010, 01:57 PM
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.
0
ortal
Top achievements
Rank 1
answered on 17 Jun 2014, 08:25 AM
hi,
you can use:  ControlToSkip="chackboxes"

<telerik:RadFormDecorator id="rd1" ControlToSkip="chackboxes" runat="server" DecoratedControl="All"/>
Tags
FormDecorator
Asked by
Curt
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
PaladinMRB
Top achievements
Rank 1
Martin
Telerik team
Kevin Pipher
Top achievements
Rank 1
Eric
Top achievements
Rank 1
Ingo Buck
Top achievements
Rank 1
ortal
Top achievements
Rank 1
Share this question
or