Using FileMaker 19.6.1.45, on Windows 10 22H2. I thought that dividers were used to add space between the buttons. @Malcolm asked a question on Claris Community in time of V 15, saying that the dividers were displayed over the buttons, instead of between buttons. One TS said that was a bug. I get the same with V 19.
Do you also get the same results ? Please note the bar is vertical. Some say you should set some padding, other say the width of the line does it all, I say what is the right answer. Don't run for the Help file, it's of no use.
The divider line overlays the left/right or bottom/top of the button segment. When your segment corners are square the width of the divider does not matter much. When you apply effects like corners or shadows a divider that is wider than 2px may not be suitable.
When I get back to my office I’ll post a file that contains some button effects.
I'm just going to paste in a screen shot. These two button bars use the divider line to generate a different look.
Edit: I've updated the button effects file to incorporate the new examples provided in this thread. ButtonBarFormatting.fmp12 (396 KB)
Thank you @Malcolm for the file, reminds me of a missing feature for button bars I'd really love: make the width change with the length of the text like with tabs of a register. I sometimes have texts ranging from 4 to 20 characters and have to break up button bars into single ones because this kind of auto adjustment is not provided
I played with your file and understood more things. For example
I changed the dividers color to red. The padding sets the length of the dividers, here the height. Pretty straightforward.
I selected two buttons
We see the thin red line - remonds me of a song ! Now what if I want to have the buttons further apart ? I thought that having a thicker would to the job, that is raise the space between the buttons. But it's not. See
The divider lines go over the buttons.
Conclusion is that the Dividers are not used to set the space between the buttons.
So, is there away to determine the spacing the butttons ?
I don't believe you can use button bars to achieve the visual representation you seem to be looking for (something I would describe as non-contiguous or separate buttons with equal spacing between them).
The object has its limitations. Just the same way you cannot apply an outer shadow to a button bar segment. We are talking about one bar and the segments will always touch each other.
Looks like the segments have a line around them and rounded corners. This can work, but not always. If you need the distance between the segments to be large, it forces you to have a line of same width all around. Removing the line on top and bottom will make the round corners look funny. So it can work, but it is strongly dependent on the look you are after.
The button segment line width is the most effective way to generate space between buttons. The limitation of this is that the button outlines need to be created with the inner shadow options. Shadows don't produce crisp lines, and the colour is hard to control. Shadows aren't displayed on iOS.
Here is a walk-through,
starting with a default button.
apply line to the button segment. This is solid 12px transparent.
Set line on the button to none. Set line on the divider to none. Increase height of the button
Select inner shadow button. The default settings produce a 1px border. You may want to modify the line colour.
Another example,
Default button
Set button segment line width to 12px, transparent, right hand side only
Set divider line width to 12px. Set button line width to 12px, left hand side only and select the inner shadow option.
Final example, the button fill and outline are created using inner shadow. Set opacity to 26%, spread to 13. Button segment fill is solid colour, transparent. Lines on the button, button segments, and divider are set to none. Note, that opacity isn't important for this.
The effects produced by inner shadow vary a lot and the results are not easy to control. If you like what you get - great. In this example, we use an odd feature of inner shadow. There is a tipping point, which depends on the size of the object corner radius of the button segment. At the tipping point a change of 1px on the amount of corner radius will generate fill. Initially, the fill is lighter than the border, each pixel increase makes the fill more opaque. The other issue is that we cannot directly control the width of the border. To modify the border width you have to make changes to corner radius and spread, and see what effect it has.
