VueでWEBアプリ(26) 送信ボタンとアラートを綺麗に並べたい

前回、次は削除機能をやると書きましたが、ちょっと予定変更して、送信ボタン横の

「送信成功」「送信失敗」表示の調整をしました。

以前から、アラート表示でv-cardがにゅっと伸びる＋アラートを消した後v-cardがガクっと戻る　のが気になっていたので…。

完全には解決しませんでしたが、マシにはできたので記事にしておきます。

あとどうでもいいことではあるのですが、この記事を書いているときに、Ctrl ＋Vで画像が貼れることに気づきました。

今までずっとわざわざ画像を保存してから選択して貼り付けていました…。

修正前は、送信ボタンを押すと

投稿フォームのv-cardが伸びて、しかも送信ボタンと微妙に高さがズレて表示されていました。

なので、まずはv-cardの高さを480pxで固定にしました。

そしてそれだけではアラートと送信ボタンのズレは直せないので、

アラートのmarginとpaddingを調整しました。

padding　の　0px,8px　とは、送信ボタンと合わせたものです。

.alart {
  margin: 0px;
  padding: 0px,8px;
}

これでもわずかに、アラートを消したとき送信ボタンがズレてしまうのですが、初めよりは微妙な変化となったので、改善はできたということで今回はこれでよいことにします。

ところで今回動きの確認のために投稿フォームを何度も触っていると、

日付欄で入力用カレンダーの上に入力履歴が重なってしまい日付が入れられないということが発生したので、こちらも修正しようと思います。

この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。

最新記事