Fix dev/core#5561 - CMS theme floats break FormBuilder layout

[colemanw]

Overview

Fix CMS theme from breaking FormBuilder layout.

Before

After

Technical Details

I don't know if this is the best place to put this. Doing it here, it'll need to be copied into every other theme as well. But I don't think we have any "central" place for these things, so I guess we just have to copy it.

[civibot]

🤖 Thank you for contributing to CiviCRM! ❤️ We will need to test and review this PR. 👷

Introduction for new contributors...

• If this is your first PR, an admin will greenlight automated testing with the command ok to test or add to whitelist.
• A series of tests will automatically run. You can see the results at the bottom of this page (if there are any problems, it will include a link to see what went wrong).
• A demo site will be built where anyone can try out a version of CiviCRM that includes your changes.
• If this process needs to be repeated, an admin will issue the command test this please to rerun tests and build a new demo site.
• Before this PR can be merged, it needs to be reviewed. Please keep in mind that reviewers are volunteers, and their response time can vary from a few hours to a few weeks depending on their availability and their knowledge of this particular part of CiviCRM.
• A great way to speed up this process is to "trade reviews" with someone - find an open PR that you feel able to review, and leave a comment like "I'm reviewing this now, could you please review mine?" (include a link to yours). You don't have to wait for a response to get started (and you don't have to stop at one!) the more you review, the faster this process goes for everyone 😄
• To ensure that you are credited properly in the final release notes, please add yourself to contributor-key.yml
• For more information about contributing, see CONTRIBUTING.md.

Quick links for reviewers...

• ➡️ PR Demo site (can be rebuilt with the command test this please).
• 📖 Review standards
• 🗒️ Review template (brief or verbose)

➡️ Online demo of this PR 🔗

[colemanw]

FYI @artfulrobot and @vingle this will need to be ported to other themes.

[colemanw]

@totten I see you added a label to run additional tests, but note this is a css-only patch, and our css files have no test coverage, regardless of cms. The test runs on this PR are basically irrelevant.

[totten]

@colemanw Yeah, agree the unit-tests don't matter for CSS patch. However, the run-backdrop label also builds a demo site -- where a reviewer could click-around and see the CSS in action.

(Alas, the failure seems to be a pretty persistent problem in master+Backdrop. Doesn't seem related to this PR, but does make it harder to use it!)

[artfulrobot]

oh yes, I remember having to fix this in Aah (pre-Thames/RiverLea). Relevant commits:

• artfulrobot/aah@74b1226 (see comment "I don't know why.."!
• artfulrobot/aah@5d56e38

Your CSS will apply to all <legend>s under any #bootstrap-theme - have you checked what it does elsewhere?

[vingle]

have you checked what it does elsewhere?

Yeah I was wondering if it was only an issue in FormBuilder interface if it's safer to preface with #afGuiEditor.

FWIW I can't see this issue on RiverLea so maybe this was already fixed. Do you know which CMSs this specifically is a problem with so I can test there?
(NB - this question doesn't impact this PR)

[vingle]

I've just taken a look with Drupal + Seven and legends are broken there too, in a way that this fix doesn't fix (position: absolute, then re-aligned - below in Greenwich).

Other than using legends less – which I'd support given how quirky and awkward to style legends+fieldset are (with the fieldset border wanting to sit in the middle of the legend) I think there needs a more comprehensive legend reset, ie

#bootstrap-theme legend {
   position: initial;
   text-transform: inherit;
   float: none;
}

[colemanw]

@vingle I've updated this PR with your suggested change :)