計算式プラグインのDIALOG関数における表示幅の挙動および枠の追従について

プラグイン
1

レコードの概要をダイアログ表示 からディスカッションを続行:

1. 発生している現象

DIALOG 関数を使用し、第2引数のメッセージ部分にHTML（table 要素など）を記述した際、ダイアログの外枠（背景の白いボックス）が中のコンテンツの幅に合わせて正しく拡張されず、表示がいびつになる現象が発生しています。

添付のスクリーンショットの通り、ダイアログのヘッダーアイコンや「OK」ボタンを含む標準の白い枠が左側に寄ったまま固定されており、右側に配置したコンテンツ（テーブル等）がその枠を大きくはみ出して表示されてしまいます。

スクリーンショット 2026-05-08 110444
スクリーンショット 2026-05-08 110444832×1272 16.5 KB

2. 設定している計算式（構造の抜粋）

DIALOG(
  ARRAY(
    "住居手当：適用開始日の判定ロジック",
    "<div style='font-size: 14px; text-align: left; line-height: 1.6; color: #333; padding: 20px; border: 1px solid #e1e4e8; border-radius: 8px; background: #fff; min-width: 800px;'>" &
      "<h2 style='border-left: 6px solid #2980b9; padding-left: 15px; color: #2c3e50; margin-bottom: 20px;'>適用開始日の判定ロジック</h2>" &
      "<table style='width: 100%; border-collapse: collapse;'>" &
        "<thead>" &
          "<tr style='background: #2980b9; color: #fff;'>" &
            "<th style='padding: 12px; text-align: center;'>例題</th>" &
            "<th style='padding: 12px; text-align: center;'>入居日</th>" &
            "<th style='padding: 12px; text-align: center;'>受理日</th>" &
            "<th style='padding: 12px; text-align: center; background: #d35400;'>適用開始日</th>" &
          "</tr>" &
        "</thead>" &
        "<tbody>" &
          "" &
        "</tbody>" &
      "</table>" &
    "</div>",
    "info",
    0
  )
)

3. 質問事項

  • DIALOG 関数の外枠（白い背景ボックス）が、中のHTML要素の幅（min-width や table の幅）に合わせて自動的に拡張されないのは仕様でしょうか。
  • ダイアログを一定以上の横幅（例：800px程度）で表示させたい場合、外枠を正しく追従させるための推奨される記述方法や、特定のCSSクラスの指定などはありますでしょうか。
  • もし DIALOG 関数側で幅の制御が難しい場合、代替案として推奨される表示方法はありますでしょうか。

お忙しいところ恐縮ですが、ご確認のほどよろしくお願いいたします。

2
  • DIALOG 関数の外枠（白い背景ボックス）が、中のHTML要素の幅（min-width や table の幅）に合わせて自動的に拡張されないのは仕様でしょうか。

はい。
下記のように、width が固定長で指定されています。

2026-05-08_17h10_21
2026-05-08_17h10_212253×1293 325 KB

  • ダイアログを一定以上の横幅（例：800px程度）で表示させたい場合、外枠を正しく追従させるための推奨される記述方法や、特定のCSSクラスの指定などはありますでしょうか。

CSS で、.swal2-rex0220-popup { width: 600px; } のようにサイズを指定するか、
.swal2-rex0220-popup { width: auto; } のように自動指定をしてください。

指定例： rex0220 計算式プラグイン レコードの概要をダイアログ表示

// header1:($HEADER1) HEADER
LET(
  table, TAGS_HTML(
  TAG("style", JOIN(ARRAY(
      ".swal2-rex0220-popup { width: 600px; }",
      ".custom-table { width: 100%; table-layout: auto; border-collapse: collapse; }",
      ".custom-table td { border: 1px solid darkgray; padding: 4px 6px; text-align: left; }",
      ".custom-table td:first-child { white-space: nowrap; color: blue; }",
      ".custom-table td:last-child { word-break: break-word; }",
  ), NEWLINE(),1)),
  TAG("table", 
    ATTR("class", "custom-table "),
    STYLE("border-collapse", "collapse"),
    TAG("tr", TAG("td", "顧客名"), TAG("td", 顧客名)),
    TAG("tr", TAG("td", "部署名"), TAG("td", 部署名)),
    TAG("tr", TAG("td", "担当者名"), TAG("td", 担当者名)),
    TAG("tr", TAG("td", "案件名"), TAG("td", 案件名)),
    TAG("tr", TAG("td", "確度"), TAG("td", 確度)),
    TAG("tr", TAG("td", "初回商談日"), TAG("td", DATE_FORMAT(初回商談日),
      IF(NOT(初回商談日),STYLE("background-color:#f9bba5;")))),
    TAG("tr", TAG("td", "提案プラン"), TAG("td", 提案プラン)),
    TAG("tr", TAG("td", "オプション"), TAG("td", オプション)),
    TAG("tr", TAG("td", "商談担当者"), TAG("td", 商談担当者)),
    TAG("tr", TAG("td", "プラン費用"), TAG("td", FIXED(プラン費用),
      STYLE("text-align:right;"), IF(プラン費用>1000000,STYLE("color:red;")))),
    TAG("tr", TAG("td", "オプション費用"), TAG("td", FIXED(オプション費用),
      STYLE("text-align:right;"), IF(オプション費用>1000000,STYLE("color:red;")))),
    TAG("tr", TAG("td", "合計費用"), TAG("td", FIXED(合計費用),
      STYLE("text-align:right;"), IF(合計費用>1000000,STYLE("color:red;")))),
    TAG("tr", TAG("td", "受注予定日"), TAG("td", DATE_FORMAT(受注予定日))),
    TAG("tr", TAG("td", "詳細"), TAG("td", 詳細)),
  )),
  DIALOG(BOPT(
    "TITLE","案件概要",
    "HTML",table,
    "DETAIL","Y",
    "ICON","",
    "SCAN",0
  ))
)
「いいね！」 1
3

ご回答いただきありがとうございます。
おかげ様で思い通りの確認ダイアログが作成できました。

DIALOG関数は本当に汎用性が高くて重宝しております。
ありがとうございました。
今後ともよろしくお願いいたします。

「いいね！」 1