pvt menu ( top right side ) not visible unless page is resized with mouse

Hello, 
 
Thank you for reaching out to us.
 
We have prepared a JSFiddle example illustrating how Flexmonster can be used in several tabs: https://jsfiddle.net/flexmonster/t1L42hr0/

Please let us know if this helps.
Looking forward to your reply.
 
Kind regards,
Vera

Hello, 
 
Thank you for your reply.
 
We have not managed to reproduce such behavior on our end.
Could you please provide a code sample or JSFiddle with dummy data where the issue is reproducible?
This will greatly help to understand the problem better.

Looking forward to your answer.
 
Kind regards,
Vera

Hello, 
 
How are you?
We were wondering whether you managed to fix the problem with the top right side menu not being visible. Does the issue still persist?

If so, we would like to share a possible solution:
The idea lies in wrapping the Flexmonster container in another <div>, for example:

<div id="container1">
   <div id="pivotDiv1" class="tabcontent"></div>
</div>

If the same <div> is used both by the tab and by Flexmonster, it could lead to conflicts and unexpected results. We kindly recommend trying using a separate container for Flexmonster. 
 
Could you please let us know if such an approach works for you?
Looking forward to your response.
 
Kind regards,
Vera

Hello, Bilguun,
 
Thank you for reaching out to us.
 
We would like to kindly inform you that the Toolbar will be opened in mobile mode only on mobile devices despite the screen size. Moreover, some tabs are hidden in such mode (for example, controls dedicated to connecting to the local CSV/JSON file).
 
Therefore, we suggest using an approach illustrated in the example we have prepared for you.
 
Such an approach allows keep all tabs available in desktop version despite the size of the screen and makes the Toolbar scrollable when its size is not enough to place for all tabs.
 
Please note that opening the component on mobile devices still entails opening the in-built mobile mode.
 
Also, we would like to provide some additional explanation about the following code snippets taken from the example:
 
The function shown below is dedicated to moving all tabs of the Toolbar to an appropriate. Also, it overrides the showDropdown function of the Toolbar in order to display drop-downs correctly on scrollable area.

function customizeToolbar(toolbar) {
  toolbar.responsiveBreakpoints = [];
  toolbar.showDropdown = function(elem) {
    var menu = elem.querySelectorAll(".fm-dropdown")[0];
    if (menu) {
      menu.style.display = "block";
      if (menu.getBoundingClientRect().right > this.toolbarWrapper.getBoundingClientRect().right) {
        menu.style.right = 0;
        this.addClass(elem, "fm-align-rigth");
      }
      menu.style.marginLeft = -document.querySelector("#fm-toolbar-wrapper").scrollLeft + 'px';
    }
  };
  let tabs = toolbar.getTabs();
  tabs.forEach(function(tab) {
    tab.rightGroup = false;
  });
  toolbar.getTabs = function() {
    return tabs;
  }
};

 
Please note, that such a function needs to be called when creating a new instance of Flexmonster. It should be bound on the beforetoolbarcreated event.

var pivot = new Flexmonster({
  ...
  beforetoolbarcreated: customizeToolbar
});

 
Also, we would like to draw your attention to CSS styles from an example. Such styles are a mandatory part of the implementation of the required toolbar.
 
More about methods and events used in the example in our documentation:

• The Toolbar customization
• beforetoolbarcreated event

 
We hope it works for you.
 
You are welcome to contact us in case of additional questions.
 
Best regards,
Illia