管理画面のスクリーンショットが届いた。イベントの編集画面。日付、時間、所要時間、イベント名、説明、定員、参加費、決済URL、Zoom URL、アンケートURL。入力欄が縦にずらりと並んでいる。
そして、保存ボタンが、写っていない。画面の下に隠れて、見えない。
「保存・閉じるボタンが画面外へ隠れています」
入力はできる。でも、保存できない。フォームとして、これは壊れている。
全部を入れようとすると、はみ出す
原因は単純だった。モーダルに高さの上限が無く、中身の分だけ縦に伸びていた。項目が十個もあれば、画面の高さを超える。超えた分は下にはみ出し、一番下にある保存ボタンが、画面の外に出る。
よくある直し方は、モーダル全体をスクロールできるようにすることだ。だがそれだと、保存ボタンを押すために、毎回一番下までスクロールしないといけない。長いフォームほど、ボタンが遠くなる。
欲しいのは逆だった。中身は長くてもいい。でもボタンだけは、いつも見えていてほしい。
中身だけ流して、足は固定する
モーダルを三つに分けた。タイトル、本文、ボタン。
#event-modal .modal{ display:flex; flex-direction:column; max-height:90vh; }
#event-modal .modal-body{ flex:1; overflow-y:auto; }
#event-modal .modal-btns{ position:sticky; bottom:0; }モーダル全体の高さを画面の九割までに制限する。真ん中の本文だけがスクロールし、上のタイトルと下のボタンは動かない。ボタンの帯を sticky で底に貼りつける。これで、入力欄をいくらスクロールしても、キャンセルと保存は常に画面の下に居続ける。
右上には「×」を足した。Escでも閉じる。背景をクリックしても閉じる。
ただし、一つだけ例外を作った。入力の途中で、うっかり背景をクリックしてしまったとき。確認なしで閉じて、書きかけの内容を消すのは乱暴だ。だから「何か入力済みなら、背景クリックでは閉じない」ことにした。閉じたいなら、×かキャンセルを、意思を持って押す。誤クリックでは、何も失わない。
保存の最中も、状態を見せる
ボタンの位置を直したついでに、保存の挙動も整えた。
保存を押したら、ボタンを無効にして「保存中…」に変える。二度押しを防ぐ。成功したら閉じて「保存しました」と小さく出す。失敗したら、閉じずにエラーを出して、もう一度直せるようにする。
低い画面で実際に開いて確かめた。縦六百ピクセルの窓でも、保存ボタンは底に貼りついて、画面の中に居た。フォームが長くても、ボタンは逃げない。
入力できるのに保存できない画面は、入力すらできない画面より、たちが悪い。書いたものが、行き場を失うからだ。ボタンを画面の中に留めておくことは、小さなCSSだが、フォームの最低限の約束だった。
次回は、スマホのメニューに付けた「×」ボタンが、なぜか押せなかった話を書く。原因は、別の場所に書いたスタイルが漏れていたことだった。
シンプルシステム株式会社 代表 伊藤勝彦