Fix auto width issue with different label positions#2208
Conversation
WalkthroughThe pull request introduces CSS modifications specifically targeting form element layouts within containers having the Changes
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
css/_single_theme.css.php (2)
103-106: LGTM! Consider adding a fallback for older browsers.The use of
width: max-contentis a good solution for auto-sizing select elements. However, for better browser compatibility, consider adding a fallback for older browsers..<?php echo esc_html( $style_class ); ?> .frm_left_container select.auto_width, .<?php echo esc_html( $style_class ); ?> .frm_right_container select.auto_width { + width: auto<?php echo esc_html( $important ); ?>; width: max-content<?php echo esc_html( $important ); ?>; }
103-111: Overall implementation looks good!The changes effectively address the auto width issue with different label positions using clean, modern CSS properties. The implementation is well-structured and maintains consistency with the existing styling patterns.
Consider documenting these CSS rules in the project's style guide to ensure consistent usage across the codebase.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
css/_single_theme.css.php(1 hunks)
🔇 Additional comments (1)
css/_single_theme.css.php (1)
108-111: LGTM! Good use of margin-left: auto for alignment.The CSS rule effectively handles the alignment of labels and select elements in right containers, which is consistent with the PR's objective to fix positioning issues.
truongwp
left a comment
truongwp
left a comment
There was a problem hiding this comment.
This looks good. Thanks @AbdiTolesa!
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #2208 +/- ##
============================================
- Coverage 26.96% 26.82% -0.14%
- Complexity 8236 8320 +84
============================================
Files 127 129 +2
Lines 27285 27488 +203
============================================
+ Hits 7358 7375 +17
- Misses 19927 20113 +186 ☔ View full report in Codecov by Sentry. |
Crabcyborg
left a comment
Crabcyborg
left a comment
There was a problem hiding this comment.
This looks good now. I haven't tested it though.
I'll merge this once Laura has tested and approves it.
Thanks @AbdiTolesa and @truongwp!
🚀
lauramekaj1
left a comment
lauramekaj1
left a comment
There was a problem hiding this comment.
@AbdiTolesa I tested this and verified as fixed. Thank you!
|
Thank you Laura! 🙌 |
Crabcyborg
deleted the
issue-5561-fix_auto_width_issue_with_custom_label
branch
4 participants
Fix https://github.com/Strategy11/formidable-pro/issues/5561
Issues fixed:
Before:
After:
Test steps
RightAuto Widthoption for the dropdown.