I have the following css defined in a style applied to a panel in my aspx page.
max-height: 70%; overflow: auto;
max-width: 70%; overflow: auto;
In Mozilla, I can resize my browser window and the panel will properly display scroll bars when the browser window becomes too small to contain the full content of the panel. This works great.
In IE8, the max-height css appears to have higher priority than the max-width css.
For instance:
1) When making the browser window smaller vertically, the width scrollbar will show up properly on the bottom of the panel.
2) When making the browser window smaller horizontally, the height scrollbar will show up properly on the bottom of the panel.
3) When making the browser window smaller vertically, the width scrollbar will show up properly on the bottom of the panel, but then if I continue to make the browser window smaller horizontally as well, then the height scrollbar appears, but the width scrollbar disappears. If I make the browser window long enough to accomodate the height of the panel, then the width scrollbar reappears.
How do I make IE8 show both scroll bar when appropriate instead of just the height one? This works correctly in Firefox.
Here is a sample page that exhibits the problem exactly as it exists in my primary page. Click on "Show Popup" and then try to make the browser screen smaller. You'll see the popup scroll bars behave the way described above.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="css.aspx.cs" Inherits="Sandbox.css" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
.Background
{
filter: Alpha(Opacity=40);
opacity: 0.4;
background-color: #CCCC99;
z-index:1000;
}
.Popup
{
border: solid 1px #c0c0c0;
background:#FFFFFF;
padding: 0px 10px 10px 10px;
position:absolute;
padding-top: 10px;
max-height: 90%; overflow: auto;
max-width: 90%; overflow: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:Button ID="Button1" runat="server" Text="Show Popup" />
<asp:panel ID="Panel1" runat="server" ScrollBars="Auto" CssClass="Popup">
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Label3"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" Text="Label4"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<asp:Button ID="Button2" runat="server" Text="Ok" />
<asp:Button ID="Button3" runat="server" Text="Cancel" />
</asp:panel>
<ajaxToolKit:ModalPopupExtender runat="server" TargetControlID="Button1" PopupControlID="Panel1"
BackgroundCssClass="Background" OkControlID="Button2" CancelControlID="Button3" />
<table>
<tr>
<td>
<table>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="Label1"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox10" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label6" runat="server" Text="Label2"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox11" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox12" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="Label3"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox13" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox14" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label8" runat="server" Text="Label4"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox15" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox16" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<asp:Label ID="Label9" runat="server" Text="Label1"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox17" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox18" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label10" runat="server" Text="Label2"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox19" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox20" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label11" runat="server" Text="Label3"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox21" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox22" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label12" runat="server" Text="Label4"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox23" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TextBox24" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
And the codebehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Sandbox
{
public partial class css : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
