Bottom and Top Toolbar fixed position on a form or grid

[edfenech]

I’ve been looking for documentation or other user posts here regarding fixing in place the top and/or bottom toolbar and having either the form or grid scrollable. I don’t seem to have had any luck.

If it’s not a feature, I would certainly welcome it. My UX design pattern places the save, cancel (or close) button at the bottom right of a page. All other page specific action buttons are top left. On a form that excedes the visable area of the screen, the bottom toolbar is obscured and requires scrolling to locate; not a very good user experience. I’m compensating this by creating blocks and pages to limit the number of fields to avoid going beyond the visible screen, but this is not really a good solution as it requires more clicks.

Does anyone have an alternative? Am I missing something?

Cheers

[edfenech]

Okay, for those that are interested in playing with this, I’ve done a css hack using the following approach.
For a fixed bottom toolbar on a form, I inspected the elements and located the <td> with the class = “scFormToolbar sc-toolbar-bottom”.

In the onScriptInit of the form I added the following code:

echo '<style type="text/css">';
echo ‘.sc-toolbar-bottom {
padding: 0px;
spacing: 0px;
position: fixed !important;
bottom: 0 !important;
width: 100% !important;
margin-left: -20px !important;
}’;
echo '</style>';

The key attributes are flagged as !imporant which will override the default class attributes.

You can adjust further for your specific needs, such as the bottom or margin-left etc. For me, I’m a happy chappie as I can apply this to any form that has scrolling due to form size.

Hope that helps anyone looking for a similar solution without hacking away at the .css files