実現したいこと
- vuejs-datepickerを使用して、フォームをクリックするとカレンダーが表示され、カレンダーから選択した日付をフォームにセットしています。(デフォルトの挙動)
- デフォルトでは、フォームをクリックしたとき表示されるカレンダーは、フォームの下側ですが、
フォームがブラウザの下の方に存在する場合は、フォームの上側にカレンダーを表示
したいです。
前提
- サーバサイドから取得した一覧データのリストを<table>に表示し、特定の項目を更新できるようにしています。
- ページングは行っておらず、<table>は「overflow:scroll」でスクロールして参照するようになっています。
- したがって、ブラウザ上、上のほうの行は、フォームの下側にカレンダーが表示され必要があり、下の方の行はフォームの上側にカレンダーが表示される必要があります。
発生している問題
- その要素がブラウザ上、どの高さに存在しているのかを取得する方法が分かりません。
該当のソースコード
vue
1<template> 2 <div> 3 <table class="scroll-table"> 4 <thead> 5 /*ヘッダ設定(略)*/ 6 </thead> 7 <tbody> 8 <tr v-for="result in results" :key='result.id'> 9 <td v-for="(value, key) in columns" :key="key"> 10 <!--中略--> 11 <!--他にも属性は色々指定していますが、省略。calendarClassにcalendar-upクラスを付与すると上側に表示はされます--> 12 <input-datepicker :value="result[key]" @input="result[key]=$event; :calendarClass="{ 'calendar-up' : true }"/> 13 <!--中略--> 14 </td> 15 </tr> 16 </tbody> 17 </table> 18 </div> 19</template> 20<script> 21import InputDatepicker from 'vuejs-datepicker' 22export default { 23 components: { 24 InputDatepicker 25 }, 26 data() { 27 retun { 28 results: [],/*データ省略*/ 29 colums: []/*データ省略*/ 30 } 31 } 32} 33</script>
css
1.calendar-up { 2 top: -282px; 3}
補足情報
- :calendarClass="{ 'calendar-up' : true }"の
true
の部分を、要素のY位置 > 1000
とかにできれば、下の方のフォームだけcalendar-upクラスが適用されるのではないかと考えています。
よろしくお願いいたします。
あなたの回答
tips
プレビュー