Oh I didn’t know that you wanted the feature in all pages - i thought it was only for a specific page. In that case you can do something like

document.addEventListener('pageinit', function(e) {
  var page = e.target;
  if (/* check whether there should be page scrolling functionality */) {
    var content = page.querySelector('.page__content');
    var horizontalScroll = page.querySelector(".horizontalScroll");
    var verticalScroll = page.querySelector(".verticalScroll");

    content.addEventListener("scroll", function(e) {
      horizontalScroll.innerHTML = "Scroll X: " + content.scrollLeft + "px";
      verticalScroll.innerHTML = "Scroll Y: " + content.scrollTop + "px";
    });
  }
});

Hint: you could use something like .onsen-sliding-menu__main to check for main content pages.

PS: My battery is dying so this is it for today.
PS2: I agree with @munsterlander - you should try to migrate to v2 - it’s much better

I don’t think that type of behaviour is currently officially supported. Since the tabbar is supposed to act as a container element having some part of the page going outside might cause some strange behaviour.

The current “normal way” of achieving what you want would be:

<ons-page>
 <ons-toolbar>
   <div id="tabbarTitle" class="center"></div>
 </ons-toolbar>
 <ons-tabbar>
   ...
 </ons-tabbar>
</ons-page>

and then changing tabbarTitle's content with javascript.

Alternatively the “css hack” way would be something like this (codepen):

.tab-bar--material {
  top: 51px;
}
.tab-bar--top__content {
  top: 0;
}
.tab-bar--material__content .navigation-bar--material ~ .page__content {
  top: 102px;
}

@mailpravink there might be easy way to do it (like in some way e.preventDefault()), so you could try listening for some focus-like events, but since the behaviour may be somwhat platform dependent (I remember there being some platform inconsistencies) it may not work out of the box. I could be wrong but you could still try that. If it works then everything is perfect.

A somewhat related topic can also be found here.

So maybe there are plugins which may help, otherwise a hacky way would be trying to focus it again, but it may not work very well either.

And a final option would be thinking if you really need the feature - I think skype and most other chat apps do hide their keyboard when the user focuses out. On some phones the keyboard takes almost the whole screen (especially in landscape), so you should probably still give the user at least some way to hide it imo.

Sorry if my answer wasn’t very helpful. I hope you find a solution - if you do feel free to share it here again Good luck!

Btw I may be wrong but I think with the last release it’s more like instead of having custom methods for Angular 2 you can access the core methods and they still work.

So something like

this._navigator.element.pushPage(KeyEnterUPC, {animation: 'none', data: {key: 'value'}});

You can find all the methods of the core navigator in the js reference here

@munsterlander It became a simple boolean property of the switch - it’s not a function anymore. Demo (^_^)

document.getElementById('switchID').checked = (switchVar === 'true');

This should do it. If it doesn’t work it may be some sort of timing issue.

@iqmeta Great! Good job! (^_^)

@gentle-ben ons-row and ons-col are useful mostly when you want a table-like layout.

If you would like to have just some text at the bottom like copyrights or something small I would suggest trying out the ons-bottom-toolbar component - it does exactly that (docs). You may need to add some css like

ons-bottom-toolbar { text-align: center; }

but that’s pretty much it. Here’s a demo.

You can probably get a similar result if you specify the row heights or something similar, but I think the bottom toolbar is much simpler.

@Pablo-Emilio I thought you had mentioned you were using react, but whatever

I think we may be currently able to reproduce the issue it would help if you could provide some sort of project / minimum example which can be tested, so we can confirm it and fix it.

Also maybe something along the way wasn’t updated properly - you could try making a fresh project and test whether the problem still exists.

Hey, I’m guessing you tried calling .focus(). What do you mean by “the UI does not update” - are you expecting some change from Onsen or only that the keyboard didn’t show?

I tried these things, so I don’t know about the iOS settings. this cordova plugin seems to be doing some things with the keyboard but it looks like the show method is not available for iOS.

A further search showed me this page, but this is completely random, so maybe try it and lets hope it works.

Maybe some of the other members of he community have a better idea about these things.

I’m glad you managed to solve the issue.

When you specify the delegate it must be an object and it should contain at least the countItems and configureItemScope methods.

You seem to have already found your solution, in my opinion that is probably the best one out there.

Alternatives may include things like loading the page with the lazy repeat only after you receive the data or calling it from configureItemScope but in a smart way.

In general if you’re using lazy repeat it makes sense only when the number of items is around 1000+, in which case maybe you could get them from the server in chunks rather than all of them from the beginning.

Also if you’ve already gotten something from the server you should remember it rather than making another request for it.

So you could do something like

var chunks = [];
var chunkSize = 1000;
var wordCount = chunkSize;

dbService.getChunkFromDB(0).then(function(chunk){
    chunks[0] = chunk;
});

dbService.getWordCount().then(function(count){
    wordCount = count;
});

function configureItem(src, dest) {
    dest.wordFrom = src.wsource;
    dest.wordTo = src.wtranslation;
}

offw.delegate = {
    configureItemScope: function(index, itemScope) {
        var i = Math.floor(index / chunkSize);
        var j = index % chunkSize;

        if (i > chunks.length) {
            dbService.getChunkFromDB(i).then(function(chunk){
                chunks[i] = chunk;
                configureItem(chunks[i].item(j), itemScope);
            });
        } else {
            configureItem(chunks[i].item(j), itemScope);
        }
    },
    countItems: function() {
        return wordCount;
    }
};

But you can see that these things look a little ugly and need changes to the server/dbService, so maybe you try out things like these only at a later point and only if you think that it’s necessary.
It all depends on the amount of data which you’re working with.

Anyway for now I think what you have should be enough. Just don’t forget to unindent properly