背景
サーバーレスで自分用の家計簿的なwebサービスを勉強も兼ねて開発中。前の投稿 で編集ダイアログの開発が終わった。が、問題発覚。
問題
自分のPCで開発している時には何の問題もなし（ちょっとデザイン改善したいけど）。
が、デプロイして、自分のモバイルで見た時に問題発覚。デザインだだ崩れ。
データの編集自体は出来る。が、自分が使うだけという条件を加味してもこの崩れは許容しがたい。ポイントは２つ。
- ボタンが2列になってる。
- 日付入力の幅が変
対策開始
- 日々の入力、更新はモバイルになる予定(将来PCメインで使用する色々分析画面付けるかもしれないが)。
- モバイルに合わせるとPC側が寂しいのでデバイスによって分けたい。
- 理想的にはPC用とモバイル用で別ページ作ってしまう事。
- 操作性までPC用とモバイル用で分ける程の画面ではない。
という事を考えていたら、レスポンシブWEBデザイン、メディアクエリという技術を知る。デバイスの種類、画面幅によってcssなどを切り替えられるらしい。
変更ポイント探り
画面サイズによって切り替えるとしても、コンポーネントで指定されている値を修正するので、その上書きポイントを探る。ChromeだとF12の開発者モード。
開発者モードのエリアの左上にあるボタンでモバイル表示モード。画面上部でサイズ指定。モバイルボタン横にある要素指定モードにしてからダイアログのDOM要素を探し、そのデザインcssを右エリアで確認。
index.css にて、 el-dialog クラスにwidth:50% が指定されているのが原因。
同様に、日付入力コンポーネントの幅指定をしているものを探す。
index.css にて、.el-date-editor.el-input, .el-date-editor.el-input__innerに、 **width: 220px;**が指定してあるのが原因。
モバイルの場合、ダイアログ幅は280px程度、その状態で、日付入力が160px程度がよさそう。切り替えは、画面サイズ640px以下としようと思います。
実装
style scopedタグ配下に書けば行けるかと思ったけど、どうも他コンポーネントを直接指定するのは出来ないっぽい。多分コンパイル対象から外れる。しかも、el-dialogは、DOM構成がtemplateと実際とで変わる様子。とはいえグローバルのcssで指定するのは避けたい。色々調べてみたら、どうやら**>>> コンビネータ**を使うとよいらしい。ネストダイアログも無いので大丈夫そう。
ダイアログTemplateの一番外のタグにclass属性追加。
<template>
<el-dialog title="入力" :visible.sync="slipDialogVisible" class="slipinputdlg">
<!-- 中略 -->
</el-dialog>
</template>
そのクラスの配下、という形で指定。**<style scoped>**タグ配下で、以下指定。
@media (max-width:640px) {
.slipinputdlg >>> .el-dialog {
width: 280px;
}
.slipinputdlg >>> .el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 160px;
}
}
参考ページ
Vue Componentのstyleを上書きするには
スコープ付き CSS
結果
直りました！ちゃんとこのダイアログ中のel-dialogクラスだけ幅指定されるようになってますね。
感想
- このダイアログに限らないが、ちょっと複雑な事をしようとすると、 javascriptとか html とか css とかの webページ基本知識が必要になってくる（と思う）。
- Element.uiはモバイルの画面幅は考慮されてなさそう。とはいっても、下手に考慮しようとしてもかえってカオスになるか・・