@hatuhay I disabled this option and it doesn't work. Here is a modal window of the Flag module :

Capture d’écran du 2021-03-23 13-56-24.png

It's horrible, overflowing and won't close when I click outside.

Here is a modal window that I made manually in a TWIG file :

Capture d’écran du 2021-03-23 13-56-06.png

Why does the Bootstrap theme handle Modals without any problem and Barrio would not be able to handle that ?

Registration on my site requires acceptance of the terms and conditions (displayed in a Modal). Unable to close Modal. Result, the page must be reloaded and the form is deleted. Same problem in the Drupal Commerce purchase funnel, the terms of sale are displayed in a Modal window and it's even worse for Flags.

The modals are totally inconsistent with Bootstrap 4.

Comments

zenimagine created an issue. See original summary.

hatuhay’s picture

Component: Code » Documentation
Category: Bug report » Support request
Priority: Major » Normal
Issue summary: View changes
Status: Active » Closed (works as designed)

This behaviour is documented,
Under theme's settings disable the conversion of the links to buttons.
I am removing from the issue personal opinions that does not add to the discission

zenimagine’s picture

zenimagine’s picture

@hatuhay I disabled this option and it doesn't work. Here is a modal window of the Flag module :

Capture d’écran du 2021-03-23 13-56-24.png

It's horrible, overflowing and won't close when I click outside.

Here is a modal window that I made manually in a TWIG file :

Capture d’écran du 2021-03-23 13-56-06.png

zenimagine’s picture

Status: Closed (works as designed) » Active
zenimagine’s picture

This is a problem, not a request for support. The problem is easy to reproduce, you have to use contrib or kernel modals to realize that they are unusable.

This is an important problem which seriously handicaps the theme.

https://www.drupal.org/project/flag

https://www.drupal.org/project/legal

https://www.drupal.org/project/commerce_agree_terms

...

This is an important problem which seriously handicaps the theme.

For example I have the Legal module which displays a link to a Modal window when a user registers. If he clicks on the modal, the appearance is horrible and impossible to close it. He must reload the page (registration impossible). Same problem in the Drupal Commerce purchase funnel. The worst is the flags.

This is the only major problem that needs to be fixed for Bootstrap 4 before starting Bootstrap 5 on a bad basis.

Les Tour does not work with Barrio. I don't know if it's related to this problem. I don't know if the Tours are modal, popovers or whatever.

zenimagine’s picture

Category: Support request » Bug report
Priority: Normal » Major
hatuhay’s picture

Category: Bug report » Support request
Priority: Major » Minor
Status: Active » Closed (works as designed)

Modal windows called for core or contrib modules will open on core modals not on Bootstrap.
This is not a theme´s desition nor a bug.
If you want to open core or contrib module modals on bootstrap modal, modules should be patched.

zenimagine’s picture

@hatuhay Your solution is complicated and cumbersome to implement. Why Barrio does not integrate Modal like the Bootstrap module does :

https://www.drupal.org/project/bootstrap

Modals are used a lot in Drupal and contrib modules. It is a mistake not to integrate them.

This is the only completely inconsistent feature in the Barrio theme.

hatuhay’s picture

Modals are called from other modules, the theme does not control it.
You need to patch each module to do so.
Do not blame the messenger.

zenimagine’s picture

@hatuhay Why do other Bootstrap based themes handle Modals without a problem ? I do not understand. This is a big brake on the adoption of this theme.

With the theme https://www.drupal.org/project/bootstrap no problem. Why is it so complicated on Barrio ?

zenimagine’s picture

https://www.s1biose.com/fr/groupe/le-blog-de-mathieu

Go to the red button "Signaler" the modal window (flag) is unusable.

Go to the link (CGU) at the bottom of the https://www.s1biose.com/fr/user/register page, cannot close the modal window, even by clicking next to it.

zenimagine’s picture

@hatuhay How to apply Bootstrap styles to Flag for example ?

hatuhay’s picture

The problem is the position of the modal.
Your header is overlapping the close button.
Need to change UI Modal top at least

zenimagine’s picture

@hatuhay No, it is very far from being the only problem. When you click outside of Modal, it should automatically close. The buttons, the window, ... does not use Bootstrap.

Watch a modal created manually and a modal created by a contrib module.

Why does the Bootstrap theme handle Modals without any problem and Barrio would not be able to handle that ?

https://www.drupal.org/project/bootstrap

zenimagine’s picture

Status: Closed (works as designed) » Active
super_romeo’s picture

Why does the Bootstrap theme handle Modals without any problem and Barrio would not be able to handle that ?

I agree. Bootstrap theme does it without any patch.

akalam’s picture

I found a solution by installing the bootstrap4_modal module.

RoddyVinicio’s picture

@hatuhay #9 Please, what is the way to patch a module to be able to use the modals with bootstrap, I can't find it in the documentation, do you have any examples?

hatuhay’s picture

Status: Active » Closed (outdated)