After upgrading to Splunk 6.5.1, why are the XML panels with the depends tag not adhering to the custom width assigned in Javascript?

[bkeif]

Hello,
We just upgraded to 6.5.1 and it seems to have broken several key features of our dashboards.

1) In the Splunk 6.x Dashboard Examples app, the suggested method of assigning custom width to xml panels is with a custom javascript file. This worked great prior but after the upgrade all panels that use the <depends=”$token$”> feature to appear only when needed do not adhere to the javascript (js) width. They simply always split width evenly across the row ie 50/50, 33/33/33, etc. depending on the number of panels.

Has anyone else seen these issues and/or come up with a reason or workaround?
At this time I do not want to switch the dashboard to full html but would like to have custom width and the depends tag at the same time. I have included an example snippet that will show panels using depends ignoring js and panels that do not use depends adhering when in version 6.5.1.

Thank you for your time.

XML

<form script="default.js">
  <label>Testing</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-5m@m</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="checkbox" token="show" searchWhenChaned="true">
      <label>debug.show</label>
      <choice value="yes">yes</choice>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>sourcetype=* | stats count</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="drilldown">row</option>
        <option name="dataOverlayMode">none</option>
        <option name="count">2</option>
      </table>
    </panel>
    <panel>
      <table>
        <search>
        <query>sourcetype=* | stats count</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="drilldown">row</option>
        <option name="dataOverlayMode">none</option>
        <option name="count">2</option>
      </table>
    </panel>
  </row>
  <row>
    <panel depends="$show$">
      <table>
        <search>
          <query>sourcetype=* | stats count</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="drilldown">row</option>
        <option name="dataOverlayMode">none</option>
        <option name="count">2</option>
      </table>
    </panel>
    <panel depends="$show$">
      <table>
        <search>
          <query>sourcetype=* | stats count</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
        </search>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="drilldown">row</option>
        <option name="dataOverlayMode">none</option>
        <option name="count">2</option>
      </table>
    </panel>
  </row>
</form>

And the JS

require([
    'jquery',
    'splunkjs/mvc/simplexml/ready!',
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/postprocessmanager',
    'splunkjs/mvc/eventsviewerview'
], function($) {

  var mvc = require('splunkjs/mvc');
  var tokens = mvc.Components.get('default'); // token model

  var ensureFit = function() {

  var firstRow =  $('.dashboard-row').first();
  var panelCells =  $(firstRow).children('.dashboard-cell');
    $(panelCells[0]).css('width', '70%');
    $(panelCells[1]).css('width', '30%');
  var secondhRow = $('.dashboard-row')[1];
  var panelCells2 = $(secondhRow).children('.dashboard-cell');
    $(panelCells2[0]).css('width', '60%');
    $(panelCells2[1]).css('width', '40%');

    console.log("panels resized");
    $(window).trigger('resize');
  }
  ensureFit();

});

[cblasko_splunk]

In 6.5 whenever an element is displayed from hidden state, width is recalculated and applied again. This results in overriding of the width when the user clicks any single row in “User Lookup” panel.

The compliance.js file sets the width of panels. Instead of setting width using JavaScript one can use the existing compliance.css file for setting width. The below CSS can be added in compliance.css file which will fix this issue. It is always recommended using CSS file instead of JavaScript for styling.

#panel1 {
   width: 70% !important;
} 

#panel2 {
  width: 30% !important;
}
#panel3 {
   width: 100% !important;
}

#panel4 {
   width: 100% !important;
}

#panel5 {
   width: 23% !important;
}

#panel6 {
   width: 54% !important;
}

#panel7 {
   width: 23% !important;
}

#panel10 {
   width:100% !important;
}

#panel17 {
   width: 35% !important;
}

#panel18 {
  width: 30% !important;
}

#panel19 {
  width: 35% !important;
}

#panel20 {
   width: 70% !important;
}

#panel21 {
   width: 30% !important; 
}

#panel22 {
   width: 100% !important;
}

#panel23 {
   width: 65% !important;
}

#panel24 {
   width: 35% !important;
}