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 :)

[colemanw]

Based on the multiple complaints about this and the simplicity of the fix I've changed the base to target version 5.80.

[colemanw]

have you checked what it does elsewhere?

@artfulrobot regarding this question, BS3 clearly assumes that these <legend> properties are set to their defaults, and any CMS theme that mucks with those defaults causes bootstrappy fieldsets to break. So I would think this will fix any other places that face the same problem. As @vingle said, this is a reset.

[clarkac1]

Assuming those 6 lines are added at the bottom of the file (sorry, not familiar with this stuff), this didn't work. The result was exactly the same as before. System is 5.78.3 under Backdrop 1.29.1. I cleared caches using Civi and browser cache. In Display preferences 'Greenwich' is set for both backend and frontend (it was automatic). In Backdrop themes the theme is set to 'Seven' for Civi Admin. BTW If I set the Civi Admin theme to 'Basis' it fixes the problem (before and after applying this fix) so there is a workaround.

[colemanw]

@clarkac1 sorry this is a .scss file so it's not as simple as appying the patch. You also have to compile it. If you're using composer you can do so with the composer install command. Otherwise it's probably not worth the trouble & instead you could just add the following to the bottom of ext/greenwich/dist/bootstrap3.css.

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