Attempting to use CSS to control Contact composite element layout using Flex. The element webform-flexbox wrapper around "city / state / zip" sub-elements is not target-able.
The ability to use CSS to apply a "flex:x" to each of the 3 elements is necessary for layout control.
Please understand, I am not a developer - I am a designer - hopefully you can see this through my eyes :) ----
I've been struggling with composite elements. Composite elements don't seem to have full properties available. E.G.; Address has no placeholders for the elements. Advanced Address (which I now know comes from an external module) doesn't accept placeholders, etc. Contact composite element also has no ability to assign Style to the sub-elements.
Contact composite gets me closest to my needs but as you can see in the attached picture "not-targetable.jpg" there is no way to differentiate the sub-elements so I can apply CSS. There is a class that is shared by all elements but not a specific ID or unique class for each sub-element.
Manually I've assigned the flex:x to each of the 3 sub-elements to demonstrate the result which you can see in the 2nd image "if-it-was....jpg" I've attached.
As a workaround - I used CSS child Iterations to obtain my solution but it is inelegant. Here is my CSS:
.webform-flexbox .webform-flex.webform-flex--1:first-child { flex: 6 }
.webform-flexbox .webform-flex.webform-flex--1:nth-child(2) { flex: 2.5 }
.webform-flexbox .webform-flex.webform-flex--1 select.form-select:nth-child(2) { margin:0 }
.webform-flexbox .webform-flex.webform-flex--1:nth-child(3) { flex: 3.5 }
Create a form with Contact composite element.
Attempt to use CSS to set columnar Flex width of City to 6, state to 2.5, and Zip to 3.5 .
There are 2 ways I can see for increasing the power of this Element -
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | 3166730-4.patch | 9.49 KB | jrockowitz |
| #3 | 3166730-3.patch | 8.42 KB | jrockowitz |
| attributes-to-add.jpg | 15.59 KB | jshimota01 | |
| if-it-was-targetable.jpg | 135 KB | jshimota01 | |
| not_targetable.jpg | 203.03 KB | jshimota01 |
Comments
Comment #2
jshimota01 commentedComment #3
jrockowitz commentedAdd generic attribute support the flexbox wrapper is not feasible. I think the best we can do is to add some very basic classes to the below templates
I would lean towards BEM which mean we wrap each composite in
.webform-{name}class and then sub element in.webform-{name}__{sub-element}classes.At the same time, you can easily override these templates in your theme.
Comment #4
jrockowitz commentedComment #5
jshimota01 commentedYou don't get paid enough.
I'll need time to backup / test this carefully but on quick scan I can see what the patch is going to do and it looks a perfectly good solution. I use your attribute fields such as custom style etc... and they allow me huge control... but I get that the array of a composite element is a different animal so I understand what I'm asking. I'm grateful for your time and the effort you make for everyone. Results in the next day or two.
Comment #6
jshimota01 commentedI have tested this patch and it works - For 5.19 but I had troubles with 5.x-dev -
I assumed I needed 5.x-dev release so I ran composer require drupal/webform:^5.x-dev after putting the patch into my composer.json.
It loaded fine, I ran update.php and was informed of 7 mods being applied.
When I attempted to open a form it crashed. all forms crashed.
I restored my system and ran the patch just on the 5.19 version. Worked perfect.
I see 6.x coming and that all automated tested had passed on that (but failed on the 5x.dev) so likely I'm a self-inflicted wound. But you have solved my problem so - Thank you! I will watch revs of your module and do my best to test/give useful result information where possible. thanks.
Comment #8
jrockowitz commented