Work at SourceForge, help us to make it a better place! We have an immediate need for a Support Technician in our San Francisco or Denver office.

Close

How to setWidth("10%") use z...

Developers
KienDX
2013-02-27
2013-03-08
  • KienDX
    KienDX
    2013-02-27

    Dear Community!
    I design form with Panel : north, west, east of main layout use zk webui.
    Source code:
    private Panel mainPanel = new Panel();
    private Borderlayout mainLayout = new Borderlayout();

    private Panel northPanel = new Panel();
    private Grid northLayout = GridFactory.newGridLayout();
    private Borderlayout NorthLayout = new Borderlayout();

    private Panel centerPanel = new Panel();
    private Grid centerLayout = GridFactory.newGridLayout();
    private Borderlayout CenterLayout = new Borderlayout();

    private Panel southPanel = new Panel();
    private Grid southLayout = GridFactory.newGridLayout();
    private Borderlayout SouthLayout = new Borderlayout();

    private Panel WestPanel = new Panel();
    private Grid WestLayout = GridFactory.newGridLayout();

    private Panel EastPanel = new Panel();
    private Grid EastLayout = GridFactory.newGridLayout();

    //main
    form.appendChild(mainPanel);
    mainPanel.setStyle("width: 100%; height: 100%; padding: 0; margin: 0");
    mainPanel.appendChild(mainLayout);
    mainLayout.setWidth("100%");
    mainLayout.setHeight("100%");

    //northPanel
    northPanel.appendChild(northLayout);
    northLayout.setWidth("100%");
    northLayout.setHeight("10%");// why not?

    North north = new North();
    mainLayout.appendChild(north);
    north.appendChild(northPanel);

    WestPanel.appendChild(WestLayout);
    WestLayout.setStyle("border: 0");
    WestLayout.setWidth("70%");// why not?
    WestLayout.setHeight("100%");

    West west = new West();
    mainLayout.appendChild(west);
    west.appendChild(WestPanel);

    EastPanel.appendChild(EastLayout);
    EastLayout.setStyle("border: 0");
    EastLayout.setWidth("30%");//why not?
    EastLayout.setHeight("100%");

    East east = new East();
    mainLayout.appendChild(east);
    east.appendChild(EastPanel);

    northLayout.setHeight("10%");// why not?
    WestLayout.setWidth("70%");// why not?
    EastLayout.setWidth("30%");//why not?
    When run on webui, screen not show with % config.
    How to setWidth("%") use zk webui?

     
  • Michael McKay
    Michael McKay
    2013-03-03

    Hi Kein,

    Check the ZK site documentation for the layout of the ZK panels.

    My understanding of the details is limited but I'd guess that the sizing defined by percents are in terms of the window size, not the panel.  The render will shrink the sizes to fit according to the order they are displayed in the HTML code.  Use firebug or something similar to look at the <div> structure of the panel as that will give you a good clue as to what is going on.  One of the panels is driving the sizing of the others.

    It may be that the sizing is determined by the center panel which you don't specify and which may be set to a large amount by default.  Try setting the center panel to 20% and see if that has an impact.

    Also try setting the size of north rather than NorthLayout.

    Try prevent adjustments, use absolute pixel sizes and see what happens.  These are generally respected.

    Hope this helps,

    Mike.