See the attached screenshot.
The drag&drop icon shifts the Name field to the right, but the fields below (such as the Image) don't follow it, they stay on the left.
We should fix this so that any extra field is right below the Name field (and with a bigger padding between the two).
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | new-styling.png | 249.41 KB | bojanz |
| #6 | improve_the_styling_of-2689281-6.patch | 1.42 KB | mglaman |
| #4 | improve_the_styling_of-2689281-4.patch | 1.09 KB | mglaman |
| #4 | Colors___Site-Install.png | 20.9 KB | mglaman |
| styling-bug.png | 247.7 KB | bojanz |
Comments
Comment #2
bojanz commentedRelated core issue: #2675464: Margin on form-items in table rows (Classy)
Comment #3
mglamanComment #4
mglamanPR https://github.com/drupalcommerce/commerce/pull/3
Comment #5
bojanz commentedNeeds its own library, we have no need to reuse/abuse the product add/edit form CSS here, it's unrelated.
We also need an IEF patch to improve the margins between elements, as detailed in the #2 core issue.
Comment #6
mglamanUpdated patch
Comment #8
bojanz commentedYour comment in #2675464: Margin on form-items in table rows (Classy) led me to the right path. You said:
And you're right. I expected the drag handle to be in its own td, but it's not.
Looking into the core code I realized that the handle is always added to the first existing cell, a new cell is not created.
Sharing a cell works only if the existing content fits in one line. Ours doesn't.
WidgetBase accounts for this by adding an empty cell to each row, which then receives only the tabledrag, keeping the widget form in its own cell.
I've replicated the same approach here:
https://github.com/drupalcommerce/commerce/commit/e52fbfe03e305421905243...
Attaching a screenshot.