Component Builder Button Size

[GregoryArndt]

Good day Themeco Team,

Again, another question on component builder as I am trying to learn the best way to do things. I used the doc and video to get the basics of Component Builder and have created some buttons. I was able to get everything linked up with the help of @stilemas for my previous question in this post.

Now I would like to ask about sizing of the button. Since the component was built using an anchored div with a headline for the label, when I add the component to a column it takes the width of that column. I had originally set the border and shadow in the div element, and then created a new button where I set the border and shadow in the headline element thinking that it would not resize to the column. Unfortunately not. Basically this seems to happen if I have a row with multiple columns and it resizes to the size of the column, but if I create a new row with auto template and only one column then the column resizes to the button component. This is the only way I have found around this resizing issue. For the home page this is what I have done and it’s fine, but the about page uses a single row with multiple columns in a row set with triple template and each column has an image, a headline, a button, and text.

I am sure that I am missing something somewhere and would like your guidance in finding a way to have the button not size to the column but the button stay the width of the component headline. And which is the better way to create the border, fill and shadow, in the div element or in the headline element of the component?

[nabeel]

Hi @GregoryArndt,

Thank you for reaching out to us. To align a button in a column that doesn’t take full width, simply enable the Flexbox option of the Column and select Center for the Horizontal alignment under the Flexbox settings (see screenshot)

Let us know how this goes!

[GregoryArndt]

Hi @nabeel,

Thank you for your guidance. Themeco support is the best!

What I did instead was enable the flexbox in the component div element instead of the column it is placed in. For this to work the way I wanted, I had to make sure that the border, fill and shadow was applied to the headline element of the component rather than the div element. As usual, there are multiple ways to accomplish the same outcome.

Now I just need to add some padding parameters to the component.

Edit: I was able to get the padding parameters in. If Themeco adds the ability to dynamically set parameter checkboxes as requested by @stilemas in this post it would be some awesome functionality.

[nabeel]

Hey @GregoryArndt,

Glad that we could be of help. Your request regarding parameter checkboxes has been noted,

Cheers!