I added some code to verticaly align to bottom some td element (fullcalendar event) inside a table. Here is my original post. I added the necessary code from the answers given and everything aligned at the bottom. Now I want another element (multiple event link) to align to the bottom as well, but in the develoer tools it's showing a line through the css and it's still aligned in the middle. What I would like is the eventLimit (class=fc-more-cell) in the day cell to be aligned on the bottom of the day, just like a single event is aligned at the bottom. Picture posted below. Here is my fiddle link
$(document).ready(function() {
// page is now ready, initialize the calendar...
var eventsArray = [
{
title: 'Test1',
start: new Date()
},
{
title: 'Test2',
start: new Date("2015-04-21")
},
{
title: 'Test3',
start: new Date("2015-04-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,
eventLimit: 1
})
});
.fc-event {
border-radius: 0;
}
.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;
}
.fc-more-cell {
vertical-align: bottom;
}
a.fc-more {
position: relative;
display: block;
font-size: 0.85em;
line-height: 1.3;
border-radius: 3px;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: normal;
color: #fff;
border-radius: 0;
}
<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>
Here is what the element looks like in dev tools. You can see that .fc-more-cell has it's contents with a line through it.
The line through the CSS property in the developer tools means that setting was overridden. You can see that vertical-align: top
is set with more specific CSS a few lines above. To fix that, your fc-more-cell
selector needs to more specifically identify the element. Adding the td
works in my testing:
td.fc-more-cell {
vertical-align: bottom;
}
CSS, as in Cascading Style Sheets, applies properties based on the specificity of the CSS selector. More specific = more important.
Another thing - that specific element gets a rowspan="1"
in the HTML. If you want it to be truly on the bottom of the day, that needs to be set to rowspan="2"
. That looks to be set by the library you are using. Unless it can be configured within that library, you will have to set that with JavaScript at the bottom of your document.ready block:
$('td.fc-more-cell').attr('rowspan', 2);
Working fiddle: https://jsfiddle.net/4v65ggos/25/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments