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]
Comments
I installed 'Bootstrap4'
I installed 'Bootstrap4' theme and then create the dialog with the attributes like in your code:
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.
Maybe the scrollbar is
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
Thank you I will see if the
Thank you I will see if the problem does not come from my sub theme