Fix checkbox label styles #4800
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
javierm
reviewed
Apr 1, 2022
app/assets/stylesheets/admin.scss
Outdated
| @@ -315,6 +315,16 @@ $table-header: #ecf1f6; | |||
| .proposal-new { | |||
| padding-top: 0; | |||
| } | |||
|
|
|||
| form { | |||
There was a problem hiding this comment.
I've just realized this also happens in public sections such as "My account". Maybe we can use a more generic solution, and apply it just to check boxes 🤔.
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index d26617846..b4eecfd5f 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1063,6 +1063,10 @@ form {
line-height: $line-height;
}
+ .checkbox-label {
+ display: table;
+ }
+
fieldset legend {
font-weight: bold;
}
diff --git a/lib/consul_form_builder.rb b/lib/consul_form_builder.rb
index 5eb292079..9d2453458 100644
--- a/lib/consul_form_builder.rb
+++ b/lib/consul_form_builder.rb
@@ -25,7 +25,11 @@ class ConsulFormBuilder < FoundationRailsHelper::FormBuilder
else
label = tag.span sanitize(label_text(attribute, options[:label])), class: "checkbox"
- super(attribute, options.merge(label: label, label_options: label_options_for(options)))
+ # TODO: add test; note adding options[:label_options][:class] would overwrite it; is it OK like this?
+ super(attribute, options.merge(
+ label: label,
+ label_options: { class: "checkbox-label" }.merge(label_options_for(options))
+ ))
end
end
taitus
force-pushed
the
checkbox_label_styles
branch
from
54ea57d
to
80ef774
Compare
javierm
reviewed
Apr 4, 2022
We are use a display: block style for labels containing check boxes inside them, and the label has a width of 100%. This means that clicking on the blank space on the right of the label text will check/uncheck the checkbox. To avoid this behaviour we modify the "display" attribute of the labels. In order to prevent unexpected behaviour in terms_of_service form labels, we add specific css for this case when define a checkbox within the .actions class.
taitus
force-pushed
the
checkbox_label_styles
branch
from
80ef774
to
923c2a7
Compare
javierm
approved these changes
Apr 4, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
References
Reference to Pending notes: https://github.com/orgs/consul/projects/1#card-74165527
Background
Currently we use a
display: blockstyle for labels containing check boxes inside them, and so the label has a width of 100%.Since, on most browsers, clicking on a label has a similar effect as clicking on its associated input, this means that clicking on the blank space on the right of the label text will check/uncheck the checkbox. In usability tests we've seen people accidentally activating and deactivating options without noticing, due to this issue.
Objectives
Check checkbox labels styles in the admin section in order to prevent accidental clicks.