SectionStack Control

[heavenite]

It is hard to understand the control logic of sectionStack, or I have missed something important. Please advice.

As the attached file show, I can not keep the sectionStacksection I and II with the same height after toggle switching.

public class TodoLeft extends SectionStack {
	
	private TodoLeftI18nMessages i18n = GWT.create(TodoLeftI18nMessages.class);
	
	public TodoLeft(){
		
		setHeight100();
		setWidth(250);
		setStyleName("viewTodoLeft");
		
		//todoSection satrt
        SectionStackSection todoSection = new SectionStackSection("<img  style='position:relative;top:3px;height='15'  src='images/icon_windowList.png'>&nbsp;&nbsp;"+i18n.todoTitle());
        //todoSection.
        todoSection.setExpanded(true);

        // TODO UI
//        DataSource supplyCategoryDS = DataSource.get("configDMI"); // mock
        
        
        DataSource todoDS = DataSource.get("todoDMI"); 
        
        ListGrid listGrid = new ListGrid();
        listGrid.setHeight("180");
        ListGridField nameField = new ListGridField("date", "date");   
        ListGridField independenceField = new ListGridField("jobcontext", "Description");
        listGrid.setShowFilterEditor(true);   
        listGrid.setDataSource(todoDS);
        listGrid.setAutoFetchData(true);
        listGrid.setFields(nameField,independenceField);
        todoSection.addItem(listGrid);
        //todoSection end
        
        // Bulletin UI
//        DataSource bulietinDS=new DataSource();
//        bulietinDS.setID("homeBullentinDMI");
        DataSource bulietinDS = DataSource.get("homeBullentinDMI"); 
        SectionStackSection bulietinSection = new SectionStackSection("<image style='position:relative;top:3px;height:17px;' src='images/icon_frameEdit.png'/>&nbsp"+i18n.builetinTitle());
        bulietinSection.setExpanded(true);
        ListGrid homeBullentinListGrid = new ListGrid();
        homeBullentinListGrid.setWidth100();
        homeBullentinListGrid.setHeight("100");
        homeBullentinListGrid.setDataSource(bulietinDS);
        homeBullentinListGrid.setAutoFetchData(true);
        bulietinSection.addItem(homeBullentinListGrid);
        //Bulletin UI end
        
        
        //calendar  UI        
        final SectionStackSection calendarSection = new SectionStackSection("<image style='position:relative;top:3px;height:16px;' src='images/icon_calendar.png'/>&nbsp"+i18n.calendarTitle());
        calendarSection.setExpanded(true);
        Calendar calendar = new Calendar();

        calendar.setWidth100();  
        calendar.setHeight(150);  
        calendar.setShowDayView(false);  
        calendar.setShowWeekView(false);  
        calendar.setShowOtherDays(false);  
        calendar.setShowDayHeaders(false);  
        calendar.setShowDatePickerButton(false);  
        calendar.setShowAddEventButton(false);  
        calendar.setDisableWeekends(false);          
        calendar.setShowDateChooser(false);  
        calendar.setCanCreateEvents(false);
        calendarSection.addItem(calendar);
        
        
		setSections(todoSection,bulietinSection,calendarSection);
	}

}

[Isomorphic]

You've got a SectionStack that's supposed to be, eg, 700px high, and it has two components within it with sizes of 180 and 150 respectively - too small to fill the space. So it has to remove the height from one of them. If you leave the height of the grid unspecified, then it will be the one that stretches to fill space, and the Calendar will retain the configured height.