I have a dashboard row with two panels, where the width of the panels is set in javascript to 20% and 80% using this script.
require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {
// Grab the DOM for the score row
var scoreRow = $('#score_row');
// Get the dashboard cells (which are the parent elements of the actual panels and define the panel size)
var panelCells = $(scoreRow).children('.dashboard-cell');
// Adjust the cells' width
$(panelCells[0]).css('width', '20%');
$(panelCells[1]).css('width', '80%');
});This works nicely for the dashboard configured with
<row id="score_row">
<panel>...<panel>
<panel>...<panel>
</row>however, as soon as I add depends="$var$" to the <row>, when var is set and the row displayed, the two panel widths are set to 50%.
If I inspect the page before the token is set, this is the raw html
but as soon as var is set, the html changes to
Note score_row is hidden class in the former, but as expected is not hidden after, but the widths are now 50%.
Any idea how to control this redraw, so the JS effects the displayed size as intended?
@bowesmana based on above JS code provided, I dont understand why you would need JS to apply width. You can use CSS nth-child(1) and nth-child(2) to get the same effect.
If you really want JS approach (which I think would be an overkill for your CSS use case), you would need to apply CSS override for token change event handler depending on which the row is displayed or hidden.
<form>
<label>Dynamic Row width Adjustment</label>
<fieldset submitButton="false">
<input type="checkbox" token="chkHideThis" searchWhenChanged="true">
<label></label>
<choice value="hidethis">Hide This?</choice>
<change>
<condition value="hidethis">
<set token="hideThis">true</set>
</condition>
<condition>
<unset token="hideThis"></unset>
</condition>
</change>
</input>
</fieldset>
<row depends="$alwaysHiddenCSS$">
<panel>
<html>
<style>
#score_row .dashboard-cell:nth-child(1){
width:20% !important;
}
#score_row .dashboard-cell:nth-child(2){
width:80% !important;
}
</style>
</html>
</panel>
</row>
<row depends="$hideThis$" id="score_row">
<panel>
<title>1</title>
</panel>
<panel>
<title>2</title>
</panel>
</row>
</form>@bowesmana based on above JS code provided, I dont understand why you would need JS to apply width. You can use CSS nth-child(1) and nth-child(2) to get the same effect.
If you really want JS approach (which I think would be an overkill for your CSS use case), you would need to apply CSS override for token change event handler depending on which the row is displayed or hidden.
<form>
<label>Dynamic Row width Adjustment</label>
<fieldset submitButton="false">
<input type="checkbox" token="chkHideThis" searchWhenChanged="true">
<label></label>
<choice value="hidethis">Hide This?</choice>
<change>
<condition value="hidethis">
<set token="hideThis">true</set>
</condition>
<condition>
<unset token="hideThis"></unset>
</condition>
</change>
</input>
</fieldset>
<row depends="$alwaysHiddenCSS$">
<panel>
<html>
<style>
#score_row .dashboard-cell:nth-child(1){
width:20% !important;
}
#score_row .dashboard-cell:nth-child(2){
width:80% !important;
}
</style>
</html>
</panel>
</row>
<row depends="$hideThis$" id="score_row">
<panel>
<title>1</title>
</panel>
<panel>
<title>2</title>
</panel>
</row>
</form>
