2

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 : Calendar not well displayed

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 :

console screenshot

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 ?

  • That inline styles is generated by system pragmatically, you should check the CSS which you have used might causing this issue specifically for IE browser. If using bootstrap framework, then this is the common issue which can be resolved by overriding some CSS. – Pradip R. Aug 1 '16 at 10:09
  • Thanks @PradipR. for your time, but i don't use bootstrap. And if the problem was the css used for the masterpage, this .css would override the inline styles, wouldn't it ? And it would affect the browsers too, right ? (i haven't seen any browserhack into our .css file..) – Gaelle Aug 2 '16 at 13:26
  • inline styles can only be overridden by !important only. So your .css would not override the inline styles. Link: stackoverflow.com/questions/11150684/… – Pradip R. Aug 3 '16 at 4:45
  • hello @PradipR., i already know and use that. But in fact, as I said, the problem is only on IE11. On FF, even if the inline style is set, it works. It seems to not be correctly interpreted by IE11 and that is odd... I don't know where is hould be looking at nor what i could do to solve this ... – Gaelle Aug 10 '16 at 13:40
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

enter image description here

  • thanks @harryB, unfortunately it is stored in the layout folder, which i have absolutely no access, and which, i'm quite sure is controlled by Microsoft for updates (it is Sharepoint Online so..) do you have any idea on the cause of the problem ? – Gaelle Aug 2 '16 at 13:19
  • I understand that the file is managed by MS but you asked for the "hidden code" that generated the calendar layout - this code generates the layout. It may help you understand the problem better - by setting a break point and observing the relevant elements. Also if you have added custom styles for these tags ( body ,#s4-workspace,#s4-bodyContainer ) then it is not a bad idea to have a play with them using the chrome dev tools to pin point the problem. Although you can't change the JS file in the layouts folder you have an option of overriding the methods with your own implementation. – HarryB Aug 2 '16 at 13:54
  • Thanks a lot @HarryB, but in fact, the inline code stays the same for IE11 or FF, but on FF it seems to be better interpreted. So I guess this bug comes from IE or something we set for IE... But i can't find out what/why nor how to solve it... – Gaelle Aug 10 '16 at 13:42
  • class .ms-acal-item uses absolute positioning and that results in the .ms-acal-item positioned relative to its first positioned (not static) ancestor element. try this in the console window with the calendar view loaded and check if any your custom styles are applied to any returned elements: $(".ms-acal-item").offsetParent();$("#WebpartWPQ2").offsetParent() – HarryB Aug 10 '16 at 14:20
  • Thanks a lot, I've tried. $(".ms-acal-item").offsetParent(); returned the div with the id "WebPartWPQ2". And there is no custom style. And the $("#WebpartWPQ2").offsetParent(); returned an empty object apparently. But thanks to your edit, i've seen that the s4-workspace width is customed with the window width... I don't know how to modify that but it will be a good point to start. I'll come back with some news later ! thanks ! – Gaelle Aug 11 '16 at 10:10
0

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 !

  • Congratulations and well done for solving it in the end :) – HarryB Aug 17 '16 at 14:09
-1

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

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.