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

Question

How do I do a responsive resize of my Webix UI control (the free version of https://webix.com/)? It is currently behaving erratically based on my AngularJS integration code.

I have tried media queries, redraw, bootstrap, but I cannot get my layout to go back to normal after a small resized screen shifts back to a large screen. The controls remain full width after enlarging screen and not small widths.

When small the screen is ok, but when zoomed out (large screen size) the elements do not go back to regular size (smaller than 100% of the screen).

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

Interval to Check Screen Resize

 $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 Method

.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 (does not resize the Webix control properly on resize)

@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

Modifying my media query to account for all elements inside my table cell except for the .webix_input_icon elements produced an acceptable result.

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