Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
JM
1190
using jquery UI Tab inside of IGSplitter causes issues
posted

I am using the jquery UI Tab control inside of the IGSplitter.  I seth HeightStyle to fill on the tab.  This results in the contents of the tab having a 0 height.  If i remove the tab from the IGSplitter then everything works correctly.  Below is a sample

<!DOCTYPE html>
<html style="height: 100%">
<head>
<title></title>

<!-- Ignite UI Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet" />

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.dv.js"></script>
<style>
#map {
overflow: hidden;
}
</style>
</head>
<body style="height: 100%">
<div id="splitter" style="height: 500px">
<div id="tab" style="height: 100%">
<ul>
<li><a href="#treetab">Product Range Browser</a></li>
</ul>
<div id="treetab" style="height: 100%">
<ul id="tree"></ul>
</div>
</div>
<div id="detailSplitter">
<div>
<div id="map"></div>
</div>
<div>
<table id="grid"></table>
</div>
</div>
</div>
<script src="http://www.igniteui.com/data-files/continents-with-countries-and-cities.js" type="text/javascript"></script>
<script>

$(function () {
$("#splitter").igSplitter({
height: "500px",
expanded: function (evt, ui) {
$("#grid_headers").css("width", "100%");
$("#grid").css("width", "100%");
},
panels: [
{ size: 200, min: 100, max: 250 },
{ collapsible: true }
]
});
$("#tab").tabs({ heightStyle: "fill" });
$("#detailSplitter").igSplitter({
orientation: "horizontal",
panels: [
{ size: 500, collapsible: true },
{ size: 200, collapsible: true }
]
});
$("#tree").igTree({
dataSource: continentsWithCountriesAndCitiesCoordinates,
dataSourceType: "json",
bindings: {
textKey: "Text",
valueKey: "Text",
childDataProperty: "Countries"
},
rendered: onTreeRendered,
selectionChanged: onTreeSelectionChanged
});

function onTreeRendered(evt, ui) {
var unitedStatesNodeElement = ui.owner.nodesByValue("United States");
var unitedStatesNode = ui.owner.nodeFromElement(unitedStatesNodeElement);

initMap();
initCitiesGrid(unitedStatesNode.data.Cities);

ui.owner.expandToNode(unitedStatesNodeElement);
ui.owner.select(unitedStatesNodeElement);
}

function onTreeSelectionChanged (sender, eventArgs) {
var node = eventArgs.selectedNodes[0];
zoomMapTo(node.data.Latitude, node.data.Longitude, 23);

$("#grid").igGrid("dataSourceObject", node.data.Cities);
$("#grid").igGrid("dataBind");

$("#detailSplitter").igSplitter("expandAt", 1);
}

function initMap() {
var map = $("#map").igMap({
width: "100%",
height: "100%",
crosshairVisibility: "visible",
overviewPlusDetailPaneVisibility: "visible",
overviewPlusDetailPaneBackgroundImageUri: "http://www.igniteui.com/images/samples/splitter/world.png",
panModifier: "control",
backgroundContent: {
type: "openStreet"
},
windowResponse: "immediate",
windowRect: {
left: 0.27,
top: 0.20,
height: 0.45,
width: 0.45
}
});

return map;
}

function initCitiesGrid(dataSource) {
var grid = $("#grid").igGrid({
width: "100%",
height: "99%",
dataSource: dataSource,
defaultColumnWidth: "25%",
features: [{
name: "Selection",
mode: "row",
rowSelectionChanged: function (ui, args) {
var selectedCity = $("#grid").data("igGrid").dataSource.dataView()[args.row.index];
zoomMapTo(selectedCity.Latitude, selectedCity.Longitude, 0.5);
}
}]
});

return grid;
}

function zoomMapTo(latitude, longitude, radius) {
var geographic = geographichFromCentered({
latitude: latitude,
longitude: longitude,
radius: radius
});

var zoom = $("#map").igMap("zoomToGeographic", geographic);
}

// Calculates the geographich coordinates of a square around a central point and radius
function geographichFromCentered(centered) {
var geographic = {
left: centered.longitude - centered.radius,
top: centered.latitude - centered.radius,
width: centered.radius * 2,
height: centered.radius * 2
};

return geographic;
}
});
</script>
</body>
</html>