I have a site with Drupal 8 and Bootstrap 3

I created a custom module to display a page in a modal window. The page contains a lot of text and I want it to have a scrollbar on the modal window.

How can I do this ? Here is the code of my module and the information I found :

https://getbootstrap.com/docs/4.3/components/modal/#scrolling-long-content

You can also create a scrollable modal that allows scroll the modal
body by adding .modal-dialog-scrollable to .modal-dialog.

I do not even know if my code is correct for Bootstrap or if it can be improved.

<?php
 
namespace Drupal\commerce_marketplace_terms_and_conditions\Plugin\Commerce\CheckoutPane;
 
use Drupal\Component\Serialization\Json;
use Drupal\Core\Form\FormStateInterface;
use Drupal\commerce_checkout\Plugin\Commerce\CheckoutPane\CheckoutPaneBase;
use Drupal\commerce_checkout\Plugin\Commerce\CheckoutPane\CheckoutPaneInterface;
use Drupal\Core\Link;
use Drupal\Core\Url;
 
/**
* Provides the completion message pane.
*
* @CommerceCheckoutPane(
* id = "marketplace_terms_and_conditions",
* label = @Translation("Marketplace Terms and Conditions"),
* default_step = "review",
* )
*/
class MarketplaceTermsAndConditions extends CheckoutPaneBase implements CheckoutPaneInterface {
 
/**
* {@inheritdoc}
*/
public function buildPaneForm(array $pane_form, FormStateInterface $form_state, array &$complete_form) {
$store_name = $this->order->getStore()->getName();
$store_id = $this->order->getStoreId();
$pane_form['#attached']['library'][] = 'core/drupal.dialog.ajax';
$attributes = [
'attributes' => [
'class' => 'use-ajax',
'data-dialog-type' => 'modal',
'data-dialog-options' => Json::encode([
'width' => 'auto'
]),
],
];
$link = Link::fromTextAndUrl(
$this->t('terms and conditions of the store "@store_name"', ['@store_name' => $store_name]),
Url::fromUri("internal:/store/$store_id/cgv", $attributes)
)->toString();
$pane_form['marketplace_terms_and_conditions'] = [
'#type' => 'checkbox',
'#default_value' => FALSE,
'#title' => $this->t('I have read and accept @terms.', ['@terms' => $link]),
'#required' => TRUE,
'#weight' => $this->getWeight(),
];
return $pane_form;
}
 
}

[![enter image description here][1]][1]

  [1]: https://i.stack.imgur.com/Jc5Xr.png

Comments

wombatbuddy’s picture

I installed 'Bootstrap4' theme and then create the dialog with the attributes like in your code:

$attributes = [
          'attributes' => [
            'class' => 'use-ajax',
            'data-dialog-type' => 'modal',
            'data-dialog-options' => Json::encode([
              'width' => 'auto'
            ]),
          ],
        ];

And the scrollbar is appears if the text doesn't fit in the window.
I guess, that the reason is not in this code, but in something else.

wombatbuddy’s picture

Maybe the scrollbar is present, but its color is the same as background color?
Try to scroll it with mouse.
(I noticed that out of the box, close button is invisible, but its present).

See the screenshot:
https://i.imgur.com/Olaa1XN.png

zenimagine’s picture

Thank you I will see if the problem does not come from my sub theme