Article: How to customize toolbar and its overflow behavior

We are receiving quite a few questions about which buttons are rendered in the toolbar overflow for object view and object edit and it seems most people do not know it's easy to customize.  This article explains how to do it. 

Depending on the device size/browser width, more or less buttons will be shown in the toolbar and the toolbar overflow container.  By default, the UI (V4.0.2) allocates 50% of the available width to the object name (the title) and the remaining 50% to the toolbar for most device sizes.  For extra small devices (width < 768px), the percentages are 30 and 70 respectively.

However, this behavior can be changed with some simple CSS rules.

For example, if you would like to favor having more buttons on the screen rather than in the overflow, you may want to allocate say 20% to title and 80% for the toolbar (and 10%/90% for extra small devices).  You could do that by simply adding the following to a custom sidebar:

<style>
@media only screen and (min-width: 769px) {
    /* For all NOT small Devices */
    .rbs-objectEditTitle,.rbs-objectViewTitle {
        width: 20%; /* Rest of space will be consumed by toolbar buttons and overflow */
    }
}
@media only screen and (max-width: 768px) {
    /* Device is Extra Small */
    .rbs-objectEditTitle,.rbs-objectViewTitle {
        width: 10%; /* Rest of space will be consumed by toolbar buttons and overflow */
    }
}
</style>

Note: to access custom sidebar editor:

• From App Selector, Go to App Settings
• Select More Actions... from the toolbar
• Select Custom Sidebar

I hope you will find this useful. Thierry.