Webix UI - Невозможно создать отзывчивый компонент с измененным размером при изменении размера экрана - PullRequest
Новая
       125

Webix UI - Невозможно создать отзывчивый компонент с измененным размером при изменении размера экрана

0 голосов
/ 02 мая 2019

Как мне выполнить адаптивное изменение размера моего элемента управления пользовательским интерфейсом Webix (бесплатная версия https://webix.com/)? В настоящее время он работает некорректно на основе моего кода интеграции AngularJS.

Я пробовал медиазапросы,перерисовать, загрузиться, но я не могу вернуть свой макет в нормальное состояние после того, как небольшой экран с измененным размером переходит обратно на большой экран. Элементы управления остаются полной ширины после увеличения экрана, а не маленькой ширины.

Когда экран маленькийЭто нормально, но при уменьшении (большой размер экрана) элементы не возвращаются к обычному размеру (меньше, чем 100% экрана).

https://docs.webix.com/api__link__ui.layout_resize.html

Интервал проверки размера экрана 

 $scope.devicePixelRatio = window.devicePixelRatio;
        $scope.adjustContentWidth = function(){
           $scope.interval = $interval(function(){
                if (window.devicePixelRatio != $scope.devicePixelRatio){
                    $scope.devicePixelRatio = window.devicePixelRatio;
                    $scope.formcontainer.resize();
                }  
            },0)
        }

Метод директивы 

.directive('initData', function(){                     
                  return {
                        restrict: 'E',
                        link: function (scope, element, attrs) {
                              scope.init().then(function(){

                                scope.userConfig = {
                                    view:"richselect",
                                    //label:"Choose", 
                                    value:1, 
                                    options:scope.users
                                }

                                webix.ready(function(){
                                    scope.formcontainer = webix.ui({
                                      container:"formcontainer",
                                      id:"createform"
                                    })
                                });

                                scope.adjustContentWidth();
                              });     

                        }
                  }
        });

Media Query (неправильно изменяет размер элемента управления Webix наизменить размер) 

@media only screen and (max-width: 800px) {

    /* Force table to not be like tables anymore */    
    table:not(.grid),
    table:not(.grid) thead,
    table:not(.grid) tbody,
    table:not(.grid) tr,
    table:not(.grid) th,
    table:not(.grid) td
    {
        display: block !important;
        width: 100% !important;
    }


    table#details tr:not(:first-child) td.label
    {
        height: 23px !important;
    }


    .webix_inp_static{ 
            width: 100% !important;
    }  
}

1 Ответ

0 голосов
/ 02 мая 2019

Изменение моего медиазапроса для учета всех элементов внутри ячейки таблицы, за исключением элементов .webix_input_icon, дало приемлемый результат. 

@media only screen and (max-width: 700px) {

/* Force table to not be like tables anymore */    
table:not(.grid),
table:not(.grid) thead,
table:not(.grid) tbody,
table:not(.grid) tr,
table:not(.grid) th,
table:not(.grid) td,
table:not(.grid) td *:not(.webix_input_icon)
{
    display: block !important;
    width: 100% !important; 
}

table#details tr:not(:first-child) td.label
{
    height: 23px !important;
}  
}
...