Button Bar Divider Lines do not Separate Buttons

Discussion created by Malcolm on Feb 27, 2017
Latest reply on Mar 15, 2017 by TSGal

Product and version FMPA

OS and version Mac OS X 10.11.6

Hardware MacBook Pro (Retina, 15-inch, Mid 2015)


The divider width is not taken into account when determining button width in a button bar. The internal width of the button bar is divided evenly between all the buttons. The divider is then centred approximately above the point at which two buttons meet. This prevents us from using the divider in many situations.


The problem is particularly obvious when the divider width approaches or exceeds double the line width of the buttons. The adjacent button borders are completely masked by the divider.


How to replicate

Create a button bar. Set the divider line width to 3px, set the button border width to 1px. Use contrasting colours to make it obvious which element is being rendered.


The problem is illustrated in the image below. On the left is a "button bar" mimic made from graphic elements. The three objects to the right are button bars with borders set to 2px. The divider is set to 1px, 3px and 4px.



Make many different buttons bars and align them carefully.



Divider Lines.png