Borders Around Components

Feature Requests
1

I would like to be able to put a border around grouped components especially. I could put them in a container to get a border, but then I have too much padding.

This CSS workaround does it but then I don't have enough padding:

/* Retool seems to now be putting the component ID in a class so 
you can target specific components with CSS. I like. */
._retool-container-chgProductTypes, ._retool-container-chgBundleTypes {
  border: 1px solid #dedede;
  border-radius: 4px;
}

One side effect of this technique is that if you hide the component, you still get a little box in it's place.

2

Hi @bradlymathews! Could you share a screenshot of what you're trying to accomplish? We're actively working on improving our style editors!

3

See this screenshot of switch groups (the top two) that I used the above CSS on:

image
image1785×337 41.4 KB

There is no space between the two borders. The switch groups at the bottom are placed into containers. They have too much space at the top leaving them unbalanced. The new grid allows them to take up a little less space than they used to which is nice.

An interesting side effect I notice, not related to my issue here, is even though the group in the container has a tad less space, the algorithm that decides how many columns to use has different (and better) results.

Some components (form and listview) don't work as well when components are in containers, so providing a border around a component bypasses that and simplifies the layout.

1 Like
4

+1 I feel like this should be available for most of the components, like text and statistic.

1 Like
5

Hi @alansee Thanks for chiming in! It doesn't look like this was shipped yet, but we did ship padding & margin controls for the container. It should now be a bit easier to use Bradly's container workaround :sunglasses:

6

@Tess Thanks! Will check that out.