お知らせ
公式サイト?のトラブル報告に「画面サイズを変更したときに施設予約のカレンダーの表示が崩れる」といった投稿があり興味が湧き確認してみました。
確かに大きい画面でブラウザの枠を小さくした場合、施設名の列と実際の時間枠の列(テーブル)が2段となりちょっと不細工かなあっと!
そこでちょっと時間枠の列(テーブル)を囲っているdivタグの横幅を計算するようにすれば問題も解消します。
開発ツール(F12)で見てもらえば標準ではwidthが固定値となっていますが、calc(100% - 130px)と計算式にてブラウザの横幅をかえることでwidthの値も変わるように変更しました。
もともと標準でも計算して固定値をもとめていますが、ロードした際の計算値なのでブラウザの横幅を変更したときは計算がされないので、崩れたように見えるのでした。
しかし、この問題は実際の運用では基本的には発生しないのであまり直す必要もないのではと思います。
施設予約
00:00 | 01:00 | 02:00 | 03:00 | 04:00 | 05:00 | 06:00 | 07:00 | 08:00 | 09:00 | 10:00 | 11:00 | 12:00 | 13:00 | 14:00 | 15:00 | 16:00 | 17:00 | 18:00 | 19:00 | 20:00 | 21:00 | 22:00 | 23:00 |
アクセスカウンター
6
5
8
4
1
9
6