Vertical/Horizontal dividers - why transparent?


#1

As the title says - why are the horizontal & vertical divider widgets transparent? I need to layer these on top of a pane-based UI to show how it can be resized. Looks like I need to layer a grey rectangle underneath them now to make them visible… sigh


#2

Hi Chris, sorry for the trouble. It sounds like you might be zoomed out a bit. We currently have a bug where they will not show at a certain zoom level. If you zoom to actual size (+1 or CTRL+1 on PC), you should see them. I’ll add your vote to our internal tracker for that bug.


#3

Nope, it’s visible but transparent at all zoom levels (ie I can see the outline and the three dots of the “handle”, but the fill is transparent)


#4

Yuck! Sorry for the trouble. Could you please post a screenshot or two of what you are seeing? That should help us reproduce it so that we can get it fixed. Thanks!


#5


#6

Aha! Thanks so much for that. When you said dividers, I thought you meant a Vertical/Horizontal Rule control.

For the splitters, we had them transparent so that they would look good on all backgrounds. If you need them opaque, you have found the perfect workaround. Just add a Rectangle control and size it to match and layer it behind the splitter. Thanks!


#7

Hmm - I don’t think they look “good” on all backgrounds - more “indistinct”.

Splitters need to stand out, just like scrollbars, toolbars or any other bit of UI chrome. I honestly can’t think of a single scenario where I’d want it transparent, nor can I remember ever seeing a transparent one in any real world applications. Bog-standard grey is the right choice IMO.


#8

I think it’s more the case that we’re trying not to get in the way if you’re doing something with color in your wireframe. So if you had a non-white window or background, for instance, it would fit in with whatever color you set in the back.

I don’t believe a background image has been requested for the splitter before, but if there are others who feel like this would suit a specific need, we’d love to hear the scenarios in which you’re using them where they don’t work so we can compare with other common scenarios.


#9

Sorry to add to this conversation after already posting the above. But it occurred to me that if you want more control, the Shape control can be your Swiss Army Knife. You can use icons (the ellipsis works great here), set colors, etc, and get a more custom appearance.

We leave out properties for most controls to handle the 80% use case, so you don’t have to think about stuff like this most of the time. But in special cases, the way to do more is to dig into the properties of more generic shapes like this:

It’s clearly an ugly example, but hopefully it gives you some ideas.


#10

Weird - I was convinced that in Mockups 2 it was opaque grey, and having just checked I found it was transparent there too! I guess I must have only used it with white or grey backgrounds before and assumed it had a solid background.

To clarify - I wasn’t asking for a selectable background colour, but just that it could be solid grey. Now I’ve disproved my own argument I’ll go back into my box! :smiley:


#11

I’m looking to do the same thing. I want to add some color to my windows and dialog boxes. I select the elipses in the H.splittter, for example, but I see now way to change the color, even with a right click. I don’t know where this " the Shape control " is that you mention.


#12

Hi @sophsterm and sorry for the confusion with this.

You’re right, changing the color for the ellipsis can only be done by using the Ellipsis icon. Here is the way to quickly create a splitter using a Shape control:

Hope this helps! Please reach out via support@balsamiq.com if you need any further assistance with this. :slight_smile:


#13

Thanks. So why do you have to add the ellipses? In your other instructions, you just created a square and added color.


#14

Sorry, didn’t mean to add confusion to this one. I only added ellipses to mimic the V.Splitter control. :slight_smile:

I thought that using a shape control could be an easier workaround for this one since it allows you to have an icon (Ellipsis in this case) defined already in the same control. No need to group or anything else. Also the icon color will adapt to the background color you set, handy!

BTW, feel free to use the other method if it works better for you. We want this to be as easy as it can be for you (that’s why I added your vote for this feature too).