WAIT: Gap problem for inline dynamic data

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

Hello bricks team,

I have a button with the following text: Filters ({query_results_count_filter:jdlqmz})

The problem is that in the front end there is a space between count and the parentheses. But it displays well in Builder.

in builder

builder

in frontend

frontend

This problem exists for dynamic data that is updated via Ajax. Is there a way to avoid this problem?

Thanks

2

Hi Jolia,
Thanks so much for your report!

Please provide a live link.

Best regards,
timmse

3

Hi @timmse,

Please see the live link here.

4

Thanks so much!

There are two easy ways to solve it:

  1. Just set the button gap value to 0
  2. Wrap the (ddtag) part with a span or div, so the gap doesn’t apply:

Filters <span>({query_results_count_filter:jdlqmz})</span>

The reason why it is displayed correctly on the canvas is that there are additional tags within the button so that the element can be edited on the canvas. Accordingly, the gap is not applied there.

I will consult with the developers to see if they see a way to solve the problem directly.

5

Thanks for the great advice @timmseو

Although adding a span is a simple and good solution, it creates additional nested DOM if you agree. For example, the HTML output would be like this just to show the query count:

<span id="brxe-jrsubg" class="brxe-button bricks-button bricks-background-primary">
RESULTS 
<span>
(
<span data-brx-qr-count="jdlqmz">0</span>
)
</span>
</span>

I will consult with the developers to see if they see a way to solve the problem directly.

Great, thanks. But one question. How does the Woodmart theme display the query count with very text in a p tag while the query count is updated via Ajax? Please see this link. This approach will be great for clean code.

<p class="woocommerce-result-count">Showing all 4 results</p>
6

That’s why I’ve given you two potential solutions :wink: The first one doesn’t add anything to the HTML but simply solves the problem.

I don’t know, but they probably replace the whole string, not just the number. Ergo, you probably can’t adjust the text. However, this is also a completely different scenario (apples and oranges).

Your problem only occurs within a button because the button has a default gap.

1 Like