Webix UI - 无法在屏幕调整大小时生成响应式调整大小的组件

Question

如何响应式调整我的 Webix UI 控件（https://webix.com/ 的免费版本）？根据我的 AngularJS 集成代码，它目前表现不正常。

我已经尝试过媒体查询、重绘、bootstrap，但是在调整大小的小屏幕变回大屏幕后，我无法让我的布局恢复正常。控件在放大屏幕后保持全宽，而不是小宽度。

小屏幕时没问题，但缩小（大屏幕尺寸）时，元素不会恢复到正常尺寸（小于屏幕的 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();
                              });     

                        }
                  }
        });

媒体查询（在调整大小时未正确调整 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;
    }  
}

Answer 1

修改我的媒体查询以考虑我的 table 单元格中除 .webix_input_icon 元素之外的所有元素产生了 acceptable 结果。

@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;
}  
}

Webix UI - 无法在屏幕调整大小时生成响应式调整大小的组件

Webix UI - Unable to produce responsive resized component on screen resize

html

css

angularjs

webix

responsive