Table inside carousel does not resize when window is maximized

Webix JS
1

Hi,

I have table inside carousel, when user resizes web browser window everything resized correctly, however when user maximizes web browser window table is not adjusted. see snippet http://webix.com/snippet/9ca91739
Open snippet NOT* in maximized web browser window, then maximize it.

Thank you.

2

Hi,

You have put “datatable” into “template” view. In this case, the datatable won’t be resized automatically.

The structure can be as in:

{
    cols:[
           { /* left panel definition */},
           {
                  rows:[
                         {/* toolbar definition */},
                         { view: "datatable", ....},
                         { /*footer definition*/}
                  ]
           }
    ]
}
3

Hi,
I do not understand what you are saying.
I use template in carousel’s item because template contains html that is compiled by angularjs. So I do not understand how your answer has to do with my snippet.
Please change my snippet to show the solution.

Thank you.

4

Hi,

datatable must be a defined as layout row/col if you want that the datatable will be adjusted to layout size automatically. You are already using this approach for carousel and dataview views in “carouselConfig”.

If you initialize the datatable inside custom html container, you will need use custom code to adjust sizes.

5

Hi,
datatable is inside custom html container and div those have style set width and height to 100%. so no custom code is needed as far as I understand.
Also if you resize browser window then everything works, when maximized it does not.
If what you are saying is correct resize should not work no matter how resizing is done…

6

Hi,

Datatable does not listen to changing sizes of its parent container, unless the datatable is a row/column of full-screen layout.

So, if you do not plan to initialize datatable the way I recommended, you will need to use a custom code to set datatable sizes.

7

Maria,
using my example, please show me how you want me to do it.
Why when I resize browser’s window size is adjusted but when I maximize browser’s window
it does not?
If what you are saying is correct resize should not work no matter how resizing is done.
Please explain.

Thank you.

8

Hi,

using my example, please show me how you want me to do it.

The same approach as you are using in carouselConfig: all webix views are rows or columns of a ceratain layout.

Why when I resize browser’s window size is adjusted but when I maximize browser’s window it does not?

You may try to call adjustSize function with delay in your resize event listener:

webix.delay(function(){adjustSize();});