Problem/Motivation
The classes in the Body tag looks like they need to be cleaned up a bit. There are four white-spaces before the Bootstrap5 classes start, and one class ends with a dash (bg-):
Olivero body tag
<body class="toolbar-tray-open toolbar-horizontal toolbar-fixed toolbar-loading user-logged-in path-frontpage">
Bootstrap 5 body tag
<body class="toolbar-tray-open toolbar-horizontal toolbar-fixed toolbar-loading user-logged-in path-frontpage bg- d-flex flex-column h-100">
These are the classes in question, including four white-spaces: bg- d-flex flex-column h-100
Steps to reproduce
Enable the theme, open the source from a page, and check the body tag. Compare to for example Olivero theme.
Proposed resolution
- Make sure that no classes end with a dash (
bg-) - Clean up the code, so that there are only ever one white-space between classes
Remaining tasks
Make sure that no classes end with a dash (bg-)Clean up the code, so that there are only ever one white-space between classesAdd issue forfooterandnavbar#3317503: Check and fix classes in footer and navbar, if needed
User interface changes
API changes
Data model changes
| Comment | File | Size | Author |
|---|---|---|---|
| #40 | 3311824-40_2-after.png | 21.49 KB | shyam_bhatt |
| #40 | 3311824-40-after.png | 17.8 KB | shyam_bhatt |
| #29 | 3311824-29_2-after.png | 21.49 KB | shyam_bhatt |
| #29 | 3311824-29-after.png | 17.8 KB | shyam_bhatt |
| #14 | fix-classes-in-body-and-footer-tag-3311824-14.patch | 1.21 KB | shyam_bhatt |
Issue fork bootstrap5-3311824
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
_pratik_Comment #3
anchal_gupta commentedI have uploaded the patch. Please review it
Comment #4
ressaThanks @Anchal_gupta, but it looks like @pratik_specbee is working on it?
Also, your patch doesn't work (it is missing a
#), it doesn't fix all white-spaces, nor thebg-issue.Comment #5
_pratik_Please Try applying the patch.
Thanks
Comment #6
_pratik_Comment #7
ressaThanks @pratik_specbee! That looks like it takes care of the issues and cleans it up.
There's a small detail, when you enable a background, an extra white-space is added:
<body class="toolbar-tray-open toolbar-horizontal toolbar-fixed toolbar-loading user-logged-in path-frontpage bg-dark d-flex flex-column h-100">Comment #8
_pratik_Thanks @ressa, my bad, i missed that spacing.
sending a updated patch.
Comment #9
_pratik_Here is the updated patch with interdiff.
Thanks
Comment #10
ressaLooks good @pratik, there are only one space now, both with or without background enabled.
It wasn't part of the initial issue, but I just took a look at the source, and stumbled over another instance of extra white-spaces, coming from
templates/layout/page.html.twig:<footer class="mt-auto footer-dark text-light bg-secondary">Would it be possible for you to take a look at it as well?
Comment #11
_pratik_yes sure @ressa
Comment #12
_pratik_Try this one for footer please.
Comment #13
ressaThanks! It almost works, but if I enable "Footer options" > "Footer background", I get this:
<footer class="mt-auto bg-primary">Comment #14
shyam_bhatt@ressa please check the patch which includes both the solution.
After patch,
<body class="toolbar-icon-9 toolbar-tray-open toolbar-horizontal toolbar-fixed user-logged-in path-frontpage d-flex flex-column h-100" ><footer class="mt-auto footer-dark text-light bg-secondary">Comment #15
ressaThanks @Shyam_Bhatt, it works sort of, but I still see this:
<footer class="mt-auto ">and<footer class="mt-auto bg-secondary">.Comment #16
shyam_bhatt@ressa please check patch
<footer class="mt-auto{{ footer_classes|replace({' ': ' '}) }}">Comment #17
ressaSure, that's also what it says in my file ... but I still get the spacing.
It's probably best to aim for a single unified patch, which fixes both body and footer tag at the same time.
Comment #18
vladimirausSee this solution #3270726: Container class missing in unsaved subtheme
Comment #19
ressaThanks for the fresh release of 2.0.1 @VladimirAus, but it still has the spacing issue. Also, it happens both in the default theme, but also sub-themes.
Comment #20
vladimiraus@ressa space is not critical. default empty bs5 classes now should be populated.
FYI, 2.0.2 was released as 2.0.1 was broken with removal of classy.
Comment #21
ressaI agree, it is not critical, but can be solved, and there was progress here solving that. Also, there is a "half" class, displayed as
bg-which could be an issue, and should be fixed in my opinion.Thanks for the tip about the 2.0.2 release. Perhaps a short note could be added on https://www.drupal.org/project/bootstrap5/releases/2.0.2 to explain the reason why it was released?
Comment #22
ressaSorry @Shyam_Bhatt, your patch in #14 is indeed unified, including the fix for the body, and adding a solution for the footer, which works sort of: There are still spaces in the footer, just less ...
The body, which was my main concern was fixed by @_pratik_, so thanks for that.
The issue is solved, so I am changing Status and lowering Priority, since nothing is broken, and it's more a nice-to-have than need-to-have.
Comment #24
ressaI have been thinking some more about this, and maybe it's better to deal with getting the classes right in the preprocess stage, rather than Twig? Here is a patch with an attempt. Also, I am removing the footer task for now, footer and navbar can always be fixed in another issue.
Comment #25
shyam_bhattComment #26
ressa@Shyam_Bhatt: A patch in an issue needs to go through the steps required, with thorough review, and then changing status to "Reviewed and tested by the community", if it looks good and works well, the code guidelines are followed, etc.
For more, see Review a patch or merge request.
Comment #27
dineshreddymathuku commented#12 and #14 patches looks good for me
Thanks
Comment #28
ressaThanks, but the two patches in #12 and #14 are no longer valid. The patch for review is #23, and the Merge Request is https://git.drupalcode.org/project/bootstrap5/-/merge_requests/17
Comment #29
shyam_bhatt@ressa I have checked the "MR !17" working fine. Please check the below images. After applying the MR the unwanted space and class will be removed from the body tag.
Comment #30
ressaThanks @Shyam_Bhatt. Perhaps you can also check if
bg-classes are added correctly, if Body theme and Body background options are enabled, and share your observations here?Comment #31
ressaI have created #3317503: Check and fix classes in footer and navbar, if needed to check if other tags such as
footerandnavbarhave the same issue, to maybe also move the logic to bootstrap5.theme file.Comment #33
vladimirausComment #34
ressaThis is the Merge Request which was reviewed by @Shyam_Bhatt:
https://git.drupalcode.org/project/bootstrap5/-/merge_requests/17
It looks like something else was committed ...
Comment #35
shyam_bhatt@ressa Let's create new issue for remaining fixes, after taking latest pull.
Comment #36
vladimirausI missed merged request. Reverting it back.
Sounds like there is a bit of a mess with this issue.
Please either add tests or test cases, so it is easier to test.
Comment #38
vladimirausAdded hook update for none value.
Please review.
Comment #39
ressa@Shyam_Bhatt: Right, and I created #3317503: Check and fix classes in footer and navbar, if needed, as I mentioned in #31. Or do you mean something else?
Comment #40
shyam_bhattReviewed the "MR ! 17", working fine.
Comment #41
jannakha commentedlooks ok
Comment #42
vladimirausThank you 🥤