Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

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

Answered
cm asked on March 2, 2020

Hello,
We are evaluating flexmonster to buy
i setup a simple tabbed page with jquery and added a pivot in each tab.
for the first tab all ok.
for second tab, the pivot is visible but the top upper menu is not visible unless i resize the window with the mouse ( the menu for Format,Options/Fields/FullScreen). The left hand side menu is visible.
i tried both refresh on on the pvt or even simulate a resize evt from code to the window. nothing works.
please, help.
thank you
–m
 

7 answers

Public
Vera Didenko Flexmonster March 2, 2020

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

Public
cm March 2, 2020

Hi Vera,
I already know this example but it is of no help to us. I tried refresh() and it is not solving the problem. The top right side menu appears ONLY when i resize the window with the mouse.
Any other idea ?

Public
Vera Didenko Flexmonster March 2, 2020

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

Public
Vera Didenko Flexmonster March 10, 2020

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

Public
Bilguun March 26, 2020

Hello Vera i have this problem too so what should i do like this navigation solution implement small size window how do i enable it
Thank you

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 27, 2020

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:

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

Public
Bilguun March 30, 2020

Thank you Illia nice example

Please login or Register to Submit Answer