how to fix toolbar in same design on pc and ipad

Resolved
Aekasak Amornmaturapot asked on May 9, 2024

How to get same toolbar items on PC and IPad/Mobile mode

Attachments:
FlexError1

4 answers

Public
Maksym Diachenko Maksym Diachenko Flexmonster May 9, 2024

Hello, Aekasak!

Thank you for your question.

To achieve the PC toolbar appearance on mobile devices, you should adjust the isMobile variable always to be false. This modification should be performed in beforetoolbarcreated event handler to override the default toolbar settings without changing flexmonster.toolbar.js. You are welcome to check the example: https://jsfiddle.net/flexmonster/sejLvkqc/ 
Please be aware that mobile browsers can have different functionality compared to PCs. As a result, some features or components of the PC toolbar might not work as expected on mobile devices.

We are looking forward to hearing from you.

Best Regards,
Maskym

Public
Aekasak Amornmaturapot May 10, 2024

Can you example in Blazor project event

Public
Aekasak Amornmaturapot May 10, 2024

ok i got it

window.flexMonsterToolbarMini = (pivot) => {
pivot.on("beforetoolbarcreated", ConfigFlexMonsterToolbarMini);
}

function ConfigFlexMonsterToolbarMini(toolbar) {
FlexmonsterToolbar.prototype.osUtils.isMobile = false;
// Get all tabs
let tabs = toolbar.getTabs();
toolbar.getTabs = function () {
tabs = tabs.filter(tab => tab.id != "fm-tab-connect");
// tabs = tabs.filter(tab => tab.id != "fm-tab-open");
// tabs = tabs.filter(tab => tab.id != "fm-tab-save");
tabs = tabs.filter(tab => tab.id != "fm-tab-export");
return tabs;
}
}

Public
Maksym Diachenko Maksym Diachenko Flexmonster May 10, 2024

Hello, Aekasak!

Thank you for your reply.
We are glad to hear that the proposed solution works for you.
Do not hesitate to contact us if more questions arise.

Best Regards,
Maksym

Please login or Register to Submit Answer