Responsive Engine: adding overlay icon in text Input V2
In this Bubble tutorial video we explore one way to adding a Font Awesome icon to your text Input fields.
Unlock the power of input fields: Learn two methods to seamlessly integrate icons for a polished UI
Master group-based design: Discover how to create custom input fields with perfect icon placement and responsive sizing
Elevate your responsive design skills: Achieve pixel-perfect layouts with advanced padding and styling techniques
Creating a Responsive Input Field with Icon Overlay
In a previous video, I demonstrated how to get this effect where you place an icon within an input field. This method uses the input field's horizontal padding, leaving 30 pixels between the edge and the text. However, when you add a lot of random text, you end up with an unnecessary 30 pixels on the other side. Here's another approach to achieve this effect.
Setting Up the Group Container
We're going to use a group and set it as a row with 100% width and a fixed height of 54 pixels. Why 54? Because that's the height of the input field we're trying to mimic. We'll also set the roundness of the corners to 6 and apply our background color. Let's check if everything's working correctly. We're essentially building what appears to be an input field using a group, but it's actually an input field nestled within a group.
Adding the Icon
Let's add in the icon. Since we're creating a password field, we'll use a lock icon. We'll center it and apply some padding to the left and right of the container group to achieve a look similar to our previous version.
Inserting and Styling the Input Field
Now, let's put in an input field. We want to disguise this input field, so we'll remove a lot of the styling, including all of the conditional styling for now. We'll set the font color, remove the background, borders, border radius, and horizontal padding. We'll also remove the size constraint because we want it to fill up all the remaining space. However, we'll set its height to 54 pixels so that it fits neatly within the group.
Adjusting Spacing and Alignment
Lastly, let's apply a gap space between the elements. We'll start with 15 pixels and see how it looks. Although it's technically the same width on either side, I'm going to reduce it down to 10 pixels on the right side because it looks slightly more pleasing to the eye.
Advantages and Considerations
This version won't have the same issue as the previous one, but it does take a little longer to build. It's important to note that if you need to add conditional statements, such as validating an email address, you'll have to apply those conditions to the group. Otherwise, the styling will only affect part of the element, which would look a bit odd.
This is version 2 of how to place an icon within an input field, offering a more flexible and visually consistent approach.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.