Displaying emphasis when showing data from API results

Need help APIs
1

I have some API results that are formatted as shown below:

There are a few new Kindle deals to look at today. (Yesterday on the blog: Should We <em>Abandon</em> “Evangelical?”) Consuming ideologies “J.K. Rowling, one of the most successful

When I display the API data, I would like the word “Abandon” to be bolded, as it is returned between <em> ... </em>. I am not able to find a way to do this within Bubble.

Any help would be appreciated!

2

You can do this using simple search&replace on the text string. Search for em and replace with b, and /em with /b. Or use css to globally add style to em element.

3

I had some success using an HTML element instead of a text element. However, the formatting still doesn’t look great, even though the emphasis is finally visible.

4

Exactly what @twkrk said :smiley:

Screenshot_2
Screenshot_2904×547 13.4 KB

Screenshot_3
Screenshot_31221×571 26 KB

5

If you could tell me more about the global CSS option, I’d be grateful. I assume the search and replace technique would be costly in terms of time taken, since it needs to be happening in real-time.

6

Add a HTML element with the following code:

 <style>
  em  {
        font-weight: bold;
        font-style: normal !important;
    }
</style>
1 Like
7

But it’s not an input, it’s an output, displaying data from the API call. I’m confused about why you’ve used a Multiline Input.

8

Thanks, this worked. I added the code in the same HTML element that displays the text from the API call. It works fine now.

I suppose I can play around with the HTML code to add more spacing, etc.?

9

Yes. But remember it will affect all the em elements on the page.