Radio button and checkbox - reduce bounding box size

May 11, 2016

Hi,  I'm trying to manually build an accurate simulation of online forms within a system which contains radio buttons, checkboxes etc. I can reproduce all the actions /responses I need with triggers, buttons sets etc. However I have one issue.

I'm using the smallest radio button and smallest checkbox available which are a perfect match for the client's system. However there are large bounding boxes around the actual clickable objects. If the radio buttons or checkboxes are put in a row on the slide close together the bounding boxes overlap the adjoining buttons or checkboxes. When you test the buttons or checkboxes you don't always select or deselect the correct object due to the overlap as the top bounding box is covering part of the object below. Is there a way of reducing the size of the bounding boxes to about the size of the actual button or checkbox? I have tried in the format tab but any pixel changes are ignored. I don't want to change the size of the button/checkbox, just the bounding box.

I did have the idea of building my own custom radio buttons/checkboxes with states however I can't then toggle the select/deselect behaviour like the provided objects. 

 

19 Replies
Ashley Terwilliger-Pollard

Hi Trevor,

Thanks for reaching out here - and there isn't a way to change the bounding box overall size but I'm curious how much overlap you saw? If it seems beyond the "normal" it's something we could have our team take a look at. If you've got a screenshot or .story file to share here we're happy to take a look. 

Trevor White-Miller

Hi Ashley, As I'm using the smallest of the radio button and checkbox options the bounding boxes are more of an issue than the standard question type size. These smaller ones are excellent for advanced system simulations as they match IE and Chrome browser sizes but it does mean they are likely to be close together as in an online form. I'll post you a story file tomorrow.

If the bounding boxes don't have to be that large it would be great if they could be made smaller in a later release.

Ashley Terwilliger-Pollard

Hi Trevor,

I'd leave the decision and rationale behind their size up to our Product team, but happy to take a look at your sample and compare it to mine to see if there is anything different happening. If it's determined the be that size by default it's certainly something we can share as a feature idea. 

Walt Hamilton

Two thoughts, You could put an invisible shape over the boxes that would prevent them from being clicked. Then put small invisible shapes over each button that could be clicked on. That may be a lot easier than building the buttons from scratch. Alternatively, you could replace the buttons with copies of them that do not have the too-large border.

The point is, that however you do it, if you use states named Selected and Normal, you will get those behaviors without having to write your own triggers. Select the appropriate group of buttons, right click, and make them a button set, and you will have all the exact same behaviors as the built-in buttons.

And no, it is not you; the built-in borders on radio and check buttons are unreasonable oversized.

Trevor White-Miller

Hi Walt, The Selected and Normal states in a button group works fine for radio buttons as they will deselect a different previously selected radio button. However with checkboxes where you need to allow multiple selected boxes and also be able to deselect a box by clicking it again the only solution is the use triggers and a toggle behaviour.

 

Ashley Terwilliger-Pollard

Thanks Trevor - you really put those close together! 

I took a look and confirmed with a few others (it matched a brand new file too) and it seems that the box can't be shrunk smaller than 49 x 61 and the bounding box will scale around it, but won't go smaller than you're seeing. Typically the bounding box is set as such to include the text associated with a potential answer as well - in a standard set up it seems I could insert one 12pt character before the box expands/wraps the text.

So it seems that you'll either need to look at spacing the buttons out further or turn each button into an image so that you can crop fully down to the size required and then add the associated states of selected - you should only have to do one button and then duplicate it. You can still use the images as buttons in terms of submitting a user's answer to a question using a freeform style question and if needing the user to only pick one, create a button set out of your images. 

Walt Hamilton

By longstanding computer custom, only one of a group of radio buttons can be selected, while any number of checkboxes in a group can be selected. The nature of the selected state for a checkbox in SL2 is that if the user clicks it, it changes to the selected state, and if the user clicks again, it toggles back to normal state. If you have a state named "Selected", this behavior is hard-wired to that checkbox.

Writing your own triggers that mimic the built-in states can cause them to come into conflict, with results that are frequently interesting, but seldom useful or benign.

Nicole Brady

Hello! - I'm wondering if there have been any developments to this question. 

I am creating a storyline where someone assesses something - they have to check off their selection Gold, Silver or Bronze. However, I am having difficulties with the checkbox borders overlapping and affecting the answer that ends up selected. 

Just wondering if there has been any work done on this feature in the past two years or if it would be considered in the future. I understand the checkboxes are designed to input text following the box, but this doesn't work for the project I am working on. Hoping for an easier fix than making images etc because this activity is being used extensively for the project I am working on. 

Thanks in advance!

Lauren Connelly

Hi Nicole!

Thanks for checking in! I don't have an update on this feature and we don't have a similar feature on our current roadmap. 

In the meantime, our community members might have a workaround for this! Would you mind sharing your file so we can see what you've built so far? 

You can share your file by using the Add Attachment button in this discussion.

Ahmad Nairat

Hello everyone, 

I'd like to post my solution as it may be helpful for any future-visitors.

First, my case is to place checkboxes over a screenshot that was snipped from a web page so I don't need text, just the checkbox.

No matter what I try to do it keeps having a very-big bounding area, by coincidence I typed something while the checkbox was selected and once there's text the bounding area got much smaller, it's still relatively big but this solved my problem. So all I did was to type blank text there and viola .. it all works like charm.

Here's a snip that helps you understand how much smaller it got, I hope my comment helps.