メモ：MTでファイルアップロード等のダイアログが画面内に収まり切らない時の対処

Movable Type 4.54.25以降で、ファイルアップロードなどの画面がモニタの解像度やウインドウサイズによって収まりきらずにボタン類が画面に表示されなくなる問題の対処法です

以下の内容は、Movable Type 4系に関するものです。

この問題は、通常の使用では表面化しない類のものかと思うのですが、画像ファイルなどをアップロードする際に表示される、「ダイアログ」が画面内に入りきらないことで、「キャンセルボタン」や「アップロード」といったボタンが表示されなくなってしまう、というものです。

解決法としてMovable Type.JPにて、代替テンプレートが公開されています。

• ファイルアップロード画面に「アップロード」のボタンが表示されない | Movable Type 4 FAQ

説明を読んでファイルをダウンロードして、Movable Typeが設置されているディレクトリ内の指定された箇所にファイルを置くだけなのでそれほど面倒ではありません。

それで、適用するファイルのパスは、以下のようになります。

• MTがインストールされているディレクトリ/alt-tmpl/cms/include/footer.tmpl

適用後、ダイアログが画面に収まりきらないときにスクロールバーが表示される動作になっていれば正常な動作です。

以下は試しにFirefoxでFirebugを起動させてみたときのスクリーンショットです。

おまけ

それで、「ダイアログ自体をドラッグしてみたらどうよ」、ということで実装してみました。

先ほどの件でjQueryが使われてましたので、DraggableというUIを利用するとします。

jQuery UIからUI coreとDraggableをダウンロードしておきます。ダウンロード後は展開したファイルからui.core.js、ui.draggable.jsをMTのjqueryフォルダ内か自分が管理するJSファイルのディレクトリなどにアップロードしておきます。

先述のfooter.tmplファイルを開いてjQueryの呼び出しの箇所と、スクリプト実行の部分を書き換えをおこないます。

</mt:unless>というコードの下付近から以下のように変更しています。なお、jQueryのヴァージョンで1.3.2を使っている関係で、デフォルトのfooter.tmplのjQuery呼び出しファイル自体も変更しています。

<script type="text/javascript" src="<$mt:Var name="static_uri"$>jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<$mt:Var name="static_uri"$>jquery/ui/ui.core_172.js"></script>
<script type="text/javascript" src="<$mt:Var name="static_uri"$>jquery/ui/ui.draggable_172.js"></script>
<script type="text/javascript"><!-- 
    $("head").append('<link rel="stylesheet" href="<mt:var name="static_uri">css/dialog_draggable.css" type="text/css" media="screen" />');
    $(document).ready(function(){
                $('#dialog-container').draggable();
    });
    jQuery(function() {
        jQuery(window).resize(function() {
            var $dialog = $('#dialog');
            var height = jQuery(window).height();
            if ($dialog.length) {
                $dialog.height(height - 60);
                $('#dialog-iframe').height(height - 60);
            }
        });
    });
// -->
</script>

jQueryで、スタイルシートをappendしていて、スタイルシートで使っているのは、カーソルの形を変えるといった程度のものです。mt-static/css/ 以下か自分がわかる任意の箇所に置きます。

/* for draggable dialog */
#dialog-container{ cursor: move; }
#dialog-container:hover { border: 2px solid blue; }

footer.tmplを変更したものに差し替えて、ダイアログを見ますと以下のように、ダイアログの外側のグレーアウトされた部分でドラッグ可能となりました。

それと注意点としてですが、MTのヴァージョンをあげた、などに起因して動かなくなってしまった場合は、この代替テンプレートファイルを削除されるとよろしいかと。