Gravit Designer discussion

Resize button to text

I’m wondering if I’m missed something but a central feature of html is missing: padding / sizing buttons by text.

For example the button on the bottom Create Topic it has a padding of 12px and when I modify the text it changes the size…

I would think of adding text to a rectangle and set the rectangle to resize to the text size with a padding (for each direction) option. But on the other hand you may need a button with an icon on it. So some other form inside the button. A symbol could increase it’s size to it’s content and have a background…

Maybe it is already possible with layers or something compound forms but I didn’t get it.

I have another idea: it’s a special type of grouping that also has the controls of position, rounded corners, style etc (fills for example) but the size is defined by the content + a padding definition.

Hi @iRaS,

I’m not sure what is this about as your suggestions seems to be more like “Sketch”(html/padding…)? but I think you could take a look at anchors - https://documentation.designer.io/design-aids/anchoring/ - maybe it would help to keep the padding distances.

You might be familiar as well with the “Scale font on resizing” feature - https://share.getcloudapp.com/yAuvvkXd

Maybe those combined into a symbol could work.

and maybe Shared Styles - https://documentation.designer.io/organizing-your-designs/shared-styles/ would help as well.

I don’t want to scale the font. I want to scale the button to the text size. Better I want to scale a container to it’s content + padding.

Both features you mentioned don’t help here. I puzzled almost two hours in the morning how to do this and couldn’t believe it is not possible. After reading and trying almost everything I was some how upset because it should be so simple and basic functionality. The usual way you design buttons in the web is not with a fixed width.

It’s not about sketching html behavior it is more about layouting a new page faster with an existing pattern but different content. The content should fit and have the same padding. Adjusting the padding to the new size can be complicated especially if there is not “magnet” on the same distance to the content on the opposite site.

Just try it yourself:

  • create a rectangle
  • create a text
  • move the text to the center
  • change the text
  • adjust the width of the rectangle

It is not even showing the distance to the text because the text is inside. Even if it would it would only show the distance to the right side of the text.

I found another thing that would do what I suggested with some slightly changes: the group.

In the group you have the option to choose between group and frame. The difference seems to be how the group modifies the content. When you resize a group the contents change the size when it is set to frame not.

In both versions you can define some styles and they use in both versions the borders of the content. The frame (or a third type of a group) could instead define a rectangle under the content and the size could either be fixed or auto (+ padding).

2 Likes

This topic was automatically closed after 180 days. New replies are no longer allowed.