I am new to charts
I have index.jsp page.In that page contains CSS ,JAVASCRIPT also.I want to display BAR CHART in that jsp page..
I am getting this type of error::Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13
Thanks in Advance
index.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Line Charts</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<style type="text/css">
container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
</style>
<script type="text/javascript">
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
});
</script>
</head>
<body>
<h1 style="color:red" align="center">WELCOME TO LINE CHARTS</h1>
<div id="container" name="container"></div>
</body>
</html>
This means you need to move the <div id="container" name="container"></div> before you call the Highcharts.chart
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<h1 style="color:red" align="center">WELCOME TO LINE CHARTS</h1>
<div id="container" name="container"></div>
Related
It is working fine if i hard code markers lat long where as when it is built using function, it does not plot. In below code, only two markers are coming up where as it should be 3.
I have tried with complete vue browser script, as a static marker objects it is working fine but not with dynamic markers
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="root">
<gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 300px">
<gmap-info-window :options="infoOptions" :position="infoPosition" :opened="infoOpened" #closeclick="infoOpened=false">
{{infoContent}}
</gmap-info-window>
<gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :clickable="true" #click="toggleInfo(item, key)" />
</gmap-map>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="vue-google-maps.js"></script>
<script>
var jsondata = {
0: {
full_name: 'Erich Kunze',
lat: '20.31',
lng: '83.89'
},
1: {
full_name: 'Delmer Olson',
lat: '20.32',
lng: '83.89'
}
}
$(function () {
testdata();
;//= testdata();
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw'
},
});
new Vue({
el: '#root',
data: {
startLocation: {
lat: 20.3157,
lng: 83.8854
},
coordinates: jsondata,
<!-- { -->
<!-- 0: { -->
<!-- full_name: 'Erich Kunze', -->
<!-- lat: '20.31', -->
<!-- lng: '83.89' -->
<!-- }, -->
<!-- 1: { -->
<!-- full_name: 'Delmer Olson', -->
<!-- lat: '20.32', -->
<!-- lng: '83.89' -->
<!-- } -->
<!-- }, -->
infoPosition: null,
infoContent: null,
infoOpened: false,
infoCurrentKey: null,
infoOptions: {
pixelOffset: {
width: 0,
height: -35
}
},
},
methods: {
getPosition: function(marker) {
return {
lat: parseFloat(marker.lat),
lng: parseFloat(marker.lng)
}
},
toggleInfo: function(marker, key) {
this.infoPosition = this.getPosition(marker);
this.infoContent = marker.full_name;
if (this.infoCurrentKey == key) {
this.infoOpened = !this.infoOpened;
} else {
this.infoOpened = true;
this.infoCurrentKey = key;
}
}
}
});
});
function testdata(){
alert('chk');
jsondata[2] = {
full_name : 'chk',
lat:20.33,
lng:83.89
}
console.log(jsondata);
}
</script>
</html>
It should plot all the markers two static and one dynamic.
There is no problem with the code, Now the same code is working fine, it shows all the markers.It is working like a charm.
Thanks
I have props: ['attributes']
{
"name": "Color",
"variant": [
{
"name": "Red"
},
{
"name": "Green"
},
{
"name": "Blue"
}
]
},
{
"name": "Size",
"variant": [
{
"name": "L"
},
{
"name": "XL"
},
{
"name": "XXL"
}
]
}
In Template:
<div class="form-group" v-for="(attribute, index) in attributes">
{{attribute.name}}
<div v-for="(variant, vindex) in attribute.variant">
<input type="radio"
:value="[{name: attribute.name, variant:variant.name}]"
:id="'radio' + vindex"
:name="'group' + index">
{{variant.name}}
</div>
</div>
Result:
enter image description here
Question: How do I return selected radio buttons in an array? For example:
[{
"name": "Color",
"variant":
{
"name": "Blue"
}
},
{
"name": "Size",
"variant":
{
"name": "XL"
}
}]
The radio button does not add to the array as a checkbox.
You can do something like this.
You need to splice existing item each time so new value added.
Main part was searching item and removing and you can do it by looping through current items and find index of existing item and remove it so new value can be updated.
check below code.
var attributes = [{
"name": "Color",
"variant": [
{
"name": "Red"
},
{
"name": "Green"
},
{
"name": "Blue"
}
]
},
{
"name": "Size",
"variant": [
{
"name": "L"
},
{
"name": "XL"
},
{
"name": "XXL"
}
]
}];
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
attributes: attributes,
selectedData:[]
},
methods:{
setValue( name, value) {
//console.log(name,value);
var self = this;
this.selectedData.forEach(function(val, index){
if(val['name'] == name) {
self.selectedData.splice(index, 1);
return false;
}
});
this.selectedData.push({
"name": name,
"variant":
{
"name": value
}
});
}
}
})
<!DOCTYPE html>
<html>
<head>
<script> console.info = function(){} </script>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>.half{width:50%;float:left;}</style>
</head>
<body>
<div id="app">
<div class="half">
<div class="form-group" v-for="(attribute, index) in attributes">
{{attribute.name}}
<div v-for="(variant, vindex) in attribute.variant">
<label>
<input #click="setValue(attribute.name, variant.name)" type="radio"
:value="[{name: attribute.name, variant:variant.name}]"
:id="'radio' + vindex"
:name="'group' + index">
{{variant.name}}</label>
</div>
</div>
</div>
<div class="half">
<pre>{{ selectedData }}</pre></div>
</div>
</body>
</html>
I am using Kendo Grid to show the records.Below is my sample Html Page where i want to achieve the result for re-sizable in IE only. I have modified the code for Sample purpose only in Html. Resizable in Chrome is working.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/column-resizing">
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<style>
.wrap {
width: 95%;
margin: 0 auto;
}
.PageContentHeading {
padding: 3% 0;
}
.PageContentHeading h3 {
margin: 0;
}
.AddUser {
margin-left: 10px;
}
.AddUser a {
border-radius: 0;
padding: 4px 12px;
}
.btn-group-sm > .btn, .btn-sm {
border-radius: 0;
}
.SupplierCompanyName {
color: red;
}
.k-grid td {
border-left: none;
}
</style>
</head>
<body>
<script type="text/x-kendo-template" id="toolBarTemplate">
<div class="toolbar">
<div class="row">
<div class="col-md-4" style="float:right;">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="search" class="form-control" id='txtSearchString' placeholder="Search by User Details">
</div>
</div>
</div>
</div>
</script>
<div class="wrap">
<div class="main">
<div class="PageContentHeading">
<h3 class="pull-left">
Manage Users -
<span id="supplierPanel">
<span id="supplerCompany" class="SupplierCompanyName">
ABC Aerospace Inc.
</span> <span class="SupplierCompanyID">
[ ID_0001 ]
</span>
</span>
</h3>
<div class="pull-right AddUser">
Add User
</div>
<div class="pull-right ShowUsers">
<span class="labelname">Include Inactive Users:</span>
<input type="checkbox" checked data-toggle="toggle" data-on="True" data-off="False" data-onstyle="success" data-offstyle="danger" data-size="small">
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="grid"></div>
<script>
var apiUrl = "http://localhost:55020/";
var dynamicTemplate;
var col = [];
function switchChange(e) {
//alert('E');
}
function GetColumnsDetails() {
var rowsTempldateStyle = "<tr> <td style='word-wrap: break-word'> <span class='UserDesignation'> #:FullName #</span><span class='UserName'>#:title #</span> </td> ";
$.ajax({
url: apiUrl + "api/user/GetColumns/1",
type: 'GET',
async: false,
success: function (result) {
if (result.length > 0) {
for (var i = 0; i < result.length; i++) {
col.push({
field: result[i].colnameName,
title: result[i].titleName,
});
}
col.push({
title: "Active",
template: "<input type='checkbox' disabled='disabled' />",
width: "70px"
})
col.push({
title: "Action",
name: 'edit',
width: "70px"
});
}
}
});
}
$(document).ready(function () {
//
GetColumnsDetails();
$("#grid").kendoGrid({
dataSource: {
pageSize: 5,
batch: false, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
sortable: true,
resizable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 2
},
//resizable: true,
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</body>
</html>
I am using Latest version of Kendo but still it is not giving me the expected result. I have tried also to give the Width of each column but the same problem in IE. Can someone help me with this.
Steve please try to update to the new version:
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
Here is your example working on IE now.
http://dojo.telerik.com/iKOKo/3
Kendo just released a fix to this problem on the 14th of july:
AutoComplete widget inside Grid filter menu not expanding to full width
Unable to create multi-page document
Column resizing doesn't work in IE
Undefined drag hint text when Grid column does not have title set
Active filter icon is not visible enough
Check more details about this update here:
http://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r2-2016-sp2
I need help to understand the jsplumb.connect concept. I am trying to create endpoints from xml file and trying to connect the endpoints. But i am able to generate the endpoint but not the connections.
XML file
<?xml version="1.0" encoding="utf-8" ?>
<apps>
<source nodeStyle="Dot" nodeRadius="15">#66CCFF</source>
<target nodeStyle="Dot" nodeRadius="15">#66CCFF</target>
</apps>
html file
<!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>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/jquery.jsPlumb-1.3.16-all-min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var i=0;
var nodeName, nodeVal,nodeStyle,nodeRadius;
$.get('data1.xml', function(d){
$(d).find('apps').each(function(){
jsPlumb.Defaults.EndpointStyles = [{ fillStyle:"none" }, { fillStyle:"none" }];
while($(this).children()[i].nodeName!=null)
{
nodeName = $(this).children()[i].nodeName;
nodeVal = $(this).find($(this).children()[i].nodeName).text();
nodeStyle = $(this).find($(this).children()[i].nodeName).attr('nodeStyle');
nodeRadius = $(this).find($(this).children()[i].nodeName).attr('nodeRadius');
var nodeName = jsPlumb.addEndpoint( nodeName, {
overlays: [["Label", { label: nodeName, id: "label"+nodeName}]],
paintStyle: { fillStyle: nodeVal},
endpoint: [nodeStyle , { radius: nodeRadius }]
});
i++;
}
jsPlumb.bind("ready", function () {
jsPlumb.connect({
source: source, target: target, paintStyle: { lineWidth: 10, strokeStyle: '#66CCFF' },
endpoint: ["Dot", { radius: 15}], anchor: "BottomCenter",
connector: "Straight",
detachable: false,
overlays: [
["Label", {
fillStyle: "rgba(100,100,100,80)",
color: "white",
font: "12px sans-serif",
borderStyle: "black",
borderWidth: 2
}],
["Arrow", { location: 0.5}]
]
})
});
});
});
});
</script>
</head>
<body>
<div id="source" style="position: absolute; left: 100px; top: 250px;">
</div>
<div id="target" style="position: absolute; left: 600px; top: 250px;">
</div>
</body>
</html>
This can be accomplished programatically by first setting the uuid parameter of each endpoint like so:
jsPlumb.addEndpoint("0",{uuid:"ep0_0", isSource:true, isTarget:true});
jsPlumb.addEndpoint("1",{uuid:"ep1_0", isSource:true, isTarget:true});
And then connecting them as such
jsPlumb.connect({ uuids:["ep0_0","ep1_0"] });
//With more options looks like...
//jsPlumb.connect({ uuids:["ep0_0", "ep1_0"], endpoint: endpoint, anchors: flat_to_flat_anchors, overlays:overlays });
The html:
<div id="0" class="window"></div>
<div id="1" class="window"></div>
Bare bone js:
jsPlumb.addEndpoint("0",{uuid:"ep1"});
jsPlumb.addEndpoint("1",{uuid:"ep2"});
jsPlumb.connect({ uuids:["ep1","ep2"] });
In IE 7 and 8, whenever I want edit or add a row to the grid and the form shows up. The form and the grey background are shown ON TOP of the grid and not over it. I am not able to uplaod a pic but here is a diagram:
Grey area
[ jqGrid Form]
Not grey and accesible if I scroll down
My grid
If needed I can post my html/css/jq code. In firefox the functionality is fine, as in the grey area is OVER the grid and the grid is not accesible.
Is this is an IE bug?
I am using jquery 1.7.1, jqGrid 4.3.1 and jQuery ui 1.8.17.
<?php
session_start();
$user = $_SESSION['username'];
$uID = $_SESSION['UserID'];
$perms = $_SESSION['Access'];?><html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.17.custom.js" type="text/javascript"></script>
<script src="jquery.ui.datepicker.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="basic.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.base.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.theme.css" />
<script>
$(document).ready(function () {
var lastsel3;
var uID = <?php echo $uID; ?>;
$grid = $("#tasks"),
initDateEdit = function (elem) {
setTimeout(function() {
$(elem).datepicker({
dateFormat: 'dd-mm-yy',
showButtonPanel: true
});
}, 100);
},
initDateSearch = function (elem) {
setTimeout(function() {
$(elem).datepicker({
dateFormat: 'dd-mm-yy',
showButtonPanel: true
});
}, 100);
},
editSettings = {
//recreateForm:true,
jqModal:true,
reloadAfterSubmit:true,
closeOnEscape:true,
savekey: [true,13],
closeAfterEdit:true
};
$grid.jqGrid({
datatype: "local",
url: 'register.php',
sortname: 'Job ID',
sortOrder: 'asc',
postData: {uID:uID},
colNames: ["track","Job ID","Subject","Notes","Details","Due Date"],
colModel: [
{name: "track", index:"TrackID",align: "center", xmlmap:"TrackID", hidden: true, sortable: true},
{name: "Job ID", index:"TaskID",xmlmap:"TaskID", align:"center",sortable: true, sorttype: 'text', sortable: true, editable: false, editoptions: {readonly: true}},
{name: "Subject", index:"TaskSubject", align: "center", xmlmap:"TaskSubject",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
{name:"Notes", index:"Notes", align: "center",height: 20,xmlmap:"Notes",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
{name:"Details", index:"Details", align: "center", xmlmap:"Details", editable: true, edittype: 'select', editoptions: {value: 'Not Started:Not Started;In Progress:In Progress;Completed:Completed'}, sortable: true},
{name:"Due Date", index:"DueDate", align: "center", xmlmap:"DueDate",sorttype: 'text', sortable: true, editoptions: {dataInit: initDateEdit}, formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'}
],
onSelectRow: function(track){
if(track && track!==lastsel3)
{
$('#tasks').jqGrid('restoreRow',lastsel3);
$("#tasks").jqGrid('editGridRow',track,editSettings);
lastsel3=track;
}
else{
$("#tasks").jqGrid('editGridRow',track,editSettings);
}
},
editurl: 'editRow.php',
rowNum: 10,
shrinkToFit: true,
rowList: [10,20,50],
viewRecords: true,
xmlReader: {
root: "tasks",
row: "task",
repeatitems: false
},
pager: $('#navTasks'),
onInitializeForm : function () {
},
caption: "Your Tasks"
}).navGrid('#navTasks',{<?php
if ($user==NULL){
echo 'edit:false,add:false,del:false';
}
else{
echo 'edit:false,add:false,del:false';
}
?>},{},{},{},{multipleSearch: false, multipleGroup: false});
$('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
setInterval(
function(){
$('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
},100000);
$(window).bind('resize', function() {
$("#tasks").setGridWidth($(window).width()-"142");
$("#tasks").setGridHeight($(window).height()-"215");
}).trigger('resize');
});
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr >
<td colspan="100%">
<DIV id="header" class="header">
<div class="title" align="center">Welcome to Research Division - Work Flow System<br /><span>Your Tasks</span></div>
<?php
if($user == NULL){
echo '<div align="center"><br/> Please Sign-in here</div>';
}
else {
echo '<div align="center">Welcome '.$user.'!</div>';
}
?>
</DIV>
</td>
</tr>
<tr >
<td class="height">
<div class="sidebar">
<p>Assign Tasks</p>
<p>Completed Tasks</p>
<p><a id="logout" href="logout.php">Sign Out</a></p>
</div>
</td>
<td>
<DIV class="tables" align="center" >
<table id="tasks"></table>
<div id="navTasks"></div>
</DIV>
</td>
</tr>
</table>
</body>
and the CSS:
tr,td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent; }.tables{
min-width: 400px;}.header{
height: 100px;
width: 100%;
min-width: 500px;
background-color: #3E97D1;
border: solid 1px #681A38;
border-left: none;}.title{
font-size: 25px;}table{
border-collapse: collapse;
border: none;
padding: 0;
margin: 0px;
border-spacing: 0px;
width: 99%;
outline: 0;
height: 100%;}.height {
height: 99%;}.sidebar{
background-color: #009B95;
padding: 2px;
text-align: left;
border-right: solid 1px #681A38;
border-bottom: solid 1px #681A38;
width: 120px;
height: 99%;}
I suppose that the reason of the problem which you describe is that you don't use and <!DOCTYPE html ... before <html>. Without the line web browser work in quirks mode. You should use the doctype which corresponds to the dialect of HTML/XHTML which you use. Because one find <br /> in your code I suppose that you should include
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
before <html>. Look at the example from the jqGrid documentation.