I am currently utilizing asp.net along with entity framework 4
On my page, I have three tabs structured like this:
The Challenge I'm Facing
The issue I am encountering is that the browser fails to display a scrollbar even when there are over 150 rows present in the table.
Here is the CSS of my table:
.tableResultClass{
overflow:hidden;
border:1px solid #d3d3d3;
background:#fefefe;
width:90%;
margin:5% auto 0;
-moz-border-radius:5px; /* FF1+ */
-webkit-border-radius:5px; /* Saf3-4 */
border-radius:5px;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
If you require any additional information to understand and address my problem, please let me know. Thank you in advance.
The Entire ASP Code
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="onlineBookingDiv" style="float: right; position:fixed; right:0px; width:400px">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Today</a></li>
<li><a href="#tabs-2">Tomorrow</a></li>
<li><a href="#tabs-3">Any Date</a></li>
<label style="float: right">
<asp:DropDownList AutoPostBack="true" runat="server" ID="mealTimeSelector" OnSelectedIndexChanged="TodayTab_Click">
<asp:ListItem Value="1">Breakfast</asp:ListItem>
<asp:ListItem Value="2">Lunch</asp:ListItem>
<asp:ListItem Value="3">Dinner</asp:ListItem>
</asp:DropDownList>
</label>
</ul>
<div id="tabs-1">
<asp:ScriptManager ID="ScriptManager2" runat="server" />
<asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<table id="BookingTable" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="mealTimeSelector" />
</Triggers>
</asp:UpdatePanel>
</div>
<div id="tabs-2">
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<table id="BookingTableTomorrow" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="mealTimeSelector" />
</Triggers>
</asp:UpdatePanel>
</div>
<div id="tabs-3">
<p>
Date:
<input type="text" id="datepicker" runat="server" ClientIDMode="Static">
</p>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Button ID="BookingForDate" runat="server" OnClick="BookingForDate_Click" Text="Search" />
<span style="color: red" id="errorDateMessage" runat="server"></span>
<table id="DateBookingTable" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="mealTimeSelector" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>