If i get time i will;
Add sounds
Improve naming convention
Add a clear all button to remove all the skills from selected, state
Order the selection by when added to state not just alphabetically
Change hover on the skill only when its child ‘close icon’ is hovered. i think i need js.
Improve UX to stop Group focus from flashing
Try to figure out horizontal collapsing to make skills evenly spaced
Improve repsonsiveness
Add more animations
22 Likes
So awesome! Is there a fast way to implement this? I am currently working on this skill function
Nice work @anon65040322!
thanks guys
This is nice, @anon65040322. Does it work on mobile (aside from responsive issues which it looks like you’re addressing)?
yeah the group focus works fine on mobile because its closer to the top of the page and the repeating group is not too long.
I disabled showing the group focus (for mobile) on this demo because the group focus was too close to the bottom of the screen and ios keyboard would push it up (covering the input).
I think its best practice to have a second screen for mobile where the input and repeating group start at the very top (when searching).
I will implement this by weekend hopefully.
Loved this! Also, found my new favorite bookmark to grab those unicode emoticon characters. Didn’t knew they’re widely available 
thanks, i use the app for mac
https://github.com/muan/mojibar ,
would you know how to separate a list into html divs?
What do you mean by list? What list exactly?
i mean, instead of using a repeating group to display the list of skills (type)
just use only html, so i can add padding and have horizontal evenly spaced divs.
Essentially make a repeating group html with data sourced from states and database.
Oh, well, no, I have never looked into extracting values from Bubble’s elements and putting them into standard HTML elements. It seems counterintuitive (downgrading back to custom coded elements), but also it sounds interesting!
Maybe it would be easier to apply custom css to the repeating group, That just crossed my mind, I have never looked into that too.
@anon65040322 how do you do to add icons in the fields ?
Could you share the link for the unicode emoticon characters please? I looked at the editor and couldn’t find my way to the website with the list of characters.
Cheers
He is doing this by saving to his database a link to a png file saved…if you are familiar with how bubble will load your images as a link to AWS, where the image is stored by bubble, then you will be able to make use of those links in your database.
Save the links in your database as a text element, then in an image element on page, use the dynamic data to point to the text field ( ie: link ) in your database.
What I am prowling the forum for is a better way to show emojis through a button press as opposed to the keyboard shortcut used by the input element.
I found that a plugin listed their code, which is just a list of links to images from github, which I wouldn’t want to use, and instead find a more robust list. I’m scouring the forum and internet for a downloadable list so I can upload it quickly to my database.
This company also has free emojis for testing purposes but their commercial prices are a bit steep for me
They have a download that comes out as png files or CSS…would need to figure out how to use Regex to parse the contents quickly to make a better database of emojis with not only the image but description for allowing users to search quickly like the icon element does in bubble editor.
Sure!
http://unicodeemoticons.com/ These are the safest to use, will render everywhere.
https://unicode.org/emoji/charts/full-emoji-list.html These are safe-ish to use, do make a quick test.
Thanks @vini_brito The unicode site is pretty extensive.
I was really interested in the unicode emojis so I could save them to the database and have them be part of text. My problem is the unicode. I don’t know how to save the code in the database ( my assumption was as text ) and then how to get the image to load ( what element to put on the page ). I attempted a text element and used dynamic expression to pull the unicode from database as text, but didn’t have success.
Any insights would be appreciated. I’d love to download the unicode from this site to load in my database.
Here is another interesting link.
This article did a good job in my opinion of explaining what are and how to use code points for emojis. I bet using toolbox or JS plugins will make it easier to render the emojis from unicode after saving to database.
Will try this soon.
Well, that’s weird because I’m testing them and they show fine. I tested both the safe () unicodes and the safeish ones (
).
From the “safe-ish” set you copy the emoji from the Browser column, then paste in the unicode at the input and click create.
Edit: Yes, text field.
Thanks @vini_brito
I made a data field of “browser_copy” under a data type of “Emoji”. The data field is a text.
On my page I put a text element and did dynamic expression pointing to the database searching data type “emoji” for data filed “browser_copy”.
From the site I copied the browser column and pasted it into my database. Was saved correctly. On page view, it loads correctly. So thank you for the help in this.
Now I will copy the entire set, put into a spreadsheet and hopefully be able to upload it to bubble without a problem.
With this loaded in the database I should get all the functionality I need.
Very happy with this. Cheers
1 Like