Strange alignment on payment options
On the event form (and many other forms in CiviCRM) the label is in a 1/3 width column, and the field is left-aligned next to it:
This isn't happening on the payment processor field:
But delete the helpicon and the problem goes away:
display:none
isn't enough, the icon actually needs to be removed from the DOM.
The issue seems to be this:
.crm-container td.label:has(.helpicon) {
display: flex;
...
}
This is making the td
element no longer behave like a cell, and so I think the browser is unsure how to treat the rest of the cells in that row.
I thought one option is to make the parent row also a flex container:
.crm-container tr:has(td .helpicon) {
display: flex;
align-items: baseline;
}
But, alas, that messes with the layout of the #contributionType
table.
So, overall I don't really have a great suggestion for how this is resolved, but I thought it'd be worth noting. Perhaps someone can see a smart way around the issue here.