Qlik Community

Ask a Question

Integration, Extension & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
Our next Qlik Insider session will cover new key capabilities. Join us August 11th REGISTER TODAY
cancel
Showing results for 
Search instead for 
Did you mean: 
claudiadrey
Partner
Partner

Tabs in MashUP

Hi all

I'm working on a Qlik Sense mashup. In the mashup I'm using tabs. When the first tab is selected my qlik sense object is visible. When I select another tab only the title from the object is visible.

I have tried to use the qlik.resize function. But It doesn't work.

html:

<!--.content-section-c-->

<section class="content-section-c">

  <div class="container">

   <div class="row">

    <div class="col-lg-12 col-md-12 col-sm-12 borderShadow">

     <div class="tab" role="tabpanel">

      <ul class="nav nav-tabs">

           <li class="active"><a href="#Tab1_big" data-toggle="tab">Tab1</a></li>

             <li><a href="#Tab2_big" data-toggle="tab">Tab2</a></li>

             <li><a href="#Tab3_big" data-toggle="tab">Tab3</a></li>

      </ul>

       <div class="tab-content">

          <div class="tab-pane fade in active" id="Tab1_big">

        <div class="chart qvobject" id="Toggle1_big"></div>

         </div>

          <div class="tab-pane fade" id="Tab2_big">

        <div class="chart qvobject" id="Toggle2_big"></div>

         </div>

          <div class="tab-pane fade" id="Tab3_big">

          <div class="chart qvplaceholder" id="Toggle3_big"></div>

         </div>

       </div>

       </div>

   </div>

   </div>

  </div>

</section>

<!--/.content-section-c-->

js.:

$('#Toogle1_big').on('click', function(){

  qlik.resize();

});

$('#Toogle2_big').on('click', function(){

  qlik.resize();

});

$('#Toogle3_big').on('click', function(){

  qlik.resize();

});

Can somenone please help me?

Thank You

Claudia

1 Solution

Accepted Solutions
Yianni_Ververis
Employee
Employee

Most likely you resize before tab's promise has resolved.

You can try to

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  qlik.resize();
})


from

https://getbootstrap.com/docs/3.3/javascript/#tabs

If you are not using bootstrap try to find the on .done or .complete function

Yianni

View solution in original post

4 Replies
Yianni_Ververis
Employee
Employee

Most likely you resize before tab's promise has resolved.

You can try to

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  qlik.resize();
})


from

https://getbootstrap.com/docs/3.3/javascript/#tabs

If you are not using bootstrap try to find the on .done or .complete function

Yianni

View solution in original post

claudiadrey
Partner
Partner
Author

It works !!!

Thanks soooooo much !!

Claudia

fernandocalixto
Partner
Partner

Hi,
I have the same problem... do you have your example solved? I'll be so attentive and have a nice day 🙂

emraan_meer
Contributor II
Contributor II

if we want to show a visualization in a div then it should must comply followings:

  1. div should be visible (before calling qlikApp.getObject("divName", "chartName");"
  2. div should have some height

when you qlik a tab, you are actually trying to put the visualization in a div that is hidden.

put some delay in fetching the visualization or trigger the fetching of visualization on the div visibility.