Hiya,

I'm using a link in my twig file like so:

<a class="use-ajax" data-dialog-type="modal" href="/path"><img class="info-icon" src="/path/to/image/information.jpg"/></a>

The modal has a fixed width of 300px; what's the best way to modify this to make it a responsive width?

Thanks,
Glenn

Comments

glennnz created an issue. See original summary.

glennnz’s picture

glennnz commented
Issue summary: View changes
viren18febs’s picture

viren18febs commented
Assigned: Unassigned » viren18febs
Status: Active » Needs review

Hi glennnz,

You can use the modal classes for predefined size of module as per requirements, these are some of them.
.modal-sm, .modal-lg, .modal-xl.

if you want to fully responsive, then you need to use media queries in CSS file.

viren18febs’s picture

viren18febs commented
Assigned: viren18febs » Unassigned
glennnz’s picture

glennnz commented

@viren18febS

Like this?

<a class="use-ajax" data-dialog-type="modal-xl" href="..........

This doesn't work, the link doesn't open, no modal window appears.

Thanks,
Glenn

glennnz’s picture

glennnz commented
Status: Needs review » Active
viren18febs’s picture

viren18febs commented

@glennnz

You can use this. This is the working example and you can change it as per your requirement..

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large popup</button>
viren18febs’s picture

viren18febs commented
Status: Active » Needs review
viren18febs’s picture

viren18febs commented

Or You can define the size of modal as follows.
<p><a href=”/node/3” data-dialog-type=”modal” class=”use-ajax” data-dialog-option={&quot;width&quot;:800, &quot;height&quot;:500}}>Node 3</a></p>

glennnz’s picture

glennnz commented

#9 works with a small typo correction, add quotes, thus:

<a href=”/node/3” data-dialog-type=”modal” class=”use-ajax” data-dialog-option="{&quot;width&quot;:800, &quot;height&quot;:500}">Node 3</a>

glennnz’s picture

glennnz commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

leanderjcc’s picture

leanderjcc
Primary language Dutch
Location Ghent
commented

This wasn't working for me as the attribute should be "data-dialog-options" instead of "data-dialog-option".

Thus, the correct example being:
<a href=”/node/3” data-dialog-type=”modal” class=”use-ajax” data-dialog-options="{&quot;width&quot;:800, &quot;height&quot;:500}">Node 3</a>

As form element:

$form['somelink'] = [
  '#type' => 'link',
  '#title' => 'Some link',
  '#url' => $url,
  '#attributes' => [
    'class' => [
      'use-ajax',
    ],
    'data-dialog-type' => 'modal',
    'data-dialog-options' => Json::encode([
      'width' => 800,
      'height' => 500,
    ]),
  ],
];