Merge pull request #8961 from mfo/US/fix-fieldset-max-width

ETQ usager, quand une les balises <select> avec une <option> ayant un libelle tres long, le select prends la largueur du contenu de l'option et force un scroll horizontal sur la page
This commit is contained in:
mfo 2023-04-27 08:33:29 +00:00 committed by GitHub
commit 79a7877a09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 2 deletions

View file

@ -1,2 +1,10 @@
class EditableChamp::DropDownListComponent < EditableChamp::EditableChampBaseComponent
def select_class_names
class_names('width-100': contains_long_option?)
end
def contains_long_option?
max_length = 100
@champ.options.any? { _1.size > max_length }
end
end

View file

@ -16,7 +16,7 @@
= @form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: @champ.other?
Autre
- else
= @form.select :value, @champ.options_without_empty_value_when_mandatory(@champ.options), { selected: @champ.selected }, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }
= @form.select :value, @champ.options_without_empty_value_when_mandatory(@champ.options), { selected: @champ.selected }, required: @champ.required?, id: @champ.input_id, class: select_class_names, aria: { describedby: @champ.describedby_id }
- if @champ.drop_down_other?
= render EditableChamp::DropDownOtherInputComponent.new(form: @form, champ: @champ)

View file

@ -1,5 +1,5 @@
- if render_within_fieldset?
= tag.fieldset(class: "reset-#{tag_for_depth}") do
= tag.fieldset(class: "reset-#{tag_for_depth} fr-m-0 fr-p-0") do
= tag.legend do
= render EditableChamp::HeaderSectionComponent.new(champ: header_section)
- splitted_tail.each do |section, champ|