1. #1
    Ext User
    Join Date
    Dec 2009
    Posts
    12
    Vote Rating
    0
    emka is on a distinguished road

      0  

    Question LayoutContainer heigth 100% of free space

    LayoutContainer heigth 100% of free space


    How to make layout container child to take rest free space of container.

    See example:
    Layout container with fixed size 200px contains two child components:
    1) fixed size 20px
    2) 100% ... should take rest free space (180px) , but takes 200px

    Code:
    	public void onModuleLoad() {		
    		LayoutContainer layoutContainer = new LayoutContainer();
    		
    		layoutContainer.setAutoHeight(false);
    		layoutContainer.setHeight(200);		
    		layoutContainer.setBorders(true);
    		
    		LayoutContainer fixedContainer = new LayoutContainer();
    		fixedContainer.setStyleAttribute("background", "yellow");
    		fixedContainer.setBorders(true);
    		fixedContainer.setId("fixed");
    		fixedContainer.setAutoHeight(false);
    		fixedContainer.setHeight(20);
    		layoutContainer.add(fixedContainer);
    		
    		LayoutContainer percentContainer = new LayoutContainer();
    		percentContainer.setStyleAttribute("background", "green");
    		percentContainer.setBorders(true);
    		percentContainer.setId("percent");
    		percentContainer.setAutoHeight(false);
    		percentContainer.setHeight("100%");
    		layoutContainer.add(percentContainer);
    		
    		RootPanel.get().add(layoutContainer);	
    	}

  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Give your layoutContainer a rowlayout and the percentContainer need to have a rowData of (1,1) and the fixedContainer and RowData of (1,20)

    Take also a look at the rowlayout examples.

  3. #3
    Ext User
    Join Date
    Dec 2009
    Posts
    12
    Vote Rating
    0
    emka is on a distinguished road

      0  

    Default


    For fixed size of layoutContainer it work, ok.

    But fails if set 100% height to layoutContainer.

    Code:
    	public void onModuleLoad() {		
    		LayoutContainer layoutContainer = new LayoutContainer();
    		layoutContainer.setLayout(new RowLayout());
    		
    		layoutContainer.setAutoHeight(false);
    		layoutContainer.setHeight("100%");		
    		layoutContainer.setBorders(true);
    		
    		LayoutContainer fixedContainer = new LayoutContainer();
    		fixedContainer.setStyleAttribute("background", "yellow");
    		fixedContainer.setBorders(true);
    		fixedContainer.setId("fixed");
    		fixedContainer.setAutoHeight(false);
    		fixedContainer.setHeight(20);
    		RowData rowData = new RowData(1, 20);
    		layoutContainer.add(fixedContainer, rowData);
    		
    		LayoutContainer percentContainer = new LayoutContainer();
    		percentContainer.setStyleAttribute("background", "green");
    		percentContainer.setBorders(true);
    		percentContainer.setId("percent");
    		percentContainer.setAutoHeight(false);
    		percentContainer.setHeight("100%");
    		
    		// 100% 100% 
    		rowData = new RowData(1,1);
    		layoutContainer.add(percentContainer, rowData);
    		
    		RootPanel.get().add(layoutContainer);	
    	}

  4. #4
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Use a viewport instead of the first layoutcontainer.

  5. #5
    Ext User
    Join Date
    Dec 2009
    Posts
    12
    Vote Rating
    0
    emka is on a distinguished road

      0  

    Default


    it's just local sample of 100% problem, that is why it's impossible to use viewport.

    My goal is to make container take all space of parent without fitlayout because most cases parent container uses tableLayout, and it fails on 100%

  6. #6
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Than you will need to use something else. Height of 100% set directly to to elements does not work as you might think it works.

    Maybe you should not use a tablelayout than. Please explain in detail what you want to do.

  7. #7
    Ext User
    Join Date
    Dec 2009
    Posts
    12
    Vote Rating
    0
    emka is on a distinguished road

      0  

    Default


    I am trying to create use case visible on image


  8. #8
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Give the portlet a rowlayout with orientation horizontal.

    The first panel as a rowdata of (0.5,1), the second of (-1,1) and the last of (0.5,1).

  9. #9
    Ext User
    Join Date
    Dec 2009
    Posts
    12
    Vote Rating
    0
    emka is on a distinguished road

      0  

    Default


    It's impossible to use RowLayout there because portlet content is dynamic (on image displayed only case then it fails) and contains table style information with colspans & rowspans and any component in a table cell.

    As I understand your advice not to use tableLayout at all and simulate table as combination of rowlayouts ?

  10. #10
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    You can also use a tablelayout. But that will brake dynamic resizing of children because it does not size them. You will need to add some functionality to your code, that sizes the three items inside the portlet according to the parent size.

Thread Participants: 1