Bricks Form: how to align checkbox label?

How To
1

How can I align the label to be inline with the checkbox? Also, how can I style the checkbox? Thanks.

Screenshot 2024-07-25 at 18.50.37
Screenshot 2024-07-25 at 18.50.37877Ɨ584 40.3 KB

2

It happens by default when the text is too long: Sample Page ā€“ Try Bricks ā€“ t82f9596

3

This isnĀ“t really a question about Bricks but instead very basic CSS.

There are multiple ways to do this but just to name one:

The checkbox-Field in the form seems to have a class called ā€œoptions-wrapperā€. The options wrapper itself is a <ul>. Inside the <ul> thereĀ“s one <li> which holds the <input> and the <label>.
In the custom CSS of the form, go to the CSS ā†’ Custom CSS and type something like

%root% ul.options-wrapper li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

%root% ul.options-wrapper input{
  margin-top: 6px;
}

That works for me. I guess the classes are identical across Bricks installations, so this should work for you, too. :slight_smile:

1 Like
4

Brilliant, that worked perfectly and thank you for the explanation. As a beginner, I would still expect it to display like that even when the text is longer. Bricks calls itself a visual builder after all. Thanks again :pray:

1 Like
5

YouĀ“re welcome! :slight_smile: IĀ“m always happy to help!

And yea, youĀ“re probably right about Bricks calling itself a visual builder. Coming from Elementor I can say that Elementor was much easier for me when I started building websites but also much more limited in terms of what you could actually do with it out of the box which is why IĀ“m very happy I switched to Bricks some time ago :slight_smile: