Hi,

I have a fresh install of D8, with Layout Builder enabled on Page nodes individually (so editable within front theme).

While i had no problem with Bartik, when i installed Bootstrap theme the UI of Layout Builder is quite "broken" when adding/editing a section or a block :
- page is frozen (overflow hidden on body), not critical but it is very useful to be able to scroll up/down while adding a custom block
- the "add section/block" panel doesn't look good (too large, labels, etc) and is not positioned correctly
- the "configure block" panel is quite broken as well

It looks like Bootstrap theme is adding some classes (modal...) that change the default display, which could be great if it was on purpose, but i don't think it is the case.

Did i missed any setting which could solve this ?

CommentFileSizeAuthor
#7 layout_broken.png356.66 KBambuj_gupta
#4 layout-builder_img2.png393.66 KBasmita26
#4 layout-builder_img1.png270.83 KBasmita26
#4 bootstrap-layout_builder_theme-3124174-4.patch1.19 KBasmita26
screen3.jpg28.75 KBEricRondo
screen2.jpg22.42 KBEricRondo
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

EricRondo created an issue. See original summary.

EricRondo’s picture

EricRondo CreditAttribution: EricRondo commented

For information, disabling the Modals option in theme settings solves most of the positionning issues (visible on the screenshots).
Anyway, the rendering of the panels/buttons/etc is still not very satisfying. For the moment i will add some custom css to solve these.

asmita26’s picture

asmita26 CreditAttribution: asmita26 as a volunteer and at QED42 commented
Assigned: Unassigned » asmita26
asmita26’s picture

asmita26 CreditAttribution: asmita26 as a volunteer and at QED42 commented
Assigned: asmita26 » Unassigned
Status: Active » Needs review
FileSize
bootstrap-layout_builder_theme-3124174-4.patch1.19 KB
layout-builder_img1.png270.83 KB
layout-builder_img2.png393.66 KB

Fixed broken theme with layout builder on enabling modal configurations of bootstrap and verified by disabling it as well. Added css realted fix through js as wrapper seems to be missing when modal configuration is enabled.

hansa11’s picture

hansa11 CreditAttribution: hansa11 as a volunteer and at QED42 commented
Assigned: Unassigned » hansa11
ambuj_gupta’s picture

ambuj_gupta CreditAttribution: ambuj_gupta at QED42 commented
Assigned: hansa11 » ambuj_gupta
ambuj_gupta’s picture

ambuj_gupta CreditAttribution: ambuj_gupta at QED42 commented
FileSize
layout_broken.png356.66 KB

After applying patch # 4. I am still able to see the broken layout.
@asmita26. Please check.

Steps to Test:
Prerequite: Drupal 8.9
1. Install bootstrap module using composer.
2. Enable the Module and Apply the patch
3. Go to "admin/structure/types/manage/page/display" and enable Layout builder.
4. Create a basic content type. And edit the node.
5. Click on the Layout button.
6. Click on add block. And check

ambuj_gupta’s picture

ambuj_gupta CreditAttribution: ambuj_gupta at QED42 commented
Assigned: ambuj_gupta » Unassigned
Status: Needs review » Needs work
asmita26’s picture

asmita26 CreditAttribution: asmita26 as a volunteer and at QED42 commented
Assigned: Unassigned » asmita26
JordiK’s picture

JordiK CreditAttribution: JordiK commented

Try out the module Bootstrap Layout Builder.

joseph.olstad’s picture

joseph.olstad
Primary language French
CreditAttribution: joseph.olstad commented

seems like there's still an issue, is anyone having great success with bootstrap versions newer than 8.x-3.21 ?

or any version for that matter using this patch above?

joseph.olstad’s picture

joseph.olstad
Primary language French
CreditAttribution: joseph.olstad commented

hmm, the project description here leads me to believe it might be fixed by this:
https://www.drupal.org/project/media_library_theme_reset

joseph.olstad’s picture

joseph.olstad
Primary language French
CreditAttribution: joseph.olstad commented

perhaps we need both media_library_theme_reset module installed AND this patch?