SOLVED: Style search field with icon

Bricks Version: 1.3.6
Browser: 96.0.1 (64-Bit)
OS: Linux

Hi there,

Unfortunately, the search field with the style icon doesn’t work as I initially thought.

If I want to style the border and if necessary the shadow in the content view, the border does not become visible.

Search-Field-have-not-this-Border

If I now use the radius, it gets really crazy, because then only the input field rounds itself. The icon button remains separate and angular. But then a small border can be seen angularly.

Search-Field-Border-Radius-without-icon

If I remove the border radius and then want to use the shadow, it doesn’t look much better either.

Search-Field-Shadow-not for-Icon-Field2

What am I doing wrong? Or are there really so many bugs? Are the features just built in and not tested to work properly?

My goal is simply to create a rounded search box with a border including a rounded search button, which may have a shadow as well.

Kind regards

Matze202

Hi Matze,

thank you very much for your report!
There have been some issues with the search field that will be fixed in the upcoming Bricks 1.3.7.

The border settings within “field” are only for the input field. To wrap a border around the whole element, you can switch to the style tab and set the border, radius, etc. there. Don’t forget to set the overflow to hidden (you’ll find it under layout in v1.3.7), so the background colors won’t bleed.

Best regards,
timmse

1 Like

Hi @timmse ,

if I only enter a value for the border radius, the element or part of the element behaves as if this entered value were linked immediately.

Here is the example for the text field:

The entire element under Style behaves in the same way:

How can I style the border radius for the icon?

Are these things also already fixed in 1.3.7?

Kind regards

Matze202

Hi Matze,

as already said, a lot of issues will be solved in Bricks 1.3.7 stable.
As far as I can see, the search field looks good so far (in my current 1.3.7 dev version ) :wink:

Best regards,
timmse

2 Likes

Yeah, looks really good. But have you checked whether all corners are rounded at the same time when you enter only one value in border radius without a link, as if they were linked?

That was a bug in 1.3.6 :wink:
Btw., the border-radius fields are linked by default in 1.3.7, as it is more common, to use an equal radius on all corners. But unlinking und using individual radius works fine.

1 Like

Great, I’m very happy. Then it might have been previously linked by default as well, and that link might not have been broken.

I’m curious to see whether these values ​​will then adjust equally in all the fields or will only appear in all fields after the Bricks Builder has been reloaded.

Next week I will test the beta if the release is not there yet.

Where can I find this? (1.3.7 Beta)

If I use a larger radius than your 6px, you also have to adjust the radius for the input field and icon content. In the input field, this now works wonderfully to adjust the radius on the left, but I still miss the separate frame settings for the icon, which then lays over the rounded corners.

You can find 1.3.7 beta on this link. Be waware of “beta=1.3.7” at the end of the URL.
https://bricksbuilder.io/account/?beta=1.3.7

@matejmohar

I didn’t mean the bea version, but “overflow to hidden” in the beta version.

Oh, sorry, my mistake. For that I can’t help you as I don’t have beta installed.