Share Tips: Registration Form Layout

Hi there,

I noticed that the layout of the CB registration form was not responsive and became distorted at certain window sizes. To improve the user experience and ensure a consistent layout across various devices, I implemented the following CSS adjustments. I'm sharing these tweaks here in the hope that they may be useful to others facing similar layout issues.

Feel free to suggest any improvements or share your own insights on the CSS adjustments provided. Collaboration is key to refining our solutions, and I welcome your feedback!
*calc(100% - 45px) takes into account the width of cbFieldIcons and its margin.

Thanks!

If you adopt my CSS, it appears that additional CSS is needed for any error messages that may appear in each field.

You also need to add position: relative to the above .cb_template .form-group [id^='cbfv_'].

We use desktop, mobile, and often tablet break points throughout CB. Where specifically are things becoming distorted? A lot of this will be heavily dependent on your Joomla template as well since our breakpoints are window based not container based. Your CSS adjustments will likely only look good on your site due to Joomla template factors, module placements, etc..

Hello,

I'm currently using the T4 Framework for my template, as opposed to the default Cassiopeia. I've noticed an issue with the positioning of the Show button for the password field on smaller screens, such as smartphones. It tends to be placed below the field, and the field icons follow suit. This not only affects the aesthetic appeal but also requires users to scroll more than necessary.

I'm sharing this observation to foster a constructive discussion around potential improvements. I certainly appreciate the work that goes into the development and am not critiquing it but rather looking for a collaborative solution.

Please take a moment to review the attached images for a direct comparison.

Thank you for your attention to this matter.

Your CSS adjustments will likely only look good on your site due to Joomla template factors, module placements, etc..

Just to be sure, I also checked with Cassiopeia to see if my CSS worked as expected. It should be fine!

The password field show button probably doesn't need to have overflow support (just how our version of bootstrap handles input groups), but we have to for the icons container because other plugins can add additional "icons". For example the privacy selector is added there and if there's no overflow then the input is smashed to unusable size. Something we can improve in CB 3.x when we redo how integrations add functionality after an input.

Everyone should certainly style their site however necessary to fit their design. We've even added our own custom CSS here at Joomlapolis to adjust CB styling so don't be worried about making changes that's why we added the override functionality.

With that said we'll be redesigning basically all of CB with CB 3.x though as we'll be switching to Tailwind from Bootstrap and moving all HTML to Twig template files.