I am trying to use jQuery DataTables in my asp.net project but it does not apply the styles nor functions of dataTable, my table remains normal.
I tried to use the CDN but in vain. But when I copy the same code and CDN to notepad++ it works. I have spent 2 days viewing related problems but it doesn't solve mine. I tried to put the links in the <head> or <body> tags but still in vain.
<%# Page Title="" Language="C#" MasterPageFile="~/AdminMenus.Master" AutoEventWireup="true" CodeBehind="companies.aspx.cs" Inherits="AdminDashboard.companies" %>
<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="~/DataTables-1.10.7/media/css/jquery.dataTables.css" />
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="~/DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="~/DataTables-1.10.7/media/js/jquery.js"></script>
<script>
$(document).ready(function () {
$('#camp').DataTable();
});
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="content">
<!-- begin breadcrumb -->
<ol class="breadcrumb pull-right">
<li>Home</li>
<li class="active">Dashboard</li>
</ol>
<!-- end breadcrumb -->
<h3 class="page-header">Dashboard <small>.</small></h3>
<div class="row" style="margin-top: -15px;">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading" style="background: #2d353c; color: #fff; border: none; padding: 10px 15px;">
<div>
<strong>Recently Registered Company(ies)</strong>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="camp" class="table display table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Country</th>
<th>City</th>
<th>Email address</th>
<th>Registration Approval</th>
<th>Membership Type</th>
<th>Registration Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 </td>
<td>Youbisol</td>
<td>South Africa</td>
<td>Johannesburg</td>
<td>freddyyumba#youbisol.com</td>
<td>Pending</td>
<td>Platinum</td>
<td>2015/07/25</td>
</tr>
<tr>
<td>1</td>
<td>Youbisol</td>
<td>South Africa</td>
<td>Johannesburg</td>
<td>freddyyumba#youbisol.com</td>
<td>Pending</td>
<td>Platinum</td>
<td>2015/07/25</td>
</tr>
<tr>
<td>1 </td>
<td>Youbisol</td>
<td>South Africa</td>
<td>Johannesburg</td>
<td>freddyyumba#youbisol.com</td>
<td>Pending</td>
<td>Platinum</td>
<td>2015/07/25</td>
</tr>
<tr>
<td>1 </td>
<td>PKMM</td>
<td>GABON</td>
<td>LIBREVILLE</td>
<td>freddyyumba#youbisol.com</td>
<td>Aproved</td>
<td>Platinum</td>
<td>2015/09/20</td>
</tr>
<tr>
<td>1 </td>
<td>Youbisol</td>
<td>South Africa</td>
<td>Johannesburg</td>
<td>freddyyumba#youbisol.com</td>
<td>Pending</td>
<td>Platinum</td>
<td>2015/07/25</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Content>
You need to load jQuery before you load any jQuery-related code such as jQuery DataTables, see below:
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="~/DataTables-1.10.7/media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="~/DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
Related
I have installed apim 2.6.0 . I created a prototyped api with inline implementation and uncommented the inline code.
But whenver we try to invoke the api in the api store , we are getting this unexpected response body. Tried creating other api but the response is the same.
Response Body
<!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>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>WSO2 API Manager</title>
<link href="../admin/css/global.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../styles/css/main.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../dialog/css/jqueryui/jqueryui-themeroller.css" rel="stylesheet" type="text/css"
media="all"/>
<link href="../dialog/css/dialog.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" href="../admin/css/carbonFormStyles.css">
<!--[if gte IE 8]>
<link href="../dialog/css/dialog-ie8.css" rel="stylesheet" type="text/css" media="all"/>
<![endif]-->
<!--[if gte IE 7]>
<link href="../dialog/css/dialog-ie8.css" rel="stylesheet" type="text/css" media="all"/>
<![endif]-->
<link rel="icon" href="../admin/images/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="../admin/images/favicon.ico" type="image/x-icon"/>
<script type="text/javascript" src="../admin/js/csrfPrevention.js"></script>
<script type="text/javascript" src="../admin/js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="../admin/js/jquery.form.js"></script>
<script type="text/javascript" src="../dialog/js/jqueryui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../admin/js/jquery.validate.js"></script>
<script type="text/javascript" src="../admin/js/jquery.cookie.js"></script>
<script type="text/javascript" src="../admin/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../admin/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="../admin/js/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="../admin/js/main.js"></script>
<script type="text/javascript" src="../admin/js/WSRequest.js"></script>
<script type="text/javascript" src="../admin/js/cookies.js"></script>
<script type="text/javascript" src="../admin/js/customControls.js"></script>
</head>
<script type="text/javascript">
if(getCookie('region1_configure_menu') == null){
if (window.location.protocol == "https:"){
setCookie('region1_configure_menu', 'none','','','secure');
} else { setCookie('region1_configure_menu', 'none');
}
}
if(getCookie('region3_registry_menu') == null){
if (window.location.protocol == "https:"){
setCookie('region3_registry_menu', 'none','','','secure');
} else { setCookie('region3_registry_menu', 'none');
}
}
if(getCookie('region4_monitor_menu') == null){
if (window.location.protocol == "https:"){
setCookie('region4_monitor_menu', 'none','','','secure');
} else { setCookie('region4_monitor_menu', 'none');
}
}
if(getCookie('region5_tools_menu') == null){
if (window.location.protocol == "https:"){
setCookie('region5_tools_menu', 'none','','','secure');
} else { setCookie('region5_tools_menu', 'none');
}
}
</script>
<body>
<noscript>
<div class="something-wrong">
<div class="title">JavaScript is disabled on your browser</div>
<div class="content">Please enable JavaScript or upgrade to a JavaScript-capable browser to use WSO2 Products.</div>
</div>
</noscript>
<!--[if lte IE 6]>
<div class="something-wrong">
<div class="title">Did you know that your Internet Explorer is out of date?</div>
<div class="content">To get the best possible experience using our website we recommend that you upgrade to a newer version.</div>
</div>
<![endif]-->
<div id="dcontainer"></div>
<script type="text/javascript" src="../dialog/js/dialog.js"></script>
<!-- JS imports for collapsible menu -->
<script src="../yui/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
<script src="../yui/build/animation/animation-min.js" type="text/javascript"></script>
<script src="../admin/js/template.js" type="text/javascript"></script>
<script src="../yui/build/yahoo/yahoo-min.js" type="text/javascript"></script>
<script src="../yui/build/selector/selector-min.js" type="text/javascript"></script>
<table id="main-table" border="0" cellspacing="0">
<tr>
<td id="header" colspan="3">
<!--[IF IE 7]>
<style>
div#header-div div.right-links{
position:absolute;
}
</style>
<![endif]-->
<div id="header-div">
<div class="right-logo">Management Console</div>
<div class="left-logo">
<img src="../admin/images/1px.gif" width="300px" height="32px"/>
</div>
<div class="middle-ad">
</div>
<div class="header-links">
<div class="right-links">
<ul>
<li class="right">
Sign-in
</li>
<li class="middle">|</li>
<li class="middle">
<a target="_blank" href="https://docs.wso2.com/display/AM250/WSO2+API+Manager+Documentation">Docs</a>
</li>
<li class="middle">|</li>
<li class="left">
<a target="_blank" href="../product/about.html">About</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="vertical-menu-container" id="vertical-menu-container" style="display:none;">
<div id="menu-panel-button0"></div>
<div id="menu-panel-button1" class="menu-panel-buttons"></div>
<div id="menu-panel-button2" class="menu-panel-buttons"></div>
<div id="menu-panel-button3" class="menu-panel-buttons"></div>
<div id="menu-panel-button4" class="menu-panel-buttons"></div>
<div id="menu-panel-button5" class="menu-panel-buttons"></div>
<div id="menu-panel-button_dummy" style="display:none"></div>
</td>
<td id="menu-panel" valign="top">
<table id="menu-table" border="0" cellspacing="0">
<tr>
<td id="region1">
<div id="menu"> <ul class="main"><li>Home</li><li id="region1_manage_menu" class="menu-header" onclick="mainMenuCollapse(this.childNodes[0])" style="cursor:pointer"><img src="../admin/images/up-arrow.gif" class="mMenuHeaders" id="region1_manage_menu"/>Manage</li><li class="normal"><ul class="sub"></ul></li> </ul></div>
</td>
</tr>
<tr>
<td id="region2">
<div id="menu"> <ul class="main"> </ul></div>
</td>
</tr>
<tr>
<td id="region3">
<div id="menu"> <ul class="main"> </ul></div>
</td>
</tr>
<tr>
<td id="region4">
<div id="menu"> <ul class="main"> </ul></div>
</td>
</tr>
<tr>
<td id="region5">
<div id="menu"> <ul class="main"> </ul></div>
</td>
</tr>
<tr>
<td><img src="../admin/images/1px.gif" width="225px" height="1px"/></td>
</tr>
</table>
</td>
<td id="middle-content">
<table id="content-table" border="0" cellspacing="0">
<tr>
<td id="page-header-links">
<table class="page-header-links-table" cellspacing="0">
<tr>
<td class="breadcrumbs">
<table class="breadcrumb-table" cellspacing="0">
<tr>
<td>
<div id="breadcrumb-div"></div>
</td>
</tr>
</table>
</td>
<td class="page-header-help"><a href="./docs/userguide.html"
target="_blank">Help</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="body">
<img src="../admin/images/1px.gif" width="735px" height="1px"/>
<script type="text/javascript">
var msgId;
msgId = 'MSG15482962385250.12826686230343076';
</script>
<script type="text/javascript">
function doValidation() {
var reason = "";
var userNameEmpty = isEmpty("username");
var passwordEmpty = isEmpty("password");
if (userNameEmpty || passwordEmpty) {
CARBON.showWarningDialog('Please enter a valid user name and a password.');
document.getElementById('txtUserName').focus();
return false;
}
return true;
}
</script>
<script type="text/javascript">
function getSafeText(text){
text = text.replace(/</g,'<');
return text.replace(/>/g,'>');
}
function checkInputs(){
var loginForm = document.getElementById('loginForm');
var backendUrl = document.getElementById("txtbackendURL");
var username = document.getElementById("txtUserName");
backendUrl.value = getSafeText(backendUrl.value);
username.value = getSafeText(username.value);
loginForm.submit();
}
</script>
<div id="middle">
<table cellspacing="0" width="100%">
<tr>
<td>
<div id="features">
<table cellspacing="0">
<tr class="feature feature-top">
<td>
<a target="_blank" href="https://docs.wso2.com/display/AM250/WSO2+API+Manager+Documentation"><img src="../admin/images/user-guide.gif"/></a>
</td>
<td>
<h3><a target="_blank" href="https://docs.wso2.com/display/AM250/WSO2+API+Manager+Documentation">User Guide</a></h3>
<p>WSO2 Carbon user guide.</p>
</td>
</tr>
<tr class="feature">
<td>
<a target="_blank" href="http://wso2.org/forum/187"><img
src="../admin/images/forum.gif"/></a>
</td>
<td>
<h3><a target="_blank" href="http://wso2.org/forum/187">Forum</a>
</h3>
<p>The interactive message board for sharing information, questions and comments about WSO2 products.</p>
</td>
</tr>
<tr class="feature">
<td>
<a target="_blank"
href="https://wso2.org/jira/browse/APIMANAGER"><img
src="../admin/images/issue-tracker.gif"/></a>
</td>
<td>
<h3><a target="_blank"
href="https://wso2.org/jira/browse/APIMANAGER">
Issue Tracker</a></h3>
<p>Users are encouraged to report issues & suggest improvements using the JIRA issue tracker. In addition, users can observe the status of the reported issues in progress.</p>
</td>
</tr>
<tr class="feature">
<td>
<a target="_blank" href="http://wso2.org/mail"><img
src="../admin/images/mailing-list.gif"/></a>
</td>
<td>
<h3><a target="_blank" href="http://wso2.org/mail">
Mailing Lists</a></h3>
<p>Report issues, provide feedback & get help from our mailing lists.</p>
</td>
</tr>
</table>
</div>
</td>
<td width="20%">
<div id="loginbox">
<h2>Sign-in</h2>
<form action='../admin/login_action.jsp' method="POST" onsubmit="return doValidation();" target="_self" onsubmit="checkInputs()">
<table>
<tr>
<td>
<label for="txtUserName">Username</label>
</td>
<td>
<input type="text" id="txtUserName" name="username"
class="user" tabindex="1" autocomplete="off" />
</td>
</tr>
<tr>
<td>
<label for="txtPassword">Password</label>
</td>
<td>
<input type="password" id="txtPassword" name="password"
class="password" tabindex="2" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" name="rememberMe"
value="rememberMe" tabindex="3"/>
<label for="txtRememberMe">Remember Me</label>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="Sign-in"
class="button" tabindex="3"/>
</td>
</tr>
</table>
</form>
<br/>
<a target="_blank" href="../docs/signin_userguide.html" tabindex="4">
Sign-in Help
</a>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function init(loginStatus) {
// intialize the code and call to the back end
/*wso2.wsf.Util.initURLs();*/
/*Initialize the XSLT cache*/
/*wso2.wsf.XSLTHelper.init();*/
if (loginStatus == 'true') {
} else if (loginStatus == 'null') {
} else if (loginStatus == 'false') {
wso2.wsf.Util.alertWarning("Login failed. Please recheck the user name and password and try again")
}
}
document.getElementById('txtUserName').focus();
</script>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="footer" colspan="3">
<div id="footer-div">
<div class="footer-content">
<div class="copyright">
© 2005 - 2018 WSO2 Inc. All Rights Reserved.
</div>
<!--div class="poweredby">
</div-->
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
if (Function('/*#cc_on return document.documentMode===10#*/')()){
document.documentElement.className+=' ie10';
}
</script>
</body>
</html>
response header returned is
cache-control: no-store, no-cache, must-revalidate, private content-encoding: gzip content-language: en-US content-type: text/html;charset=UTF-8 date: Thu, 24 Jan 2019 02:17:18 GMT expires: 0 pragma: no-cache server: WSO2 Carbon Server status: 200 vary: Accept-Encoding x-content-type-options: nosniff x-frame-options: DENY x-xss-protection: 1; mode=block
even though the response content type is application/json
How can I reduce the space between the parallel tables for the below code? The look and feel looks a bit odd where the data grid tables are placed at the extreme ends of the page alignment.
Can anyone suggest how can I manage the alignment for the tables to reduce the space of the tables placed at each of the extreme ends left hand and right hand side?
Note: Copy the code in a notepad and save it as test.html extension and open in IE or Firefox to check the alignment problem I have discussed above.
Here is the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Server status</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body><br/><br/><br/><br/>
<div style="float:right;"><table id="ll" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:bottom;"><table id="gg" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div><br/><br/><br/>
<div style="float:left;"><table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:right;"><table id="vv" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Please Replace your code by below code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Server status</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body><br/><br/><br/><br/>
<div style="width:780px; overflow:hidden; margin:0 auto; margin-bottom:20px;">
<div style="float:right;">
<table id="ll" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:left;">
<table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
</div>
<div style="width:780px; overflow:hidden; margin:0 auto; ">
<div style="float:left;">
<table id="gg" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:right;">
<table id="vv" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
I'm trying to make a table that has rows that could expand and collapse on the press of a button, like in Windows Explorer, pressing the "plus" next to the folder will open the files in the directory.
Here's what I wrote:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../asset/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="../asset/css/trax.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Test Results</h3>
</div>
<div class="table-responsive">
<table class="table table-condensed table-hover">
<thead>
<tr>
<th class="col-md-7 text-left">Name</th>
<th class="col-md-1 text-right">Success</th>
<th class="col-md-1 text-right">Total</th>
<th class="col-md-1 text-right">Fail</th>
<th class="col-md-2 text-center">Trend</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">
<button type="button" class="btn btn-default btn- xs" data-toggle="collapse" data-target=".module,.first">
+
</button>
Foo
</td>
<td class="text-right up"><span class="glyphicon glyphicon-arrow-up"></span>80%</td>
<td class="text-right">5</td>
<td class="text-right">1</td>
<td class="text-center"><span class="inlinesparkline" values="1,2,8,4,5,7,10"></span></td>
</tr>
<tr class="collapse out module first">
<td class="text-left col-md-7">Hi</td>
<td class="text-right up col-md-1"><span class="glyphicon glyphicon-arrow-up"></span>95%</td>
<td class="text-right col-md-1">5</td>
<td class="text-right col-md-1">1</td>
<td class="text-center col-md-2"><span class="inlinesparkline" values="1,2,3,4,5"></span></td>
</tr>
<tr>
<td class="text-left">Bar</td>
<td class="text-right down"><span class="glyphicon glyphicon-arrow-down"></span>60%</td>
<td class="text-right">5</td>
<td class="text-right">2</td>
<td class="text-center"><span class="inlinesparkline" values="10,5,7,12,6,4,2"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="../asset/js/jquery-2.1.1.min.js" type="text/javascript"> </script>
<script src="../asset/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../asset/js/jquery.sparkline.js" type="text/javascript"> </script>
<script src="../asset/js/app.js" type="text/javascript"></script>
</body>
</html>
So, I managed to get the button to show a new row but it isn't arranged properly: the table cells don't arrange according to the table header cells like in other rows.
But when the button is pressed, during the transition, it arranges itself right before adjusting back to the wrong spacing.
Adding col-md-(number) to the cells as classes doesn't fix it.
Please tell me how to fix it / where I am going wrong.
That is a funny one. I found a similar question with an answer that appears to work. I created a jsFiddle that shows it working. Basically it involves adding your own CSS class that overrides the bootstrap CSS and forces it to display as a table row.
table .collapse.in {
display: table-row !important;
}
I can't say I particularly like the solution, especially the use of !important, but it works. There is anohter solution in the question I linked you to which involved adding a <div> to the <tr> with a class of collapsible but I disliked the sound of that even more.
I'm trying to add jquery data tables to a simple aspx page. Did this before a couple times but this website that I'm adding it to now has some CSS that is getting inherited.
So I took the generated HTML and removed the CSS that was getting added to it.
My page still does not style properly!
Here is my HTML.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.dataTables.min.js"></script>
<link href="CSS/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<link href="CSS/demo_page.css" rel="stylesheet" />
<link href="CSS/demo_table.css" rel="stylesheet" />
<link href="CSS/demo_table_jui.css" rel="stylesheet" />
<link href="CSS/jquery.dataTables.css" rel="stylesheet" />
<link href="CSS/jquery.dataTables_themeroller.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$("#gvMain").prepend($("<thead></thead>").append($(this).find("tr:first"))).
dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});
</script>
<div>
<form>
<table id="gvMain">
<tr>
<th scope="col">Some Id</th>
</tr>
<tr class="gridItem">
<td>297</td>
</tr>
<tr class="gridAlternatingItem">
<td>296</td>
</tr>
<tr class="gridItem">
<td>295</td>
</tr>
<tr class="gridAlternatingItem">
<td>295</td>
</tr>
<tr class="gridItem">
<td>294</td>
</tr>
<tr class="gridAlternatingItem">
<td>294</td>
</tr>
<tr class="gridItem">
<td>293</td>
</tr>
<tr class="gridAlternatingItem">
<td>293</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
It looks like below
I have spent hours trying to get it to work but no luck. It is in the main directory of the existing site though. But that should not matter right coz the HTML does not have anything included in it.
This is the screenshot of four errors that are showing in the above screenshot. It is nothing but some missing images/css files.
You have to add the <thead> and <tbody> tag
Here is example of table:
<table id="gvMain">
<thead>
<tr>
<th scope="col">Some Id</th>
</tr>
</thead>
<tbody>
<tr class="gridItem">
<td>297</td>
</tr>
<tr class="gridAlternatingItem">
<td>296</td>
</tr>
<tr class="gridItem">
<td>295</td>
</tr>
<tr class="gridAlternatingItem">
<td>295</td>
</tr>
<tr class="gridItem">
<td>294</td>
</tr>
<tr class="gridAlternatingItem">
<td>294</td>
</tr>
<tr class="gridItem">
<td>293</td>
</tr>
<tr class="gridAlternatingItem">
<td>293</td>
</tr>
</tbody>
</table>
I find that the Sharepoint asp.net dropdown menus aren't following the styles that they should in every browser except IE7.
In the image above you see that the button text is displayed below the button icon instead of next to it; The odd thing is, the same menu viewed from a different page will display correctly.
I've looked through the master page code and can't figure out what would cause this, any pointers would be welcome.
The entire masterpage code is below here if anyone is willing to read all of that :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%#Master language="C#"%>
<%# Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%# Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%# Import Namespace="Microsoft.SharePoint" %>
<%# Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%# Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %>
<%# Register TagPrefix="wssuc" TagName="DesignModeConsole" src="~/_controltemplates/DesignModeConsole.ascx" %>
<%# Register TagPrefix="SPIntranet" TagName="Ticker" Src="~/_controltemplates/SPIntranetTicker.ascx" %>
<%# Register TagPrefix="SPIntranet" TagName="Banner" Src="~/_controltemplates/SPIntranetBanner.ascx" %>
<HTML dir="<%$Resources:wss,multipages_direction_dir_value%>" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr">
<HEAD runat="server">
<META Name="GENERATOR" Content="Microsoft SharePoint">
<META Name="progid" Content="SharePoint.WebPartPage.Document">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META HTTP-EQUIV="Expires" content="0">
<SharePoint:RobotsMetaTag runat="server"/>
<Title ID=onetidTitle><asp:ContentPlaceHolder id=PlaceHolderPageTitle runat="server"/></Title>
<SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>
<SharePoint:CustomJSUrl runat="server"/>
<SharePoint:SoapDiscoveryLink runat="server"/>
<SharePoint:CssLink runat="server"/>
<SharePoint:Theme runat="server"/>
<!-- SPECIFY STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="/Style Library/Custom CSS/OlympicIntranet.css" />
<!-- <style>
#mp1_0_8_Anchor{
display:inline-block;
}
#zz10_ID_PersonalizePage{
margin-left:60px;
}
</style>-->
<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">
</asp:ContentPlaceHolder>
<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>
</HEAD>
<BODY scroll="yes" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();">
<form class="body" runat="server" onsubmit="return _spFormOnSubmitWrapper();"><asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true" />
<WebPartPages:SPWebPartManager id="m" runat="Server"/>
<table class="divMainContainer" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<!-- Site Logo -->
<td>
<table width="100%"cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="divOlympicLogo">
<a href="\">
<span>
<SharePoint:SiteLogoImage id="onetidHeadbnnr0" LogoImageUrl="/_layouts/images/titlegraphic.gif" runat="server"/>
</span>
</a>
</td>
<!-- Quick Link Spacer -->
<td class="divOlympicTopQuickLinkCorner">
<span></span>
</td>
<!-- Quick Links -->
<td class="divQuickLink">
<a id="aBrainDump" href="https://www.braindump.co.nz/olympic" class="icon"><span>
<img src="/images/brain_dump_icon.png" class="imgIcon"></img>
</span></a>
</td >
<td class="divQuickLink">
<a id="aCRM" href="http://crm/" class="icon"><span>
<img src="/images/crm_icon.png" class="imgIcon"></img>
</span></a>
</td >
<td class="divQuickLink">
<a id="aexp" href="http://intranet/expenseclaim/" class="icon"><span>
<img src="/images/expense_claim_icon.png" class="imgIcon"></img>
</span></a>
</td >
<td class="divQuickLink">
<a id="aGoAdmin" href="http://goadmin/" class="icon"><span>
<img src="/images/go_admin_icon.png" class="imgIcon"></img>
</span></a>
</td >
<td class="divQuickLink">
<a id="aLeave" href="http://intranet/Default.aspx?tabid=668" class="icon"><span>
<img src="/images/leave_request_icon.png" class="imgIcon"></img>
</span></a>
</td >
<td class="divQuickLink">
<a id="aReport" href="http://intranet/Default.aspx?tabid=588" class="icon"><span>
<img src="/images/report_centre_icon.png" class="imgIcon"></img>
</span></a>
</td >
<td class="divQuickLink">
<a id="aTimeSheet" href="http://intranet/goweb/ielogin.htm" class="icon"><span>
<img src="/images/time_sheet_icon.png" class="imgIcon"></img>
</span></a>
</td >
<td class="divQuickLink">
<a id="aTFS" href="http://tfs" class="icon"><span>
<img src="/images/tfs_icon.png" class="imgIcon"></img>
</span></a>
</td >
<td class="divQuickLink">
<a id="awiki" href="http://wikione/Wiki%20Pages/Home.aspx" class="icon"><span>
<img src="/images/wikione_icon.png" class="imgIcon"></img>
</span></a>
</td >
</tr>
</table>
</td>
</tr>
<tr>
<asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
<wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>
</asp:ContentPlaceHolder>
<!-- Publishing console control -->
<asp:ContentPlaceHolder ID="SPNavigation" runat="server">
<td>
<SharePoint:DelegateControl runat="server" ControlId="PublishingConsole"
PrefixHtml="<tr><td colspan="4" id="mpdmconsole" class="ms-consolemptablerow">"
SuffixHtml="</td></tr>"></SharePoint:DelegateControl>
</td>
</asp:ContentPlaceHolder>
</tr>
<tr>
<td style="padding-bottom:5px;">
<!-- Tabs Menu -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="divOlympicTabLeft" align="left">
<SharePoint:AspMenu
ID="TopNavigationMenu"
Runat="server"
DataSourceID="topSiteMap"
EnableViewState="false"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
Orientation="Horizontal"
StaticDisplayLevels="2"
MaximumDynamicDisplayLevels="1"
DynamicHorizontalOffset="0"
StaticPopoutImageUrl="/_layouts/images/menudark.gif"
StaticPopoutImageTextFormatString=""
DynamicHoverStyle-BackColor="#CBE3F0"
SkipLinkText=""
StaticSubMenuIndent="0"
CssClass="ms-topNavContainer"><StaticMenuStyle/><StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/><StaticSelectedStyle CssClass="ms-topnavselected" /><StaticHoverStyle CssClass="ms-topNavHover" /><DynamicMenuStyle BackColor="#F2F3F4" BorderColor="#A7B4CE" BorderWidth="1px"/><DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/><DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/><DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected"/></SharePoint:AspMenu>
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource"><Template_Controls>
<asp:SiteMapDataSource
ShowStartingNode="False"
SiteMapProvider="SPNavigationProvider"
id="topSiteMap"
runat="server"
StartingNodeUrl="sid:1002"/>
</Template_Controls></SharePoint:DelegateControl>
</td>
<td>
</td>
<td class="IntranetSiteAction" align="right">
<SharePoint:SiteActions runat="server" id="SiteActionsMenuMain"
PrefixHtml="<div><div>"
SuffixHtml="</div></div>"
MenuNotVisibleHtml=" "><CustomTemplate>
<SharePoint:FeatureMenuTemplate runat="server" FeatureScope="Site" Location="Microsoft.SharePoint.StandardMenu" GroupId="SiteActions" UseShortId="true">
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Create" Text="<%$Resources:wss,viewlsts_pagetitle_create%>" Description="<%$Resources:wss,siteactions_createdescription%>" ImageUrl="/_layouts/images/Actionscreate.gif" MenuGroupId="100" Sequence="100" UseShortId="true" ClientOnClickNavigateUrl="~site/_layouts/create.aspx" PermissionsString="ManageLists, ManageSubwebs" PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage" Text="<%$Resources:wss,siteactions_editpage%>" Description="<%$Resources:wss,siteactions_editpagedescription%>" ImageUrl="/_layouts/images/ActionsEditPage.gif" MenuGroupId="100" Sequence="200" ClientOnClickNavigateUrl="javascript:MSOLayout_ChangeLayoutMode(false);" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Settings" Text="<%$Resources:wss,settings_pagetitle%>" Description="<%$Resources:wss,siteactions_sitesettingsdescription%>" ImageUrl="/_layouts/images/ActionsSettings.gif" MenuGroupId="100" Sequence="300" UseShortId="true" ClientOnClickNavigateUrl="~site/_layouts/settings.aspx" PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData" PermissionMode="Any" />
</SharePoint:FeatureMenuTemplate>
</CustomTemplate></SharePoint:SiteActions>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" width="100%" class="style1">
<SPIntranet:Banner id="Banner" runat="server"></SPIntranet:Banner >
</td>
</tr>
<tr>
<td class="tickerBackground">
<table width="100%" style="padding-left:10px; vertical-align:top;" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<img src="/images/whats_today_hdr.png" style="background-color:transparent; vertical-align:bottom;"></img>
</td>
<td style="max-width:300px;padding-left:0px;" valign="middle">
<script src="http://sp2010dev:90/Style Library/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://sp2010dev:90/Style Library/jquery/jquery.marquee.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('marquee').marquee();
});
</script>
<marquee style="width:310px;margin-left:0px;" scrollamount="1">test</marquee>
<!--<SPIntranet:Ticker id="Ticker" runat="server"></SPIntranet:Ticker>-->
</td>
<td class="tickerSearchDivider" style="width:25px;">
<span></span>
</td>
<td class="powerSearchHeading" style="background-color:transparent;">
<img src="/images/power_search_hdr.png" style="background-color:transparent;"></img>
</td>
<td class="searchBackGround" align="right" padding-left="5px">
<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox"/>
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color:#FFFFFF">
<td>
<table width="100%;" height="10px;">
<tr>
<td>
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
<asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>
</asp:ContentPlaceHolder>
</td>
<td>
<!--- --- --- Top Toolbar --- --- --->
<!-- Global nav, including breadcrumbs and global links -->
<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server">
<span id="TurnOnAccessibility" style="display:none">
<a href="#" class="ms-skip" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();return false;">
<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnonaccessibility%>" EncodeMethod="HtmlEncode"/></a>
</span>
<A href="javascript:;" onclick="javascript:this.href='#mainContent';" class="ms-skip" AccessKey="<%$Resources:wss,maincontent_accesskey%>" runat="server">
<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,mainContentLink%>" EncodeMethod="HtmlEncode"/></A>
<span id="TurnOffAccessibility" style="display:none">
<a href="#" class="ms-acclink" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();return false;">
<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnoffaccessibility%>" EncodeMethod="HtmlEncode"/></a>
</span>
<!-- Global Breadcrumb -->
</asp:ContentPlaceHolder>
</td>
<td align="right" >
<!-- Welcome Message-->
<table cellpadding="0" cellspacing="0" height=100% class="ms-globalright" style="background-color:#FFFFFF">
<tr>
<td valign="middle" class="ms-globallinks" style="padding-left:3px; padding-right:6px;">
<SharePoint:DelegateControl runat="server" ControlId="GlobalSiteLink0"/>
</td>
<td valign="middle" class="ms-globallinks">
<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false">
</wssuc:Welcome>
</td>
<td style="padding-left:1px;padding-right:3px;" class="ms-globallinks">|</td>
<td valign="middle" class="ms-globallinks">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="ms-globallinks">
<SharePoint:DelegateControl ControlId="GlobalSiteLink1" Scope="Farm" runat="server"/></td>
<td class="ms-globallinks">
<SharePoint:DelegateControl ControlId="GlobalSiteLink2" Scope="Farm" runat="server"/></td>
</tr>
</table>
</td>
<td valign="middle" class="ms-globallinks">
<img align='absmiddle' border=0 src="/_layouts/images/helpicon.gif" alt="<%$Resources:wss,multipages_helplinkalt_text%>" runat="server">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="MainContentsTable" class="mainContentsTable" width="100%">
<tr>
<td class="mainTableLeftColumn">
<!--- --- --- Left Navigation Bar --- --- --->
<!-- Left Nav bar data source -->
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" runat="server" />
<!-- Area above left nav bar; Used to place profile pic for My Site -->
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" runat="server"/>
<!-- Calendar date picker -->
<asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat="server" />
<!-- Quick Launch -->
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">
<!-- View All Site Content -->
<label class="ms-hidden">
<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,quiklnch_pagetitle%>" EncodeMethod="HtmlEncode"/></label>
<Sharepoint:SPSecurityTrimmedControl runat="server" PermissionsString="ViewFormPages"><SharePoint:SPLinkButton id="idNavLinkViewAll" runat="server" NavigateUrl="~site/_layouts/viewlsts.aspx" Text="<%$Resources:wss,quiklnch_allcontent%>" AccessKey="<%$Resources:wss,quiklnch_allcontent_AK%>"/></SharePoint:SPSecurityTrimmedControl>
<!-- Quick Launch Items -->
<Sharepoint:SPNavigationManager
id="QuickLaunchNavigationManager"
runat="server"
QuickLaunchControlId="QuickLaunchMenu"
ContainedControl="QuickLaunch"
EnableViewState="false"><SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource"><Template_Controls>
<asp:SiteMapDataSource SiteMapProvider="SPNavigationProvider" ShowStartingNode="False" id="QuickLaunchSiteMap" StartingNodeUrl="sid:1025" runat="server" />
</Template_Controls>
</SharePoint:DelegateControl><SharePoint:AspMenu id="QuickLaunchMenu" DataSourceId="QuickLaunchSiteMap" runat="server" Orientation="Vertical" StaticDisplayLevels="2" ItemWrap="true" MaximumDynamicDisplayLevels="0" StaticSubMenuIndent="0" SkipLinkText=""><LevelMenuItemStyles><asp:menuitemstyle CssClass="ms-navheader" /><asp:menuitemstyle CssClass="ms-navitem" />
</LevelMenuItemStyles><LevelSubMenuStyles><asp:submenustyle CssClass="ms-navSubMenu1" /><asp:submenustyle CssClass="ms-navSubMenu2" />
</LevelSubMenuStyles><LevelSelectedStyles><asp:menuitemstyle CssClass="ms-selectednavheader" /><asp:menuitemstyle CssClass="ms-selectednav" />
</LevelSelectedStyles>
</SharePoint:AspMenu></Sharepoint:SPNavigationManager>
<!--- Tree View --->
<Sharepoint:SPNavigationManager
id="TreeViewNavigationManager"
runat="server"
ContainedControl="TreeView">
<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/_layouts/viewlsts.aspx" id="idNavLinkSiteHierarchy" Text="<%$Resources:wss,treeview_header%>" AccessKey="<%$Resources:wss,quiklnch_allcontent_AK%>" />
<SharePoint:SPHierarchyDataSourceControl runat="server" id="TreeViewDataSource" RootContextObject="Web" IncludeDiscussionFolders="true" />
<SharePoint:SPRememberScroll runat="server" id="TreeViewRememberScroll" onscroll="javascript:_spRecordScrollPositions(this);" Style="overflow: auto;height: 400px;width: 150px; ">
<SharePoint:SPTreeView id="WebTreeView" runat="server" ShowLines="false" DataSourceId="TreeViewDataSource" ExpandDepth="0" SelectedNodeStyle-CssClass="ms-tvselected" NodeStyle-CssClass="ms-navitem" NodeStyle-HorizontalPadding="2" SkipLinkText="" NodeIndent="12" ExpandImageUrl="/_layouts/images/tvplus.gif" CollapseImageUrl="/_layouts/images/tvminus.gif" NoExpandImageUrl="/_layouts/images/tvblank.gif">
</SharePoint:SPTreeView>
</SharePoint:SPRememberScroll>
</Sharepoint:SPNavigationManager>
<!-- Recycle Bin -->
<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/_layouts/recyclebin.aspx" id="idNavLinkRecycleBin" ImageUrl="/_layouts/images/recycbin.gif" Text="<%$Resources:wss,StsDefault_RecycleBin%>" PermissionsString="DeleteListItems"/>
</asp:ContentPlaceHolder>
<!-- Left nav Actions area -->
<asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat="server"/>
<!--- --- --- End of Left Navigation Bar --- --- --->
</td>
<td class="mainTableMiddleColumn">
<!--- --- --- Page Content --- --- --->
<!-- In the wrapper DIV, the ID "MSO_ContentDiv" places the Web Part Tool Pane directly to the right of the content area -->
<div id="MSO_ContentDiv" runat="server">
<A name="mainContent"></A>
<!-- Page Description -->
<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>
<!-- Main content area -->
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">
</asp:ContentPlaceHolder>
</div>
<!--- --- --- End of Page Content --- --- --->
</td>
<td class="mainTableRightColumn">
<asp:ContentPlaceHolder id="PlaceHolderRight" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="footer" class="footer">
</td>
</tr>
<tr>
<td id="padding" height="100%">
</td>
</tr>
</table>
<input type="text" name="__spDummyText1" style="display:none;" size=1/>
<input type="text" name="__spDummyText2" style="display:none;" size=1/>
</form>
<!--- --- --- Leave the following placeholders beneath all page content --- --- --->
<!-- Footer -->
<asp:ContentPlaceHolder id="PlaceHolderUtilityContent" runat="server"/>
<!-- Used to add body styles to the page header -->
<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server"/>
<!-- Used to add styles to the page header -->
<asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server"/>
</div>
<!--- --- --- Hidden Placeholders --- --- --->
<asp:Panel visible="false" runat="server" BackColor="White">
<!-- PLACE UNUSED CONTENT PLACEHOLDERS HERE -->
<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">
<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle">
<SharePoint:ProjectProperty Property="Title" runat="server" />
</SharePoint:SPLinkButton>
</asp:ContentPlaceHolder>
<!--- --- --- Horizontal Top Navigation Bar --- --- --->
<!-- Container for top bar -->
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<!-- Top bar-->
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
</asp:ContentPlaceHolder>
<!-- Site Actions Menu -->
</asp:ContentPlaceHolder>
<!--- --- --- End of Horizontal Top Navigation Bar --- --- --->
<!--- --- --- Edit Consoles --- --- --->
<!-- Edit console that appears in page Edit mode -->
<!--- --- --- End of Edit Consoles --- --- --->
<!--- --- --- Page Header --- --- --->
<!-- Page Image -->
<asp:ContentPlaceHolder id="PlaceHolderPageImage" runat="server"/>
<!--- Breadcrumb nav on sub pages --->
<!--- Page Title -->
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />
<!-- Mini Console - provides page level commands such as the supplementary buttons for Site Map -->
<asp:ContentPlaceHolder id="PlaceHolderMiniConsole" runat="server"/>
<!--- --- --- End of Page Header --- --- --->
<!-- Form Digest Security Control -->
<asp:ContentPlaceHolder id="PlaceHolderFormDigest" runat="server">
<SharePoint:FormDigest runat="server" />
</asp:ContentPlaceHolder>
<!--- --- Placeholders used in default.master that you will likely not use --- --->
<!-- Area between page image and page title -->
<asp:ContentPlaceHolder id="PlaceHolderTitleLeftBorder" runat="server"/>
<!-- Area between page name and right page border -->
<asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" runat="server"/>
<!-- Area between top nav bar and page content -->
<asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" runat="server"/>
<!-- Sets a width of the left nav bar -->
<asp:ContentPlaceHolder id="PlaceHolderNavSpacer" runat="server"><IMG SRC="/_layouts/images/blank.gif" width=138 height=1 alt=""></asp:ContentPlaceholder>
<!-- Area between left nav bar and page content -->
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" runat="server"></asp:ContentPlaceHolder>
<!-- Area between left nav and content -->
<asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" runat="server"/>
<!-- Area between content and right page border -->
<asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server"/>
<!-- Title -->
<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server">
<asp:SiteMapPath SiteMapProvider="SPSiteMapProvider" id="GlobalNavigationSiteMap" RenderCurrentNodeAsLink="true" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>
</asp:ContentPlaceHolder>
<!-- Help Icon -->
</asp:Panel>
<!--- --- --- End of Hidden Placeholders --- --- --->
</BODY>
</HTML>