Setting size in tab control

[armin o]

Good morning,

using spforms with sp2013, here's my structure:

.tab control
..html control
...div with height and width attribute



Problem: When the tab is not selected at page load, the size set either statically (via height and width) or via jquery is ignored. Instead the google chart inside the div is very small. When the page is reloaded with the tab being active (selected) the size is displayed correctly.

Q: Is it possible to run a javascript function when the tab is activated in order to resize the div?



Thanks,
Armin

[rostislav]

Hello,

I couldn't replicate your issue, but this may help you:

Code: Select all

$('#fd_tabcontrol-0').on( "tabsactivate", function( event, ui ) {

	$('#fd_tabcontrol-0').tabs("refresh");

} ); 

Replace the zero in #fd_tabcontrol-0 with the index of your tab control, starting from zero.

What this code will do is refresh the tab control on every tab activation which causes width and height of the control to be recalculated.

[armin o]

Hi Rostislav,



what actually worked is this:



var renderMicroChart = function() {};
var renderMacroChart = function() {};

[...]

within the chart code:

var chart = new google.visualization.ScatterChart(document.getElementById(chartElement));
chart.draw(data, options);
renderMicroChart = function(x) {chart.draw(data, options)};



and finally your suggestion:

console.log("submitting OTC tab refresh event handler...");
$('#fd_tabcontrol-0').on( "tabsactivate", function( event, ui ) {

$('#fd_tabcontrol-0').tabs("refresh");
renderMicroChart();
renderMacroChart();
console.log("OTC Tab refreshed");
} );



Thank you!

-Armin