Sharepoint Online : How are the calendar items' styles generated?

Question

What I have :

We had set up a SharePoint online site for a customer. So, we developed a custom master page and some custom styles.

But we never touched the calendar page, nor the task list.

So, they are standard.

What is the problem :

But, last week, our customer told us that the items are offbeat of like 3-5 px. Here is how it looks now :

So, as you can see, every item is offbeat to the right and there are two scrollbars.

I've tested it on IE 11, FF 47.0 and Chrome 51.0 and the problem only appears on IE 11.

What I searched :

When I look on the F12 console, there are inline style set to every item. and that is on that inline styles that the left position is fixed. I'll attach you this console image :

What I would like to find :

So, to avoid this, I need to know where is hidden the code that generates the calendar view.

Do you have any idea ?

Answer 1

Finally found it ! It was in a custom .css used for system pages ! A display:block was set to the contentBox table . I've commented it, and it solved our bug ! Strange behavior from sharepoint on only that calendar .... and which happens like 4 months after we set it !

But it is resolved !

Thanks again to @HarryB and @Pradip R. for their time, pedagogy and kindness !

Answer 2

https://static.sharepointonline.com/bld/_layouts/15/16.0.5521.1207/sp.ui.applicationpages.calendar.js

This script updates the inline styles using the following function

applyLayout: function(b, a) {
        ULSvSp: ;if (isNaN(a.$s_0 + a.$f_0 + a.$V_0 + a.$o_0))
            b.style.display = "none";
        else {
            b.style.top = a.$s_0 + "px";
            b.style.left = a.$f_0 + "px";
            b.style.width = a.$V_0 + "px";
            b.style.height = a.$o_0 + "px"
        }
    }

I can replicate your issue by changing my s4-workspace width

Answer 3

Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.

In IE11 - Run in enterprise mode. Fixes the calendar.