ARCHIVE　／　2022/05/05

[Drupal] Responsive Dialog

在 Drupal 8/9 可以用 OpenDialogCommand Class 來實作 Dialog 或 Modal Dialog。

但要怎麼讓 Dialog 可以因應載具尺寸自動調整呢？例如電腦版下最多 700px 的大小、而在手機版底下則變成滿版。在網路上搜尋到的範例，大多是

$response->addCommand(new OpenModalDialogCommand($title, $content, ['width' => '700']));

其中，width 值所佔用的參數其實就是 $dialogOptions，透過文件可以得知 $dialogOptions 可以直接使用 jQuery UI Dialog 支援使用的 Options¹，包括：

appendTo
autoOpen
buttons
classes
closeOnEscape
closeText
dialogClass
draggable
height
hide
maxHeight
maxWidth
minHeight
minWidth
modal
position
resizable
show
title
width

既然 jQuery UI Dialog 有提供 maxWidth 的參數，那最直覺的解法就是設定

$dialogOptions = ['width' => 700, 'maxWidth' => '100%'];

但實際套用後，會發現其實 Dialog 並沒有如預期般在手機版變成 100% 的寬度。

於是，便轉換下思維方向，改成找 jQuery UI Dialog responsive 關鍵字，果不其然就找到一個 jQuery UI Dialog 說明文件中不存在的神秘參數 fluid²，再搭配 width / maxWidth 的設定，就可以成功達到 Responsive jQuery UI Dialog 的效果了。

$dialogOptions = [
    width: 'auto', // overcomes width:'auto' and maxWidth bug
    maxWidth: 700,
    height: 'auto',
    fluid: true, //new option
];

Footnotes