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 ?

Improve this question
4
  • 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, 2016 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, 2016 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, 2016 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, 2016 at 13:40

3 Answers 3

Reset to default
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

Improve this answer
6
  • 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, 2016 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, 2016 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, 2016 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, 2016 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, 2016 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 !

Improve this answer
1
  • Congratulations and well done for solving it in the end :)
    – HarryB
    Aug 17, 2016 at 14:09
-1

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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