Lacking a Basic Understanding? Styling loss and getInst()

I seem to have missed a basic process in using this library:

  1. what is the getInst() function actually used for? I copied the CRUD example code for the schedule and it uses the getInst on the HTML elements and is returning null when the element is clearly available and can be seem in the DOM and is accessible in the code.
  2. I am creating a popup, and it appears just fine, but has no styling applied? I noticed for form objects you have to do some refresh function, do you need to do the same to any mobiscroll component that is then made to appear from display:none?

The docs are absolutely no help, it’s not even mentioned and the entry for getInst is minimal.

I am using Typescript and the javascript library, version 5.

Hi there,

  1. With the getInst function you can get access to the instance of the specific element. It’s useful when you want to change an option dynamically. Please make sure that the element is initialized before calling the getInst method.
  2. There’s no need for any other extra methods for the popup component to display correctly. Could you please check if the styling of the popup is included to your package?

If the issues still persist, could you please share the relevant code so we can reproduce the problem?

Thanks for the reply.
I have been playing around with things a bit.

I use Typescript almost exclusively and use the Javascript complete package.

I have discovered if I use the NPM and use imports:

  1. the styling doesn’t occur for dynamic components or popups
  2. the getInst imported method produces a null result

In terms of element initialisation, I was copying the code from the Add/Update/Delete for the Scheduler, and the getInst calls were in the code on simple html elements for setting some of the values. I don’t see that any other initialisation is occurring for these simple components.

The styling is working just fine for the datepicker and calendar and I don’t change the theme for the popup, it just doesn’t show up right.

A quick work around, including the css and js in the header of the html has corrected most of the problems (of course now I can’t type check the Typescript code…) though the example popup looks…odd, with mismatched sizes, toggle button background not fitting properly, “slider button” for free/busy looks very odd.

edit

Ok, fixed the styling problem.

I was following the advice on the site for using version 4 and 5 simultaneously (I was using the nav from 4).

As soon as I ripped version 4 out, it looks normal.