This is brilliant. I never considered using the HTML element to make custom UI look and feel. I always thought of it as importing other websites or s. There are millions of snippets out there on the interwebs to try, and I now know what I am doing this weekend.
It would be nice if there was some kind of collective cheat sheet for using several different HTML styling elements in bubble. For example, how to: remove scrollbars in repeating groups, change colors of scrollbars, change the shape of scrollbars, create overlapping avatar icons, chips, non-rectangle containers, etc.
Great tutorial, but can we use tags for text inside button? I would like to cross out text in button, when it isn't clickable, but it looks like tags ( or [s]) doesn't work for text in button. Is there something additional feature which should I use? some quotes or something? Thanks
Good video, I'm trying to use the html code that you see in the video and it doesn't work for me as it appears in your video. I don't know if I'm copying something wrong, so you could leave a link to copy and paste the code. Thanks a lot,
Sure. If your tags are an option set, create a new attribute called 'colour' and add in each tag colour. In the html element for the tag, change the static colour hex to reference the dynamic option set attribute colour that you just created.
I have an issue. th "join with" element isn't an option in dropdown proposed by Bubble. Does anyone know why ? There might be some of my settings that are wrong ?
In the database I have a product that has a field list of tags. I am trying to use this technique to show them, but it doesn't work. I am not getting the join function, and without it I can only show one element and not the whole list. Could anyone please help?
Everyone that comment that cant see "join with" perhaps is due to the field is not a list. I noticed that join with is just for list, for now Im trying to figure it out how I can change as a list the text field.
This is great! Thanks. How do we make the HTML Chip clickable? For instance, clicking on 'Team leadership' brings them to the skill page of team leadership or potentially a page that displays all users who have indicated team leadership in their skills. I can't seem to create a workflow with the HTML tag.
@@0xfouad For an immediate solution I was able to make something similar as these tags with a repeating group and button elements inside. They are all the same width but can be customized to look like these pills, and made hover/clickable. Might give it a try if you can't wait!
'Join with' will be available on the 'more' option in your expression. If you can't see 'join with' then you may not be dealing with a list by rather a string.
@@Buildcamp Hi, what would be the solution if we are dealing with a list? I have my companies repeating group and they have a list of categories that I want to display with this html. Edit: I realized I was on wrong page of my database. They are very similar :) I fixed it but only the first category came capitalized and others are in lowercase :/
@@Buildcamp Thanks for the reply. Do you have a tutorial showing how to create this 'text list' for the same use case? I'm looking to do the same for profile listings.
Hi Guys. Can any one point me in the right direction? I am looking for example of how to create a function in bubble that lets you embedded data in the form of perhaps a table into a web page. Any help would be appreciated. Thanks.
@@joshuafaichney3443 Hi Josh, I mean, I would like to be able to create say a form in bubble, but to be able to create an embedded code or tags to be able to enable a user to paste it into their webpage so that the forms appears on the page.
Hello this is a nice way to do the tags. How can use this in work flow? suppose user needs to filter a repeating group by clicking one of the tag. how can i do? like this : prnt.sc/wdmuxr
If case you need the chip:
.tag span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 20px;
color: #091747;
font-family: Arial;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
}
I have an issue. th "join with" element isn't an option in dropdown proposed by Bubble. What do we do if the function 'join-with- is not available?
Thank
@@rg4252 i use :split by (,) join with :capitalized words. This is because i have a "," as i used a multiline field input text
thanks dude
Do you have the answer?@@rg4252
GODSEND! Your videos are just gold. Thank you for all that you do!
This is brilliant. I never considered using the HTML element to make custom UI look and feel. I always thought of it as importing other websites or s. There are millions of snippets out there on the interwebs to try, and I now know what I am doing this weekend.
Nice Mike - please post ideas to Buildcamp.io so we see the results.
It would be nice if there was some kind of collective cheat sheet for using several different HTML styling elements in bubble. For example, how to: remove scrollbars in repeating groups, change colors of scrollbars, change the shape of scrollbars, create overlapping avatar icons, chips, non-rectangle containers, etc.
2 years later.. Found something by any luck?
Brilliant ! Thanks for this informative video. This is exactly what I was looking for !
Great tutorial, this is exactly what I was looking for. Thanks!
super helpful, thanks man!!
Great tutorial, but can we use tags for text inside button?
I would like to cross out text in button, when it isn't clickable, but it looks like tags ( or [s]) doesn't work for text in button.
Is there something additional feature which should I use? some quotes or something?
Thanks
excellent idea! never considered the join with function to insert closing html elements!
Good video, I'm trying to use the html code that you see in the video and it doesn't work for me as it appears in your video.
I don't know if I'm copying something wrong, so you could leave a link to copy and paste the code.
Thanks a lot,
Never saw anything like this use of the HTML element, that's just awesome! Thank's for sharing it!
Thanks for the tutorial! Could you suggest a way to make the BG color variable (based on a stored hex value for the specific tag being iterated)?
Sure. If your tags are an option set, create a new attribute called 'colour' and add in each tag colour. In the html element for the tag, change the static colour hex to reference the dynamic option set attribute colour that you just created.
For some reason, my html chip is not centered, everything is displayed a bit to the left. Is there a way to adjust this?
Great content! Thanks for sharing. 😉👍 #nocode
Thanks for watching!
Could this also be posibble in a RTE or MLI input field?
Very nice. Also - a fellow South African ;)
How does one make the chips clickable and then a "search by clicked chip"?
I have an issue. th "join with" element isn't an option in dropdown proposed by Bubble. Does anyone know why ? There might be some of my settings that are wrong ?
I have the same issue @buildcamp
Do you know if there’s any way to add react components in bubble? Not sure if this would be a good thing but just wondering...
You can integrated custom html/ JS but ideally you just work within the confines of the tools Bubble provide.
In the database I have a product that has a field list of tags. I am trying to use this technique to show them, but it doesn't work. I am not getting the join function, and without it I can only show one element and not the whole list. Could anyone please help?
Would have been nice to have the code put in the description here to we could copy paste. What do we do if the function 'join-with- is not available?
I have the same problem. Did you find a fix ?
hi Gregory! where i may copy this code? P.S. You are the best ! Thank you for Yours video
Great !!!!!!!!
Everyone that comment that cant see "join with" perhaps is due to the field is not a list. I noticed that join with is just for list, for now Im trying to figure it out how I can change as a list the text field.
This is great! Thanks. How do we make the HTML Chip clickable? For instance, clicking on 'Team leadership' brings them to the skill page of team leadership or potentially a page that displays all users who have indicated team leadership in their skills. I can't seem to create a workflow with the HTML tag.
They aren't clickable with this step up. I'll do another tutorial on this.
@@Buildcamp Thank you!
@@Buildcamp I hope you can post a video on this soon.
@@0xfouad For an immediate solution I was able to make something similar as these tags with a repeating group and button elements inside. They are all the same width but can be customized to look like these pills, and made hover/clickable. Might give it a try if you can't wait!
@@michaelcaporale6065 sounds like a good idea. I will give it a go. Thanks Michael
The "join with" option dosen't show up in my Bubble. Anyone have a ide why?
Well, I still get them as comma-separated values and not individual items.
Good Stuff!! Could u mind share html code?
Thanks this is great! Are you able to share a link to the editor? Thanks!
At the moment no, as the tutorials are on a private dedicated server but I plan on making future content editors accessible on a different plan.
Great Tuto !
I can't find the "Join with" option. Did you do something special to get this ?
Thank you very much
'Join with' will be available on the 'more' option in your expression. If you can't see 'join with' then you may not be dealing with a list by rather a string.
@@Buildcamp Hi, what would be the solution if we are dealing with a list? I have my companies repeating group and they have a list of categories that I want to display with this html.
Edit: I realized I was on wrong page of my database. They are very similar :) I fixed it but only the first category came capitalized and others are in lowercase :/
I fixed it by bringing ":capitalized words" before "join with" and kept the rest same.
Great video. Are the skills a separate data type? Or is it a text list in the 'user' data type?
Just a text list. But this can be a data type with a field name for the skill or an option set as well. At the end of the day, we are displaying text.
@@Buildcamp Thanks for the reply. Do you have a tutorial showing how to create this 'text list' for the same use case? I'm looking to do the same for profile listings.
@@artyom6230 Did you find a solution?)
@@s02l84u Create a new "text" field in your data type. Make it a list.
import * as allExports from 'block all face(s)';
delete/cut { mixin } span underscore divide fifty './index.js';???????
pls reply ur welcome use for online websites only ( could be dangerous for other uses?!!?!?!
Is there a way to set a hover action?
you can use conditionals for that
Hi Guys. Can any one point me in the right direction? I am looking for example of how to create a function in bubble that lets you embedded data in the form of perhaps a table into a web page. Any help would be appreciated. Thanks.
Hi guys. Can any one kindly help with this question. Would really appreciate it. Thanks
@@costsia can you elaborate
@@joshuafaichney3443 Hi Josh, I mean, I would like to be able to create say a form in bubble, but to be able to create an embedded code or tags to be able to enable a user to paste it into their webpage so that the forms appears on the page.
Hello this is a nice way to do the tags. How can use this in work flow? suppose user needs to filter a repeating group by clicking one of the tag. how can i do? like this : prnt.sc/wdmuxr