This way polls look more similar to the way they did when the answers
were buttons instead of checkboxes or radio buttons.
Note the styling is tricky because we need to add a `float` property to
the legend so it's actually inside the fieldset. This forces us to add a
`::before` pseudo-element in order to add margin between the legend and
the first label. Another option would be:
```
legend {
&:has(+ label) {
margin-bottom: calc($line-height / 2);
}
+ label {
clear: $global-left;
}
}
```
But the `:has` pseudo-class isn't universally supported yet, and we'd
still have to add `margin-top` to the first label when it comes after a
`.help-text` element.
Due to the presence of the border, we're increasing the margin between
elements a little bit.
Note that adding a pseudoelement to the label is a consequence of adding
the `float` property to the legend, so we're changing the order of the
code so the styles for `legend` appear before the styles in `label`.
24 lines
655 B
Plaintext
24 lines
655 B
Plaintext
<fieldset <%= fieldset_attributes %>>
|
|
<legend><%= question.title %></legend>
|
|
|
|
<% if multiple_choice? %>
|
|
<%= multiple_choice_help_text %>
|
|
|
|
<% question.question_options.each do |option| %>
|
|
<%= multiple_choice_field(option) %>
|
|
<% end %>
|
|
<% else %>
|
|
<% question.question_options.each do |option| %>
|
|
<%= single_choice_field(option) %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% if question.options_with_read_more? %>
|
|
<div class="read-more-links">
|
|
<p><%= t("poll_questions.read_more_about") %></p>
|
|
<p><%= options_read_more_links %></p>
|
|
</div>
|
|
<% end %>
|
|
<%= form.error_for(:"question_#{question.id}") %>
|
|
</fieldset>
|