[SOLVED] Create dynamically expandable ‘chips’ (also known as Tags or Labels)

I am trying to create a label, like the ones below, which is expandable when dynamic text is inserted (widens to the size of the text).

I have found two options, neither are suitable;

  1. Use a standard group, give it a colour and add text. This looks perfect but is not dynamically expandable.

  2. Use a button (which is dynamically expandable). This works well but the mouse pointer turns to a hand even when it is marked as unclickable.

Does anyone have a solution for making these labels?

1

Are you using the new or the legacy responsive engine?

It’s pretty simple with the New Responsive Engine (just set the text box to ‘fit width to content’), but I don’t think it’s possible with the legacy engine…

So if you’re using the old engine you’ll need to use some custom CSS (I’m sure someone in here can tell you exactly what…)

1 Like

I’m on the old engine, but thanks for suggesting CSS. If anyone here knows a CSS solution I’d appreciate it!

Using a button doesn’t actually work, they are not dynamically expandable horizontally (not sure why I thought they are). So, my only option is to find some CSS to make a text box dynamically expandable horizontally.

I have looked online but currently not found anything which works because most solutions relate to bootstrap, which seems to use it’s own style of CSS - I am a complete novice on CSS.

I may have to switch to the new responsive engine if there’s no other workaround.

I tested the New Responsive Engine but didn’t see an option to ‘fit width to content’, I noticed a few threads saying the option isn’t there for text?

Anyway, this is a mute point because after 30 mins I decided I don’t want to use the New Responsive Engine, I found it unintuitive and unpleasant to use. The old responsive engine is so easy and I prefer the drag and drop ‘feel’ whilst building, the engine seems to add tons of extra steps to do what is easy in legacy.

That said, I do appreciate your suggestion because at least it forced me to try it out!

something like this:

This was a HTML tag that was inserted into a cell of a repeating group. The output is here: https://uportal.io/scholarships

Each Option Set (OS) Resource Tag had a corresponding color and text.

Yes @dannyliu that is what I need! I set up an option set called ‘Label’ and added an attribute ‘blue’, thinking I could then colour it blue but I am not sure how to do that!

But, for now I just wanted to get the text box working but I can’t see how to inset the dynamic text? I need to include a ‘Do a search for’ … but where do I put that!

On preview this HTML shows nothing.

But those tags don’t have dynamic width, which was what the question was about (as far as I understood it…)

I don’t know where you read that (or why anyone would say it) - text elements definitely have the option to ‘fit width to content’ in the new Responsive Engine, as long as their parent container is responsive (i.e. not fixed) and the text element itself is not set to fixed width or stretch:

The old responsive engine is so easy and I prefer the drag and drop ‘feel’ whilst building, the engine seems to add tons of extra steps to do what is easy in legacy.

Once you get your head around the new responsive engine (which takes a while as it’s a completely different way of building pages) you’ll find it’s WAY easier to build with, much faster, and way easier to make changes and add/remove elements etc. Not to mention way better and simpler at creating fully responsive designs, with much more control than was possible with the old engine. It’s well worth the investment in time.

2 Likes

Thanks @adamhholmes I am unsure why I couldn’t see the ‘fit width to content’, I know my page wasn’t fixed but, as I said I think I will stick with the legacy system. I totally accept that you are probably 100% correct that the new system is superior once we get used to it, but I am reluctant because I am already pushing my brain so hard trying to learn Bubble’s basics!

Do they not? I didn’t realise, in that case you are correct, they won’t be suitable for my needs.

I found a great video created by Buildcamp showing exactly what I need, they call the dynamic text boxes ‘Tags’ (instead of Labels) which is why I didn’t see their video before.

Anyway, the code (posted below) won’t work because at 5min 50seconds into the video he says to use the join-with function, but that function is not available for me?

 <style>
    .tag span {
    	padding: 6px 10px;
    	background: #D0EBE4
    	border-radius: 20px
    	color: #091747;
    	font-family: Arial;
    	font-size: 12px
    	margin: 0 4px 3px 0;
    	font-weight: 500;
    	display: inline-block;
    	word-wrap: break-word;
    	white-space: normal;
    }
    </style>

    <dive class="tag"><span>
DYNAMIC CODE HERE followed by 'join-with' (not available?
</div>

--- some more code here (see video) ---

Hi @yusaney1 Are you referring to making a text box dynamically expandable? I did check out the messenger/chat template you recommended but I didn’t see any examples of an expandable text box?

‘Join with’ will be there as long as you’re referring to a list of texts - so if it’s not there you’re obviously not referring to a list of texts, so make sure you are if you want to use the join with operator.

Thanks for clarifying that. I’m referring to ‘Search for invoices’ so I guess I won’t be able to use this method :frowning:

Well presumable you’re trying to display a list of texts (otherwise what’s the point of what you’re trying to do)?

So as long as you define that list correctly you can add the join with operator to include the required html tag, as per the tutorial video.

As far as I can tell I followed the video correctly and used the correct HTML. You can see I have started typing ‘join’ below to do a search but nothing comes up. I’ve gone through the list manually and there is no ‘join me’ operator. Very odd! I even tried ‘merge with’ but that didn’t work.

As I said, ‘Join With’ will only appear for a list of displayable data (like texts, numbers, dates etc.).

In your screenshot you don’t have a list of anything displayable, but rather a single number, so ‘join with’ wouldn’t make any sense there, hence why it doesn’t appear.

I’m not entirely sure what you’re trying to do based on your screenshot, but it looks as though you’re just trying to display a single number in the ‘tag’? In which case just add the closing </span> and </div> tags to finish the expression.

Or are you trying to do something else here?..

Thanks @adamhholmes sorry for this rather long reply, I thought it best to be as clear as possible on where I am with it.

I have a Boolean expression (which you helped with here) showing the user how many invoices are Sent, Paid or Drafts.

Depending on the users activity, the Boolean result could be short, like Invoices Sent 1, or it could be something longer, like Invoices Sent 1, Drafts 3, Paid 1, so I want to show the result in a ‘Label’ which will stretch horizontally to fit the size of the text, like the image at the top of this thread.

In terms of displaying a list of data, you’re correct, I am not searching for a list (my mistake).

For clarity, my first attempt was to search for Invoices with Status: Sent and I was going to add drafts and paid afterwards.

So I thought to try adding another Boolean but the ‘Join With’ function is still not there;

I believe I am looking for a list of things because a result like Invoices Sent 1, Drafts 3, Paid 1is a list right? Maybe it’s not considered a list, so I tried your suggestion below;

The result displays the correct number but it is not expanding. Here’s the code;

And viewed on Preview it’s not expanding the text box.

red

As you’re doing that you should be able to include each closing </span> tag for each ‘chip’ directly in the Format as text for option for Yes

I will try that later as I have to go out, thank you for the tip and for reading my long reply!

1 Like