mobile layout - разметка на мобильных браузерах

Webix JS
1

Подскажите, как создавать структуру страницы, чтобы на мобильных браузерах был скроллинг экрана, если все элементы не умещаются и - особенно - если открылась клавиатура для ввода?

Создавая стандартно через rows, как описано во введении http://webix.com/quick-start/introduction.ru.html#!/2, на странице скролллинга нет. scrollview как главный элемент не помогает… Создавать html-контейнер не хочу, разметка должна быть резиновая.

2

Да, есть два варианта:

  1. html-контейнер. В этому случае надо вызывать adjust() для layout по window resize

http://webix.com/snippet/096199ca

    • Scrollview:
      http://webix.com/snippet/fa7912c9
      Тут случае с Datatable могут быть проблемы, так как в текущей версии datatable перехватывает скролл событие независимого от того, есть у него вертикальный скрлл или нет - эта проблема будет поправлена в следующей версии
3

Мария, да, первый вариант работает.
А как сделать так, чтобы экран на мобильном устройстве скроллился вверх до элемента, в котором начинается ввод? Чтобы клавиатура его не загораживала?
Например, jQuery Mobile это срабатывает по умолчанию.

4

Обычно браузеры мобильных устройств показывают input элементы в фокусе. Но если возникла проблема, и необходимо изменить положение скролла, вы можете изменить состояние скролла страницы.
Webix вызывает событие onFocusChange, когда изменяется активное view. А в обработчике вы уже можете использовать свои решения, чтобы установить скролл. Например, вот так:

webix.attachEvent("onFocusChange", function(newView, oldView){
     if(newView.focus && webix.env.touch){
            var node = newView.$view;
    	    var position = webix.html.offset(node);
            document.body.scrollTop = position.y;    
     }
});