Scollbars not show RadWindow IE 9

[Kevin]

I am having trouble getting scrollbars to show up in IE 9,11 for RadWindows.  If I put the window in compatability mode ie 8, the scrollbars show in teh radwindows just fine, but as soon as I turn off compatability mode the scrollbars disappear and I have to tab to ge to the bottom of the screen and then shift tab to get back up the screen.  Where are the scroll bars?????

<telerik:RadWindow ID="radLease" runat="server" InitialBehaviors="Reload" ShowContentDuringLoad="false" CenterIfModal="true" Modal="true" VisibleStatusbar="false" Behaviors="close" OnClientClose="RefreshParentPage" />

function LoadWindow(LeaseId) {
               var radLease = $find("<%= radLease.ClientID%>");
               //get the value of the hidden field first to see if exists if not get the ddl value
               var armory2 = document.getElementById("<%=HFArmoryID.ClientID%>").value;
               var armorypass;

               if (armory2 == '') {
                   var ddl = document.getElementById("<%=ddlArmory.ClientID%>");
                   armorypass = ddl.options[ddl.selectedIndex].value;
               }
               else {
                   armorypass = armory2
               }

               radLease.setUrl("../TaccAdmin/Lease.aspx?Armory=" + armorypass + "&Lease=" + LeaseId);
               radLease.show();
               radLease.maximize();
           }


<form id="form1" runat="server">
       <telerik:RadScriptManager ID="rdScriptManager" runat="server"></telerik:RadScriptManager>
       <table class="usageCenterMargin">
           <tr>
               <td class="usageHeader">Organization Info</td>
           </tr>
       </table>
       <table class="usagebody">
           <tr>
               <td style="height:15px"></td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Organization Type:</td>
               <td>
                   <asp:DropDownList ID="ddlOrgType" runat="server"></asp:DropDownList>
                   <asp:RequiredFieldValidator ID="valOrgType" runat="server" ControlToValidate="ddlOrgType" ErrorMessage="**" ForeColor="Firebrick" InitialValue="0" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Event Type:</td>
               <td>
                   <asp:TextBox ID="txtEventType" runat="server" Width="220px" MaxLength="20"></asp:TextBox>
                   <asp:RequiredFieldValidator ID="valEventType" runat="server" ControlToValidate="txtEventType" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Organization Name:</td>
               <td>
                   <asp:TextBox ID="txtOrgName" runat="server" Width="220px" MaxLength="30"></asp:TextBox>
                   <asp:RequiredFieldValidator ID="valOrgName" runat="server" ControlToValidate="txtOrgName" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Organization Phone:</td>
               <td>
                   <asp:TextBox ID="txtOrgPhone" runat="server" Width="220px" MaxLength="12"></asp:TextBox>
                   <asp:RequiredFieldValidator ID="valOrgPhone" runat="server" ControlToValidate="txtOrgPhone" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Organization Address:</td>
               <td>
                   <asp:TextBox ID="txtAddress" runat="server" Width="220px" MaxLength="25"></asp:TextBox>
                   <asp:RequiredFieldValidator ID="valAddress" runat="server" ControlToValidate="txtAddress" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Organization City:</td>
               <td><asp:TextBox ID="txtCity" runat="server" Width="120px" MaxLength="25"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="valCity" runat="server" ControlToValidate="txtCity" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
                     State:
                   <asp:TextBox ID="txtState" runat="server" Width="40px" MaxLength="2"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="valState" runat="server" ControlToValidate="txtState" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
                     Zip:
                   <telerik:RadNumericTextBox ID="txtZip" runat="server" Width="80px" MaxLength="5" NumberFormat-AllowRounding="false" NumberFormat-GroupSizes="5" NumberFormat-DecimalDigits="0" />
                    <asp:RequiredFieldValidator ID="valZip" runat="server" ControlToValidate="txtZip" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Alcohol Served:</td>
               <td>
                   <asp:RadioButtonList ID="rblAlcohol" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
                       <asp:ListItem Value="1" Text="YES   "></asp:ListItem>
                       <asp:ListItem Value="0" Text="NO"></asp:ListItem>
                   </asp:RadioButtonList>
                   <asp:RequiredFieldValidator ID="valAlcohol" runat="server" ControlToValidate="rblAlcohol" ErrorMessage="**" InitialValue="" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Gratis Lease:</td>
               <td>
                   <asp:RadioButtonList ID="rblGratis" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
                       <asp:ListItem Value="1" Text="YES   "></asp:ListItem>
                       <asp:ListItem Value="0" Text="NO"></asp:ListItem>
                   </asp:RadioButtonList>
                   <asp:RequiredFieldValidator ID="valGratis" runat="server" ControlToValidate="rblGratis" InitialValue="" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right;vertical-align:top">Gratis Reason:</td>
               <td><asp:TextBox ID="txtGratis" runat="server" Width="400px"  Height="40px" TextMode="MultiLine"></asp:TextBox></td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Facility Fee:</td>
               <td>
                   <telerik:RadNumericTextBox ID="txtLeaseAmount" runat="server" Width="80px" MaxLength="8" NumberFormat-DecimalDigits="2"></telerik:RadNumericTextBox>
                   <asp:RequiredFieldValidator ID="valLeaseAmt" runat="server" ControlToValidate="txtLeaseAmount" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
                     Custodial Fees:
                  <telerik:RadNumericTextBox ID="txtWorkerAmount" runat="server" Width="80px" MaxLength="8" NumberFormat-DecimalDigits="2"></telerik:RadNumericTextBox>
                   <asp:RequiredFieldValidator ID="valWorkerAmt" runat="server" ControlToValidate="txtWorkerAmount" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="height:15px"></td>
           </tr>
       </table>
       <table class="usageCenter">
           <tr>
               <td class="usageHeader">Lease Specifics</td>
           </tr>
       </table>
       <table class="usagebody">
           <tr>
               <td style="height:15px"></td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Est. Attendance:</td>
               <td>
                   <telerik:RadNumericTextBox ID="txtAttendance" runat="server" Width="80px" MaxLength="4" NumberFormat-AllowRounding="false" NumberFormat-DecimalDigits="4"></telerik:RadNumericTextBox>
                    <asp:RequiredFieldValidator ID="valAttendance" runat="server" ControlToValidate="txtAttendance" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Vacate Within:</td>
               <td>
                   <telerik:RadNumericTextBox ID="txtVacate" runat="server" Width="80px" MaxLength="1" NumberFormat-AllowRounding="false" NumberFormat-DecimalDigits="1"></telerik:RadNumericTextBox>
                    <asp:RequiredFieldValidator ID="valvacate" runat="server" ControlToValidate="txtVacate" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Occurances:</td>
               <td>
                   <asp:DropDownList ID="ddlOccurances" runat="server"></asp:DropDownList>
                    <asp:RequiredFieldValidator ID="valOccur" runat="server" ControlToValidate="ddlOccurances" InitialValue="0" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Lease Begin:</td>
               <td>
                   <telerik:RadDatePicker ID="dtbegin" runat="server" Width="100px"></telerik:RadDatePicker>
                    <asp:RequiredFieldValidator ID="valdtBegin" runat="server" ControlToValidate="dtbegin" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
                      Lease End:
                    <telerik:RadDatePicker ID="dtEnd" runat="server" Width="100px"></telerik:RadDatePicker>
                    <asp:RequiredFieldValidator ID="valdtEnd" runat="server" ControlToValidate="dtEnd" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Time Begin:</td>
               <td>
                   <telerik:RadTimePicker ID="dtTimeBegin" runat="server" Width="100px" ></telerik:RadTimePicker>
                    <asp:RequiredFieldValidator ID="valTimeBegin" runat="server" ControlToValidate="dtTimeBegin" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
                      Time End:
                   <telerik:RadTimePicker ID="dtTimeEnd" runat="server" Width="100px" ></telerik:RadTimePicker>
                    <asp:RequiredFieldValidator ID="valTimeEnd" runat="server" ControlToValidate="dtTimeEnd" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="height:15px"></td>
           </tr>
       </table>
       <table class="usageCenter">
           <tr>
               <td class="usageHeader">Armory Specifics</td>
           </tr>
       </table>
       <table class="usagebody">
           <tr>
               <td style="height:15px"></td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Armory Portions:</td>
               <td>
                   <telerik:RadComboBox ID="ddlPortion" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" EmptyMessage="Pick Armory Portions"></telerik:RadComboBox>
                    <asp:RequiredFieldValidator ID="valPortion" runat="server" ControlToValidate="ddlPortion" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right">Armory Provided:</td>
               <td>
                   <telerik:RadComboBox ID="ddlProvided" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" EmptyMessage="Pick Armory Provisions"></telerik:RadComboBox>
                    <asp:RequiredFieldValidator ID="valProvided" runat="server" ControlToValidate="ddlProvided" ErrorMessage="**" ForeColor="Firebrick" SetFocusOnError="true" />
               </td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right;vertical-align:top">Changes to Leased Portion:</td>
               <td><asp:TextBox ID="txtLeasedPortion" runat="server" Width="400px"  Height="40px" TextMode="MultiLine"></asp:TextBox></td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right;vertical-align:top">Remarks:</td>
               <td><asp:TextBox ID="txtRemarks" runat="server" Width="400px"  Height="40px" TextMode="MultiLine"></asp:TextBox></td>
           </tr>
           <tr>
               <td style="width:25%;text-align:right"></td>
               <td>
                   <asp:LinkButton ID="lnkDraft" runat="server" Text="Draft" ToolTip="Use this to save Lease Until Leasee comes to sign agreement"></asp:LinkButton>

                   <asp:LinkButton ID="lnkSubmit" runat="server" Text="Submit" ToolTip="Lease will not be able to be changed after submitted"></asp:LinkButton>

                   <asp:LinkButton ID="lnkCancel" runat="server" Text="Cancel" ToolTip="Close page and save nothing"></asp:LinkButton>
               </td>
           </tr>
           <tr>
               <td style="height:15px"></td>
           </tr>
       </table>
       <asp:HiddenField ID="HFArmory" runat="server" /><asp:HiddenField ID="HFLeaseId" runat="server" />
   </form>

[Marin Bratanov]

Hello Kevin,

I do not see a reason for missing scrollbars in the provided code and the most likely reason for such an issue is CSS in the content page that removes the scrollbars, e.g., something like:

html, body, form
{
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
}

which is commonly found in pages designed to occupy 100% of their parent container or provide for an easy to use header/footer, but they must also make sure they have a scrollable container that lets the user scroll.

I also tried a sample built on top of your code and it seemed to work as expected with me. I am attaching it here together with a short video from my experiment so you can compare it with your setup to try and find any differences that cause the issue, and confirm if I am missing something.  I am usingng the latest version and if you are not, I advise that you upgrade and test again.

Regards,

Marin Bratanov
Telerik

 

 

[Kevin]

Hi Marin,

Not doing anthing to my knowledge out of the ordinary, I am attaching my CSS, sorry forgot too.  But it has none of your mentioned stuff on radwindow.

Main page CSS for radgrid
.CentDiv80 {
    width:80%;
    margin-top:20px;
    margin-right:auto;
    margin-left:auto;
}

mainpage Css for centering links to Radwindow
.centDiv100 {
    margin-top:50px;
    text-align:center;
    margin:0 auto;
    width:100%;
}

CSS that is on tables on radwindow
.usageCenterMargin {
    width:60%;
    margin-top:30px;
    margin:0 auto;
}

.usageHeader {
    color: white;
    font: bold 14px auto "Trebuchet MS", Verdana;
    text-align:center;
    margin: 0 auto;
    background-color: #21374C;
    width:100%;
    height:25px;
    border:solid 2px black;
}

.usagebody {
    width:60%;
    margin:0 auto;
    background-color:antiquewhite;
    border:solid 2px black;
    border-radius:10px;
}

[Marin Bratanov]

Hi Kevin,

Indeed, those styles should not cause an issue and they do not on my end. I am attaching the test pages with the CSS applied. Please modify them so they show the issue you are experiencing and send them back to me. Without being able to debug a problem, it is extremely difficult to offer a concrete answer.


Regards,

Marin Bratanov
Telerik

 

 

[Kevin]

Hi Marin,
Thank for sticking with me here, I cannot repost you files as my netowrk will not allow me to create zip files to send.  So I am hoping this helps more.  I created another page that is very similar and took jpeg images, you can see one is in compatability mode other is not.  the following is all the code for the pages.  1st is the javscript that controls with radwindow on the page, then radwindow code then the radwindow html.

.approvalHeader {
    background-color: #21374C;
    border:solid 2px black;
    font: bold 14px auto "Trebuchet MS", Verdana;
    color: white;
    text-align:center;
    height:25px;
    width:100%;
}

.approvalbody {
    width:80%;
    margin-top:20px;
    margin-right:auto;
    margin-left:auto;
    background-color:antiquewhite;
    border:solid 2px black;
    overflow:auto;
}

<link href="../Lease.css" rel="stylesheet" />
        <script type="text/javascript">
            function LoadWindow(LeaseId, window) {
                var radLease = $find("<%= radLease.ClientID%>");
                var armorypass = 0;

                if (window == 0)
                {
                    radLease.setUrl("../TaccAdmin/Lease.aspx?Armory=" + armorypass + "&Lease=" + LeaseId);
                    radLease.show();
                    radLease.maximize();
                }
                else if (window == 1)
                {
                    radLease.setUrl("Approval.aspx?Lease=" + LeaseId);
                    radLease.set_width("700");
                    radLease.set_height("300");
                    radLease.show();
                }
            }
        </script>


 <telerik:RadWindow ID="radLease" runat="server" InitialBehaviors="Reload" ShowContentDuringLoad="false" CenterIfModal="true" Modal="true" VisibleStatusbar="false" Behaviors="close" Skin="Web20" />

Actual radwindow that pops-up
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Manage Lease Approvals</title>
    <link href="../Lease.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager" runat="server"></telerik:RadScriptManager>
        <table class="approvalbody">
            <tr>
                 <td class="approvalHeader" colspan="2">Manage Lease Approval</td>
            </tr>
            <tr>
                <td style="height:5px"></td>
            </tr>
            <tr>
                <td style="width:auto;text-align:right">Approve/Disapprove:</td>
                <td>
                    <asp:RadioButtonList ID="rblapprove" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
                        <asp:ListItem Value="1" Text="YES  "></asp:ListItem>
                        <asp:ListItem Value="0" Text="NO"></asp:ListItem>
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr>
                <td style="height:5px"></td>
            </tr>
            <tr>
                <td style="width:auto;text-align:right;vertical-align:top">Notes:</td>
                <td><telerik:RadTextBox ID="txtNotes" runat="server" Width="340px" Height="50px" TextMode="MultiLine"></telerik:RadTextBox></td>
            </tr>
            <tr>
                <td style="height:5px"></td>
            </tr>
            <tr>
                <td style="width:auto;text-align:right">Uploads:</td>
                <td><telerik:RadAsyncUpload ID="rdUpload" runat="server" AllowedFileExtensions="pdf" Skin="Web20"></telerik:RadAsyncUpload></td>
            </tr>
            <tr>
                <td style="height:5px"></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <asp:LinkButton ID="lnkSubmit" runat="server" Text="Submit"></asp:LinkButton>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

[Marin Bratanov]

Hi Kevin,

This code should not causes issues in either mode, the browser should be able to display the scrollbars in any case. I just tried that on IE9 and IE11 and I am attaching here screenshots and the files I used for testing. If scrollbars are not shown in one mode, this is, most likely, due to an issue with the generic layout and CSS on that page and this is what needs to be examined. It is also important that all pages are valid XHTML. If you are still unable to resolve this issue, I advise that you open a support ticket and send us a sample we can use because the forums do not allow zip attachments. If a sample is not an option, at least a live URL where we can inspect the problem (you may want to do this privately as well) can help.


Regards,

Marin Bratanov
Telerik