asked on July 28, 2020
The client needs a Classic pivot where he may even take 15-20 fields in the row dimension. The component gives the error "TOO MANY COLUMNS FOR CLASSIC FORM, SWITCHED LAYOUT TO COMPACT FORM". I solved this by increasing the component width from 100% to 300%.
Now, the toolbar icons I will easily shift them to the left. The only problem is that when the client pops up the field list, he has to scroll to the center of the pivot, make changes and scroll back to the left.
Is there some API where I can custom set the left and top position for the fieldlist and other option dialogs. Then my entire problem is solved. Thank you. Infact this will be useful to all your customers!
⋅ July 28, 2020
Hello,
Thank you for reaching out to us.
Our recommendation is to override appropriate CSS for chosen pop-up windows so that they appear centered on screen regardless of grid state and scroll.
It is achievable using the following code snippet:
#fm-fields-view,
#fm-popup-options,
#fm-popup-format-cells,
#fm-popup-conditional {
position: fixed !important;
left: 50vw !important;
transform: translate(-50%);
}
You are welcome to see an example we have prepared for you.
Please note that styles may need to be changed in order to fit the specific layout of the page Flexmonster is placed on.
Please let us know if it works for your case.
Our team is looking forward to your reply.
Best regards,
Illia
⋅ July 30, 2020
Dear Illia,
Problem solved. One more problem. How do I make the report header left aligned, and also the loading data dialog box center of the screen (just like the field list). Please give me the CSS for that as well. Thanks a ton!
⋅ July 30, 2020
Hello,
Thank you for your feedback.
We have complemented the earlier provided example so that it demonstrates applying center alignment for all pop-up windows of the component.
It is achievable using two CSS selectors: .fm-ui-popup, .fm-popup:
.fm-ui-popup, .fm-popup {
position: fixed !important;
left: 50vw !important;
top: 50vw !important; //vertical alignment
transform: translate(-50%, -50%);
}
The title of the grid can be aligned to the lift using the following code snippet:
#fm-grid-title {
text-align: left !important;
}
We would like to draw your attention to the fact that the required selectors can be retrieved using the developer tools of your browser.
Please let us know if it works for your case.
Our team is looking forward to hearing from you.
Kind regards,
Illia
⋅ July 30, 2020
Hey,
Thanks for the reply. The code in your last code does not work. But this worked, mixed code from both the posts and it works:
.fm-ui-popup, .fm-popup {
position: fixed !important;
left: 50vw !important;
transform: translate(-50%);
}
Only one problem now, the vertical scrollbar goes to the end of the div if the div is 500%. Anyway I can keep it floating throughout on my present viewport ?
Otherwise the user has to scroll to the extreme right to use the scroll bar and arrow keys don't work too well because you don't have page down!
Also how to I get all graphs to come left aligned on the screen they come center aligned ?
Why dont you guys fix this error too many columns for classic mode if you support it in a large div anyway. Cant you auto increase the div width ? Then I don't have to do any of this!! 🙂
⋅ July 30, 2020
I tried to auto resize the component if I get this too many columns error. I cannot set the width at runtime. How can I change the width of the component from 100% to 500% at run time, that will also solve my problem.
Also if you an allow classic mode with unlimited columns simple by not having fixed columns on the left, then also it solves a big problem. Otherwise I have to keep table size at 500% and the scroll bar goes to the extreme right which is very annoying.
⋅ July 31, 2020
I managed to make the title fixed, using your code so I can keep it in the center now. It also works for the tool bar but the popup's dont work incase of export, format and charts. Can you also give me some code that can make sure the toolbar remains fixed as i scroll.
Its a very annoying error. We cannot use compact mode but have to use classic mode for certain reports. It's non negotiable.
⋅ July 31, 2020
Hello,
Â
Thank you for reaching out to us.
Â
Talking generally, the requirement to switch to the compact mode is a known (more…)
⋅ July 31, 2020
Hey,
Can I have some error event that triggers for the classic mode too many columns error ? I am afraid data error event does not trigger, is there some other flexmonster error event ?
Then I can expand the DIV to 500% when that error is raised and set the grid for classic view once more and expand all.
Thanks please guide me. This is very important for us.
⋅ August 3, 2020
Hi,
Just a gentle reminder. Can you show me if I can trap the error in some way ? Thanks.
⋅ August 3, 2020
Hello,
Thank you for writing to us.
We want to explain that Flexmonster does not provide any events that would be triggered after switching the form. Even so, we suggest considering using the workaround described below.
Create the function that would check whether the classic form is currently chosen. In case it is not, expand the div and switch back to the classic form.
function check() {
if (flexmonster.getOptions().grid.type != "classic") {
//div expansion logic
flexmonster.setOptions({ grid: { type: "classic" } });
flexmonster.refresh();
}
}
Finally, subscribe to the reportchange event so that every time the report is changed (for example, nodes are expanded, or additional fields are added), the check function expands the container and switch the form back if needed.
flexmonster.on("reportchange", check);
Please see an example demonstrating tracking of the form switching.
You are welcome to check out our documentation dedicated to methods and events used in the described workaround:
We hope it helps.
Please contact us in case other questions arise.
Kind regards,
Illia