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

Comments

EricRondo created an issue. See original summary.

EricRondo’s picture

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 commented
Assigned: Unassigned » asmita26
asmita26’s picture

asmita26 commented
Assigned: asmita26 » Unassigned
Status: Active » Needs review
StatusFileSize
new bootstrap-layout_builder_theme-3124174-4.patch1.19 KB
new layout-builder_img1.png270.83 KB
new 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 commented
Assigned: Unassigned » hansa11
ambuj_gupta’s picture

ambuj_gupta commented
Assigned: hansa11 » ambuj_gupta
ambuj_gupta’s picture

ambuj_gupta commented
StatusFileSize
new 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 commented
Assigned: ambuj_gupta » Unassigned
Status: Needs review » Needs work
asmita26’s picture

asmita26 commented
Assigned: Unassigned » asmita26
jordik’s picture

jordik commented

Try out the module Bootstrap Layout Builder.

joseph.olstad’s picture

joseph.olstad
Primary language French
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
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
commented

perhaps we need both media_library_theme_reset module installed AND this patch?

hatuhay’s picture

hatuhay commented
Status: Needs work » Closed (won't fix)
joseph.olstad’s picture

joseph.olstad
Primary language French
commented
Status: Closed (won't fix) » Closed (works as designed)
Parent issue: » #2992601: [bootstrap] Layout builder - drag & drop and contextual links not working

I believe this was fixed upstream, otherwise please check the advice from this commenté

From this issue:

#2992601: [bootstrap] Layout builder - drag & drop and contextual links not working