Move buttons in toolbar modals

Hello, we would like to move the buttons in the toolbar modals (specifically the ‘Fields’ and ‘Layout Options’ modals) from the top of the modal to the bottom. Are there some options or styling we could use to achieve this? We’re looking at potentially having to write our own modals if we can’t achieve this level of customization.

2 answers

Public
Ian Sadovy Flexmonster 5 days ago

Hello Daniel,
 
Thank you for the question.
As for the ‘Layout Options’ modal, its code is open and you can make any changes in the flexmonster.toolbar.js file. For example, you can move buttons to bottom by modifying the following code (see lines 1407-1410):

    dialog.setToolbar([
{ id: "fm-btn-apply", label: Labels.apply, handler: applyHandler, isPositive: true },
{ id: "fm-btn-cancel", label: Labels.cancel }
], false /* true -> false */);

Everything else can be done via CSS.
 
As for the ‘Fields’ modal, customization of this view is a bit limited, because the code is complex and obfuscated (in other words, it’s a part of Pivot Table component, not Toolbar). But still, you can apply some CSS to move the buttons to the bottom, here is a sample: https://jsfiddle.net/flexmonster/of1hxptd/
 
Please let me know if it helps.
 
Regards,
Ian

Public
Daniel Rutledge 5 days ago

Thanks Ian, this will work. As you said we’re not particularly eager to rewrite the ‘Fields’ modal, as it’s rather complex. Everything else (colors, fonts, sizes) should be achievable with CSS.

Please login or Register to Submit Answer