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

rbartley — Thu, 12 Oct 2017 10:28:56 GMT

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>

<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>

</div>

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

Chart code generated by Qlik:

</div>

<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>

</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.

topic In Qlik Sense Mashup calculation condition message sometimes displayed as i (information) icon in Integration, Extension & APIs

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