I've noticed that custom composites are displayed in two ways: 1) As tables with sub-elements in columns which can look terrible on mobile with just a few fields, and 2) As tables with one row which looks terrible on desktop when you have small fields to fill.
Here's an example of what I mean:
custom_phone_numbers_columns_:
'#type': custom_composite
'#title': 'Custom Phone Numbers (virtually unusable for mobile)'
'#multiple': 4
'#required': true
'#multiple__empty_items': '4'
'#multiple__sorting': false
'#multiple__operations': false
'#element':
text_phone:
'#type': textfield
'#title': 'Phone Number'
'#required': true
'#input_mask': '(999) 999-9999'
select_phone_type:
'#type': select
'#options': phone_types
'#title': Type
'#required': true
text_extension:
'#type': textfield
'#title': Notes/Extension
select_country_code:
'#type': select
'#options': country_codes
'#title': Country
custom_phone_numbers:
'#type': custom_composite
'#title': 'Custom Phone Numbers (looks bad @ desktop width)'
'#multiple': 4
'#required': true
'#multiple__header': false
'#multiple__empty_items': '4'
'#multiple__sorting': false
'#multiple__operations': false
'#element':
text_phone:
'#type': textfield
'#title': 'Phone Number'
'#required': true
'#input_mask': '(999) 999-9999'
select_phone_type:
'#type': select
'#options': phone_types
'#title': Type
'#required': true
text_extension:
'#type': textfield
'#title': Notes/Extension
select_country_code:
'#type': select
'#options': country_codes
'#title': Country
I realize a column-less table can be jazzed up to work a little like a Flexbox, but is it out of the question to have a Flexbox option for the sub-elements of a composite element? Composite sub-fields could operate like columns in desktop mode, and like rows at mobile widths making them truly responsive.
Comment | File | Size | Author |
---|---|---|---|
#3 | webform.webform.issue_2941486.yml | 3.6 KB | jrockowitz |
Comments
Comment #2
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedBuilding flexbox support in the custom composite UI is going to almost impossible.
We might be able to make the composite table responsive. For example, the Likert element's table is responsive.
Comment #3
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedAttached is an example webform with a custom composite element that I am hoping to make responsive.
Comment #4
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented