Combining V4 with V5 causing all kinds of problems

Website, docs & demos
1

I followed the instructions here: http://help.mobiscroll.com/en/articles/4656790-using-mobiscroll-v4-alongside-v5#jquery to try to use both Mobiscroll 4 and 5 but I had to undo my code because it caused a lot of problems.

  1. The datepicker calendar was no longer popping up in the middle of the screen, but instead in the top left.
  2. The datepicker calendar was only showing the next couple of months. All subsequent months were blank.
  3. Some of my button styles changed (on Windows), but not all of them so I couldn’t figure out why some changed but not all.
  4. My popup was now too small to fit all the text horizontally. It was just getting cut off.
  5. The button for my picture upload was rendering at the very top of the page instead of below the image where it belongs.

I don’t know if the problems are simply with V5 or with the fact that I’m combining the two versions.

2

Hi Vincent,

Could you please share more details on this?
For every problem please specify the version of the component you’re using, send the related code, and if relevant, attach screenshots illustrating the issue.

3

So I’ve tried a few different things now but even when I try to use the version of Mobiscroll that I’ve been using all along, some things get messed up. So in your example you saved version 4 as $.fn.mobiscroll4 so that simply “mobiscroll” would be using version 5. I wanted to turn that around and use version 4 as my default so I saved a copy of version 5 instead.

I figure with this change alone, all my mobiscroll code should still be pointing to the same mobiscroll V4 files that I’ve been using all along without any problem. I wanted to make sure this doesn’t break anything before I even attempt to use any V5 controls.

In other words, this is what I had before:

  <link href="plugins/mobiscroll/css/mobiscroll.jquery.min.css" rel="stylesheet">
  <script src="plugins/mobiscroll/js/mobiscroll.jquery.min.js"></script>

And this is what I have now:

  <script src="plugins/mobiscroll5/js/mobiscroll.jquery.min.js"></script>
  <script>
    // Save mobiscroll 5 object before loading v4
    $.fn.mobiscroll5 = $.fn.mobiscroll;
  </script>

  <link href="plugins/mobiscroll/css/mobiscroll.jquery.min.css" rel="stylesheet">
  <script src="plugins/mobiscroll/js/mobiscroll.jquery.min.js"></script>

I just added a reference to V5 and saved it as mobiscroll5. Notice I haven’t even included the V5 css file yet because I just wanted to get to a point where nothing is broken. And if I do it this way, the datepicker seems to be behaving itself so that’s good, however I’m still having problems with my button styles.

I do have some custom css to override some of the mobiscroll styles because I wanted rounded corners and a user defined colour, so this is what my buttons looked like before I added V5:

original

After adding V5 the buttons (on Windows) now have a black border and the padding seems to be reduced, which I don’t really understand because I haven’t added the V5 css file yet.

new

But what really gets me is that when I hover over the button the style changes completely and it never goes back to my original style.

hover

Why is it doing that?

4

The version of mobiscroll I’m using is 4.10.6

5

Thanks for the details!
The choice to use mobiscroll for v4 and mobiscroll5 for v5 is fine, and your code seems to be correct.

The problem is the form elements. As you know, in jQuery the form elements, like buttons and inputs are auto-initialized, in v4 and v5 as well. If you include the forms in both v4 and v5 packages, both will init the form elements, resulting in a conflict.

The solution to the problem, and a general best practice is to not to include the same components in the v4 and v5 packages. E.g. if you only wish to use the Eventcalendar from v5, make sure to download v5 with only the Eventcalendar included, and download v4 without the Eventcalendar.

6

Thank you. That makes sense. I’ll try that today.