I have a script and no matter what, when trying to position the panel, I cannot do anything but use absolute positioning on it. I have tried every trick I know, and nothing works. So I position it 10px from the bottom but this isn’t going to work as the text can vary. and I want it to be 10px below the gauge.
I’ve included the gauge in the code snippet as when I remove the gauge and try to only position the panel, the panel disappears and is nowhere to be found. Same goes when I try to put the panel just below the gauge with no positioning, vertical aligning it, zindex, etc…nothing works, unless using absolute positions, the text in the panel disappears.
abbreviated code:
<script type=”text/javascript”>
var $j = jQuery.noConflict();
$j(document).ready(function () { PopulateGaugePage2(); });
function PopulateGaugePage2() { (POPULATE GAUGE CODE HERE)}//END PopulateGaugePage2
function CreateGaugePage2(MetricGroup) {
$j(‘#jqxPanelPage2’).jqxPanel({ width: 183, theme: g_Theme, height: 188 });
$j(‘#gaugePage2’).jqxGauge({ (GAUGE CONFIG CODE GOES HERE) });
$j(‘#gaugePage2’).jqxGauge({ style: { stroke: FillColor, fill: FillColor } });
$j(‘#metricTextPage2’).html(“<center>” + “ ” + MetricGroup + “<br>(” + MetricGroupAbbr + “)</center>”);
}
</script>
<div id=”jqxPanelPage2″ style=”height:500px; “>
<div id=”gaugePage2″ style =”margin: 0 auto; padding-top: 5px;”></div>
<div id=”metricTextPage2″ style=” position: absolute; bottom: 10px; ” />
</div>