Why does "width and height properties" nothing ?

Webix JS
1

Hi

I’m doing the “Introduction to Webix” Tutorial.

The Code looks like this:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="codebase/webix.css" type="text/css" charset="utf-8">
        <script src="codebase/webix_debug.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/javascript" charset="utf-8">
                webix.ui({
                    id:"layout",
                    height:200,
                    width:300,
                    rows: [
                        { template:"Row 1"},
                        { template:"Row 2"}
                    ]
                });
        </script>
    </body> 
</html>

But the Layout always takes the whole available space instead of the given 200px height x 300px width.

Does anybody know what I do wrong ?

Kind regards
Alain

2

OK, meanwhile I understand.
This size within the Component is only like a minimum Size and not a fixed size (it’s not explained that clear in the Tutorial).
If the Window is bigger than that size, then the size takes the whole available space.

So why don’t you call it minheight and minwidth ?
Else it’s pretty confusing for a little stupid beginner as I am :wink:

Kind regards
Alain

3

Sorry, it still behaves very confusing:
The Window is bigger than the given Layout size and it take the whole available space.
I inserted a Resizer. and when I move this Resizer, then the Layout jumps to the given size.

Code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="codebase/webix.css" type="text/css" charset="utf-8">
        <script src="codebase/webix_debug.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/javascript" charset="utf-8">
                webix.ui({
                    id:"layout",
                    height:500, //it's not a fixed size, it's actually like a min value
                    width:1000, //it's not a fixed size, it's actually like a min value
                    type:"space",
                rows: [
                    { template:"Row 1"},
                    {view:"resizer"},
                    { cols:[ //2nd row
                        { template:"Column 1"}, 
                        { template:"Column 2"},
                        {view:"resizer"},
                        { template:"Column 3"} 
                    ]}  
                    ]
                });
        </script>
    </body> 
</html>

Any idea what I do wrong ?

Kind regards
Alain

4

hi Alain,

Your code is correct, but there’s a sizing/rendering issue in Webix 4.0: if the top view is attached to the body without any additional container, it will initially take all available space. The fix is almost ready.

An html-container will remove the problem: http://webix.com/snippet/db67a3b8