Example when context is not used, the picker is opened inside the IFRAME, and not positioned at the bottom of the viewport:
When context (Forms documentation for React | Mobiscroll) is used, it partially worked, but has some issues. Code is below, targetting the parent frame/window from within the IFRAME.
mobiscroll().temperature({
units: ['f'],
context: (u.isDefined(window.top.document.body))?window.top.document.body:document.body,
buttons:[],
responsive: {
small: {
display: 'bottom'
},
medium: {
display: 'bubble'
},
large: {
display: 'bubble'
}
}
});
When I click in the Temperature field, the picker opens below the fold, and I need to scroll down to access it:
It seems to work ok once I scroll down. But I guess it is miscalculating the parent viewport height? Is this use-case feasible? Having mobi-scroll components inside of an IFRAME/FRAME but loading the picker in the parent frame? It seems to work for the most part, but the picker placement is not correct. There may be other issues as I have not done much testing yet.