我正在尝试将我的fullcalendar.io事件显示在当天的底部,而不是在中间。我一直在尝试将不同的元素修改为vertical-align:“bottom”但似乎没有任何效果。这是指向fiddle的链接,该链接具有不同的css重载调用,用于将日历事件的垂直对齐设置为底部。目前事件发生在当天的中间,我希望它在单元格的底部。
$(document).ready(function() {
// page is now ready, initialize the calendar...
var eventsArray = [
{
title: 'Test1',
start: new Date()
},
{
title: 'Test2',
start: new Date(2015, 4, 21)
}
];
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'prev,next', //today',
center: 'title',
right: ''
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
events: eventsArray
})
});
//all the different things I've tried!!!!!!!
tbody {
vertical-align: bottom;
}
tr td.fc-event-container {
vertical-align: bottom;
}
td.fc-event-container {
vertical-align: bottom;
}
td {
vertical-align: bottom;
}
.fc-event-container {
vertical-align: bottom;
}
tr {
vertical-align: bottom;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script>
<div style="border:solid 2px red;">
<div id='calendar'></div>
</div>
我检查了Chrome浏览器窗口中的元素,我不确定哪个元素需要垂直对齐集。
这是Chrome中元素的图片。
答案 0 :(得分:2)
包含该表的元素由其内容保持打开状态。您的垂直对齐方式正在运行,但该元素仅与其内容一样高。只需确保容器100%高:
.fc-content-skeleton,
.fc-content-skeleton table {height:100%;}
答案 1 :(得分:2)
两个问题:
1)含有元素不是&#34;细胞的100%&#34;高度(由第二个&#34;骨架&#34;表设置)
2)vertical-align
被覆盖,因此我们需要提高特异性
这里是将高度设置为100%的CSS:
.fc-row .fc-content-skeleton {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fc-content-skeleton table {
height: 100%
}
最后,提高特异性:
.fc-content-skeleton .fc-event-container {
vertical-align: bottom;
}
(或者,我们可以添加!important
)
答案 2 :(得分:0)
您可以为表格元素设置固定高度。
.fc-row table{
height:72px;
}
如果您正在处理的网站响应,这会很有效。
确保对两个元素,表格及其容器应用高度:100%。
.fc-content-skeleton,.fc-content-skeleton table{
height:100%;
}
答案 3 :(得分:0)
您需要为fc-content-skeleton
设置与fc-bg
相同的高度(您可以将其设置为64px
作为后台尝试)。 fc-content-skeleton
(或height: 100%
)内的表格相同。
然后fc-event-container
可以使用您想要使用的vertical-align: bottom
。
要使用此属性,父级必须具有非自动高度。