Skip to content
English
  • There are no suggestions because the search field is empty.

Studio Features: Border Padding, Zoom To Fit & Scrollable Text

Table of Contents


Feature 1: Border Padding

What is it?

The ability to add an inside margin to your text boxes, captioned images, multi-place choice container, etc.

 

Where do I find it?

The "padding" value of an element can be found in the Border Properties section of the Properties Panel on the right side of the Studio screen.

 

What can I use it for?

You can use padding to quickly create textboxes or images with borders. Instead of making two separate objects, one for the text and one for the border, you can create a single item that can be moved or clicked as one object.

 

You can see a simple text box with a 1 pixel black border and 50 pixels of padding in the example below.

 

Image of text box with padding.
Image of the text box's border settings.

 

 

This can be used for more than visual decoration. You can use the 'padding' element to create an item that is functionally larger than it looks. In the following example, there are two images with padding applied to them. One of them is marked as a 'correct' answer, the other is marked as 'incorrect.'

 

Image of 2 circles, one orange one green, with padding applied to them.

 

 

Both image elements have 30 pixels of padding applied to them. The effect is that the bounding box for the image is much larger than the image itself. This means it's easier to click or tap on the images than it would be if there was no padding. We can see the difference this makes when the elements are small.

 

This screenshot is taken directly from the Deck Player. As you can see, the clickable area around the circle is much larger than the circle itself. This is a simple application of the padding property, experiment and see what ideas you can come up with!

 

Image of 6 different colored circle. The pink Circle has visible padding around it, indicating a larger clickable area.

 

 

Feature 2: Zoom to Fit Images

What is it?

Images now have three sizing options:

  1. Default: The image maintains its aspect ratio and scales based on the size of its container.
  2. Stretch to fit: Distorts the image to fill the entire container.
  3. Zoom to fit: Zooms the image to fill the entire container, but maintains the original aspect ration. Clips the image to fit in some situations.

 

Where do I find it?

You can find the setting in the Image Property panel of any image element. 

 

Image of Image Properties panel.

 

 

What can I use it for?

The additional options can help you format your images. To show what they do there are three examples below. Each of the images uses the same picture of a green circle.

 

Default Sizing:

 

Image of green circle that is outlined blue, indicating it is selected.

 

Stretch to fit:

 

Image of the green circle that is stretch to fit.

 

Zoom to fit:

 

Image of the green circle that is zoom to fit.

 

 

Feature 3: Scrollable Text

What is it?

Text boxes that can scroll.

 

Where do I find it?

You can make a text box scrollable using the Text Properties panel of any text box element. 

 

Image of Text properties with the Scrollable option outlined in white.

 

 

What can I use it for?

You can fit more text inside of an individual card or text box using the scrollable text element.

 

In the example below, the text box has been given 20 pixels of padding and made to be scrollable. As you can see, the bottom of the text box appears to have no padding. This is because the text continues. The padding is applied at the end of the text content and not to the bounding box.

 

Before scrolling:

 

Image of text box that has 20 pixels of padding and made to be scrollable. Bottom of the text box has no visible padding.

 

After scrolling:

 

 

Image of the text box from above but there is no padding above now, but the padding on the bottom is now visible.

 

 

To scroll through the text, you can use your mouse wheel or tap and drag on a phone, tablet, or other touch screen device. It might be useful to add a small caption near the scrollable text box so that students know that there is more to read! 

 

If you have any further questions, please feel free to email us at Help@boomlearning.com or call us at (833) WOW-BOOM. A real human will happily help you!