In Qlik Sense Mashup calculation condition message sometimes displayed as i (information) icon

[rbartley]

Dear all,

I have built a mashup page which includes a filter panel, two charts and two buttons which control which chart should be displayed (by using the bootstrap tab functionality).  The charts have a calculation condition to ensure that the chart displays a message if the minimum selections have not been made.  The first chart, which is set as active when the page is loaded (class="tab-pane active......" ) displays the full message, but when I switch between the charts, an icon is displayed instead, which shows the message when clicked on.  When I inspect the element, I cannot see any difference in the code generated by Qlik, so I'm not sure what is going on here.  Also if I make both charts active on load (again set both tab panels to class="tab-pane active......"), the message is displayed rather than the icon.  I would like to always see the message and never the icon.  Any ideas?

<!-- main section -->
<div id="modalWrapper" >
  <div  id="main" role="main" >
  <a id='butClose' class="closeButtonA" href='javascript:top.history.back();' target='_parent' onclick='closeChart();'><i  id='butClose'  class='closeButton fa fa-times-circle-o fa-5' title='Close chart window to return to previous page'></i></a>
  <div id="nonchartDiv">
  <div id="buttonDiv" class="container-fluid" >
  <div class="toolBarDiv  no-print row" data-toggle="buttons" >

  <ul class="btn-group paddedtopDiv col-md-5 col-sm-12 col-xs-12" role="tablist" data-toggle="buttons">
  <li role="presentation" class="btn btn-default  actionButton  active">
  <a href="#tabComparison" role="tab" class="actionButton" data-toggle="tab">Period Comparison</a>
  </li>
  <li role="presentation" class="btn btn-default  actionButton">
  <a href="#tabAllPeriods" class="actionButton" role="tab" data-toggle="tab">All Periods</a>
  </li>
  </ul>
  </div>
  </div>
<!-- filter panel -->
  <div class="container-fluid">
  <div id="toolbarDiv " class="row solid filterpanelDiv" >
  <div id="divFilter" >
  <div  class="qv-layout-small filter filterpanelDiv col-md-8 col-sm-12 col-xs-12 qvobject" id="filterPrice">
  </div>
  </div>

  </div>
  </div>
  </div>
<!--end of nonchartDiv-->


<!-- charts -->
  <div id="divChartContainer" class="chartContainer container-fluid" >
  <div role="tabpanel" id="tabCharts" class="tab-content  chart row solid">
  <div role="tabpanel" id="tabComparison" class="tab-pane active chart row solid">
  <div class="dataportalChart col-md-12 col-sm-12 col-xs-12 qvobject "   id="lineYearComparison">
  </div>
  </div>
  <div role="tabpanel" id="tabAllPeriods" class="tab-pane chart row solid">
  <div class="dataportalChart col-md-12 col-sm-12 col-xs-12 qvobject "   id="lineEvolution">
  </div>
  </div>
  </div>
  </div>
  </div>
</div>

Below is the view when the page is loaded (OK)

Chart code generated by Qlik:

<div class="qv-object-content ng-isolate-scope" qv-object-content="" component="object.content" options="options" object="object" backend-api="object.backendApi" layout="layout" ext="object.ext" selections-api="object.selectionsApi" tooltip-api="object.tooltipApi" throbber-api="object.throbberApi" on-init="onInit"><div qv-errorhandler="" class="object-error ng-scope soft-error" ng-class="error.class" tid="object.Error">

  <div class="object-error-content">

  <div class="object-error-title">

  <span class="ng-binding"></span>

  <i class="object-error-more icon-info" qva-activate="showMore($event)"></i>

  </div>

  <!-- ngIf: error.message --><div ng-if="error.message" class="object-error-message ng-binding ng-scope">Please select at least one Product Group plus one Market/Stage and one  Year</div><!-- end ngIf: error.message -->

  </div>

</div>

</div>

And now, when I select the second button (Not OK)

Chart code generated by Qlik:

<div class="qv-object-content ng-isolate-scope" qv-object-content="" component="object.content" options="options" object="object" backend-api="object.backendApi" layout="layout" ext="object.ext" selections-api="object.selectionsApi" tooltip-api="object.tooltipApi" throbber-api="object.throbberApi" on-init="onInit"><div qv-errorhandler="" class="object-error ng-scope soft-error" ng-class="error.class" tid="object.Error">

  <div class="object-error-content">

  <div class="object-error-title">

  <span class="ng-binding"></span>

  <i class="object-error-more icon-info" qva-activate="showMore($event)"></i>

  </div>

  <!-- ngIf: error.message --><div ng-if="error.message" class="object-error-message ng-binding ng-scope">Please select at least one Product Group and one Market/Stage</div><!-- end ngIf: error.message -->

  </div>

</div>

</div>

I have found that I can force the message to be displayed and the information icon to be hidden by overriding the css display settings:

.object-error-message

{

display:block!important;

}

.icon-info

{

display:none!important;

}

But I would prefer not to do so if there is another option.  I assume that there is.