質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

Q&A

解決済

1回答

6243閲覧

【CSS】vue-js-modalにて画面サイズに応じて横幅・縦幅を調整したい

TMTN

総合スコア53

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

0グッド

0クリップ

投稿2021/06/10 11:55

編集2021/06/10 12:45

#vue-js-modalにて画面サイズに応じて横幅・縦幅を調整したい

Vue.jsで簡単にモーダルが実装できる「vue-js-modal」
を参考に実装しております。

モーダル内の自身でclassを付けたものはもちろんCSSは適用されるので変更できますが、
vue-js-modalにて用意されたclassはスコープ内でCSSが適用されない為、
どのようにして画面サイズに応じてスタイルを変更させたらいいのか分からない状況です。

<modal class="modal-inner" v-scroll-lock="open" name="post" :width="750" :height="550">

上記のようにライブラリにて用意されているmodalというコンポーネントに対して
:width="750" :height="550"とサイズを指定してあげる仕組みとなってます。

この場合、画面サイズに応じてサイズを変更させる為には、どのようにしてあげたら良いのでしょうか・・

画面サイズに応じたサイズを新たに作ってあげないといけないのでしょうか。

分かる方いらっしゃいましたらお力添えを頂きたいです。

よろしくお願いいたします。

#post.vue

<template> <div class="post-content"> <button @click=" show(); openModal(); " class="post-comment flex"> <img class="comment-icon" src="../assets/コメント.jpg" alt="コメント" /> </button> <modal class="modal-inner" v-scroll-lock="open" name="post" :width="750" :height="550"> <div data-modal="post" aria-expanded="true" class="vm--overlay" styles="background: rgba(255, 255, 255, 0.1);" > <div class="vm--top-right-slot"></div> </div> <div class="modal-header flex"> <h2 class="post-title flex">Cinemaryを投稿する</h2> <hr class="separate" /> </div> <div class="modal-body"> <div class="post-items flex"> <div class="post-contens flex"> <input type="text" class="post-item" maxlength="50" placeholder="タイトル" v-model="title" /> </div> <div class="post-contens flex"> <textarea-autosize name="text" rows="1" v-model="description" placeholder="内容" maxlength="50" :min-height="70" :max-height="70" ></textarea-autosize> </div> <div class="post-contens flex"> <select v-model="genre" class="post-select" :style="{ color: genre == '' ? 'gray' : 'white' }" > <option class="post-item" value hidden>ジャンルを選択</option> <option v-for="genre in genres" :value="genre.name" :key="genre.id" class="post-item" style="color: white;" >{{ genre.name }}</option> </select> </div> <button class="post-btn" @click.prevent="postItem">投稿</button> <button class="hide-btn flex" @click=" hide(); closeModal(); " >×</button> </div> </div> </modal> </div> </template>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

シンプルに以下のように画面サイズに合わせて600px用のモーダルを作成し、表示・非表示させるようにしました。

<modal class="modal-inner modal-sp" v-scroll-lock="open" name="post" :width="500" :height="500"> <div data-modal="post" aria-expanded="true" class="vm--overlay" styles="background: rgba(255, 255, 255, 0.1);" > <div class="vm--top-right-slot"></div> </div> <div class="modal-header flex"> <h2 class="post-title flex">Cinemaryを投稿する</h2> <hr class="separate" /> </div> <div class="modal-body"> <div class="post-items flex"> <div class="post-contens flex"> <input type="text" class="post-item" maxlength="50" placeholder="タイトル" v-model="title" /> </div> <div class="post-contens flex"> <textarea-autosize name="text" rows="1" v-model="description" placeholder="内容" maxlength="50" :min-height="70" :max-height="70" ></textarea-autosize> </div> <div class="post-contens flex"> <select v-model="genre" class="post-select" :style="{ color: genre == '' ? 'gray' : 'white' }" > <option class="post-item" value hidden>ジャンルを選択</option> <option v-for="genre in genres" :value="genre.name" :key="genre.id" class="post-item" style="color: white;" >{{ genre.name }}</option> </select> </div> <button class="post-btn" @click.prevent="postItem">投稿</button> <button class="hide-btn flex" @click=" hide(); closeModal(); " >×</button> </div> </div> </modal>
.modal-sp { @include pc { display: none; } @include tab { display: none; } @include sp { display: flex; } }

投稿2021/06/10 14:43

TMTN

総合スコア53

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問