Share Tips: Registration Form Layout
- 4creator
- OFFLINE
-
Senior Member
- Posts: 60
- Thanks: 6
- Karma: 1
Add-ons
Add-ons
5 months 3 weeks ago - 5 months 3 weeks ago #335759
by 4creator
Share Tips: Registration Form Layout was created by 4creator
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!
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.
.cb_template .d-inline-flex.w-auto.cbPasswordUnmask{display: inline-flex!important; width: calc(100% - 45px) !important;}
.cb_template .form-group [id^='cbfv_']{display: flex; align-items: center}
.cb_template .form-auto .form-control{flex-grow: 1; max-width: calc(100% - 45px)}
.cb_template .cbPasswordUnmask .form-control{max-width: calc(100% - 68px); border: none}
.cb_template .input-group-append{flex-shrink: 0}
.cb_template .input-group-append .cbPasswordUnmaskShow{min-width: 68px; font-size: 14px}
.cb_template .cbFieldIcons{margin-left: 10px; min-width: 35px}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!
Last edit: 5 months 3 weeks ago by 4creator.
Please Log in to join the conversation.
- 4creator
- OFFLINE
-
Senior Member
- Posts: 60
- Thanks: 6
- Karma: 1
Add-ons
Add-ons
5 months 3 weeks ago - 5 months 3 weeks ago #335760
by 4creator
Replied by 4creator on topic Share Tips: Registration Form Layout
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_'].
.cb_template .form-group{margin-bottom: 30px}
.cb_template .form-group [id$='-error']{position: absolute; bottom: -24px; left: 0}You also need to add position: relative to the above .cb_template .form-group [id^='cbfv_'].
Last edit: 5 months 3 weeks ago by 4creator.
Please Log in to join the conversation.
krileon
Team Member- OFFLINE
- Posts: 68537
- Thanks: 9093
- Karma: 1434
5 months 3 weeks ago #335777
by krileon
Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
Replied by krileon on topic Share Tips: Registration Form Layout
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..
Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
Please Log in to join the conversation.
- 4creator
- OFFLINE
-
Senior Member
- Posts: 60
- Thanks: 6
- Karma: 1
Add-ons
Add-ons
5 months 3 weeks ago #335787
by 4creator
Replied by 4creator on topic Share Tips: Registration Form Layout
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.
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.
Please Log in to join the conversation.
- 4creator
- OFFLINE
-
Senior Member
- Posts: 60
- Thanks: 6
- Karma: 1
Add-ons
Add-ons
5 months 3 weeks ago #335788
by 4creator
Replied by 4creator on topic Share Tips: Registration Form Layout
Just to be sure, I also checked with Cassiopeia to see if my CSS worked as expected. It should be fine!Your CSS adjustments will likely only look good on your site due to Joomla template factors, module placements, etc..
Please Log in to join the conversation.
- krileon
- Team Member
- OFFLINE
- Posts: 68537
- Thanks: 9093
- Karma: 1434
5 months 3 weeks ago #335795
by krileon
Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
Replied by krileon on topic Share Tips: Registration Form Layout
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.
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.
Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
Please Log in to join the conversation.
Moderators: beat, nant, krileon
Time to create page: 0.226 seconds
-
You are here:
- Home
- Forums
- Community Discussions
- Community Builder
- General
- Share Tips: Registration Form Layout