見出し画像

TWSNMP FC:管理マップが左にずれていく怪奇現象に悩む

今朝は、1時半と3時に猫が起こしにきました。でも早すぎるのでお世話した後、二度寝しました。5時半に自力で起きました。それを察知した猫はリビングからやってきました。今朝は猫の大好きな雨です。ベランダで雨水を舐めてご機嫌なようです。庭は風があるのでまだ出ないそうです。

今朝はポーリングリストなどの画面で別の画面に移動して戻ってもソートの状態やフィルターの状態を保持して同じ画面を表示する機能を組み込もうと思っていました。
でも、管理マップの画面を表示してしらばくすると、怪奇現象のように表示が左にずれていくのに気が付きました。

画像1

画像2

のようになります。よく観察するとマップをリフレッシュするタイミングでずれるようです。ブラウザーの開発者ツールで調べると画面サイズに合わせてマップの横幅を調整するところで問題が発生しているようです。
いろいろ試行錯誤して横幅の調整を行いましたが、しっくりきません。
闇雲にスタイルを変えるのを止めでVuetifyのマニュアルを、真面目にしらべてみると、

fluid="true"
ビューポートの最大幅のブレークポイントを削除します

という設定を見つけました。さっそく

画像3

のように試してみました。

画像4

マップやテーブルが画面の横幅一杯に表示されるようになりスッキリしました。管理マップが左にずれる怪奇現象も発生しなくなりました。
でも今朝はここで時間切れです。今朝の開発は、

です。たった1行の修正ですが、かなり満足です。

明日に続く


開発のための諸経費(機材、Appleの開発者、サーバー運用)に利用します。 ソフトウェアのマニュアルをnoteの記事で提供しています。 サポートによりnoteの運営にも貢献できるのでよろしくお願います。