I need a coach via Zoom to me add custom javascript, CSS and HTML to my Bubble app

I want to add this Material Design text field [Material Design] to my bubble.io web app but don’t know how. I don’t want to pay someone to do it for me when I can learn to do it myself with the help of a knowledgable coach, for which I will gladly pay.

It includes some HTML, CSS and Javascript and I am looking for someone to coach me through the process via Zoom. I am pretty sure – with someone who is familiar with Bubble and these markup and programming languages, the process shouldn’t take more than 30 minutes.

I am not sure what “flavor” of javascript is being used, but things like “Mixins” in CSS are being talked about as well at “@use” and “javascript instantiation”.

I really want to do it myself so I learn something along the way instead of paying someone to just do it for me.

Please let me know if you’re interested and then we can talk “price.”

Thanks,

Ryan Ashton
Hong Kong

@djryanash:

I would like to start with a question,
why would you like to use coding when you can achieve the same thing without the code?

Second, I would be willing to show you how.

Thanks, Ali
Connect with me on Linkedin: https://www.linkedin.com/in/a-imran/
Or book a call to say hi: Calendly - Ali Imran
See my Youtube Tutorials here

Is it possible to do that type of text field without code? How?

I love the way, when you click into the field, the placeholder text pops to the top as a heading. Is it really possible to do that without code?

If you’re willing to show me, that would be awesome!!

Cool, messaging you in private.

Is this what you are trying to achieve?

Thanks, Ali
Connect with me on Linkedin: https://www.linkedin.com/in/a-imran/
Or book a call to say hi: Calendly - Ali Imran
See me Youtube Tutorials here:

Kind of, almost there.

Except the placeholder text needs to disappear once you click inside the text field, not once you start typing.

Also, in the original, the placeholder text “pops” to the top of the text field once you click inside the text field. It’s subtle but makes a difference.

See here: https://drive.google.com/file/d/1i_2zm1Ts6YoELaPtDq3QWmRKQLn3aGbM/view?usp=sharing

Yeah - you did it!!!

Good man!! Can you slow the “pop” down a bit - say 100 ms slower?

Maybe it just looks like it’s “popping” but in fact it’s just disappearing in the field and appearing at the top of the field.

If that’s as close as we can get within the limitations of bubble, that’s good enough for me. I would like, the “pop” but it’s pretty damn close.

Good work. :slight_smile:

Can you show us how it’s done? :grinning_face_with_smiling_eyes:

I pretty much figures it out myself - at least what you did, I figured out. I haven’t figured out the “pop” yet.

https://drive.google.com/file/d/1aDHsnUkPkvbNqye1rc5YtxPavTspOh-3/view?usp=sharing