如何使日期完全显示在vuejs-datepicker中(z-index)

huangapple go评论86阅读模式
英文:

how to make the date appear completely in vuejs-datepicker (z-index)

问题

问题:日期选择器未完全显示(我认为是z-index问题),我必须向下滚动!

如何使日期完全显示在vuejs-datepicker中(z-index)

英文:

I have a vuejs-datepicke component in v-server-table component which is in collapse element

div.collapse > v-server-table.test-table > span > div.form-group > datepicker

<div :class="{ 'show' : (wheel.id == defaultOpenedWheel || searchKey !== null)}" class="collapse"
   data-parent="#accordion"
   role="tabpanel"
   v-bind:aria-labelledby="'heading-'+index" v-bind:id="'collapse-'+index">
<v-server-table :columns="columnCompetences"
   class="test-table"
   :options="options"
   :show-pagination="false"
   @loaded="onLoaded"
   v-bind:ref="'wheel_'+wheel.id"
   v-bind:url="'/api/competences?wheelId='+wheel.id+'&querySearch='+searchKey+'&memberId='+memberId">
<span slot="target_date" slot-scope="{row}">
   <span v-if="rowToShow !== 'row'+row.id">{{formDate(row.target_date)}}</span>
   <div class="form-group" v-if="rowToShow === 'row'+row.id">
      <datepicker :format="customDateFormat" :input-class="'form-control'"
         v-model="updateRow.target_date"></datepicker>
      <small class="form-text  text-danger"
         v-if="formErrors !== null && formErrors.target_date!==undefined"> {{formErrors.target_date[0]}} </small>
   </div>
</span>

the problem : the datepicker is not completely shown (z-index problem I thinks) and I must to scroll-down !

如何使日期完全显示在vuejs-datepicker中(z-index)

答案1

得分: 1

尝试将以下内容添加到您的作用域样式中:

<style scoped>
>>> .vdp-datepicker__calendar {
  position: fixed;
}
// 您的其他样式..
</style>

或者,如果您正在使用SCSS:

<style scoped lang="scss">
::v-deep .vdp-datepicker__calendar {
  position: fixed;
}
// 您的其他样式..
</style>
英文:

Try this to add this to your scoped styles:

&lt;style scoped &gt;
&gt;&gt;&gt; .vdp-datepicker__calendar {
  position: fixed;
}
// Your other styles..
 &lt;/style&gt;

Or if you are using SCSS:

&lt;style scoped lang=&quot;scss&quot;&gt;
::v-deep .vdp-datepicker__calendar {
  position: fixed;
}
// Your other styles..
&lt;/style&gt;

huangapple
  • 本文由 发表于 2020年1月6日 18:14:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/59610226.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定