I have a problem with dynamic minimal height of a container in my Flex application.
The application consists of several tabs, each having its own minHeight attribute set as required. However, in one tab, I switch between two views - a list view and a detail view.
The main view:
<mx:TabNavigator id="tabNavigator" width="100%" height="100%" change="MainViewModel.getInstance().onTabClick(event);" resizeToContent="true">
<s:NavigatorContent label="Welcome" minWidth="950" width="100%" minHeight="300" height="100%">
<startview:StartView width="100%" height="100%" x="0" y="0" />
</s:NavigatorContent>
<s:NavigatorContent id="documentTab" minWidth="950" width="100%" minHeight="300" height="100%" label="Document">
<documentview:DocumentView width="100%" x="0" y="0" visible="{model.documentList}" />
<documentdetailview:DocumentDetailView width="100%" x="0" y="0" visible="{model.documentDetail} "/>
</s:NavigatorContent>
</mx:TabNavigator>
In the list, I have a column with a "detail" link calling function setDocumentDetailView():
public function setDocumentDetailView() : void {
documentList = false; // the list is not displayed
documentDetail = true; // the detail is displayed
}
In the detail view, I have a button to return back to the list calling function setDocumentListView():
public function setDocumentListView() : void {
documentList = true; // tje
documentDetail = false;
setDocumentDetailViewHeight(300);
}
So far, it works fine.
First problems arrise because of different minimal height of the list and the detail. To show the vertical scrollbar and to display all the content of the particular view, minimal height of the NavigatorContent id="documentTab" must be set. This is done in the functions above.
More problems appear because the detail is dependent on the document displayed. It consists of several panels with conditional visibility. Therefore, the minimal height is different for various documents (according to its type as well as the length of the text of the document). Therefore I need to determine the minHeight according to the content and set the minHeight of the "documentTab" accordingly.
I found the "updateComplete" event that is called after the view is rendered. If I get the value of the height of the VGroup containing all the conditional panels, I have the correct height needed to be set for the outer NavigatorContent "documentTab". I pass this height to a function in MainModel that sets the minHeight of the tab.
public function onUpdateComplete(): void {
if (MainViewModel.getInstance().documentDetail) {
height = view.documentDetail.height;
MainViewModel.getInstance().setDocumentDetailViewHeight(height);
}
}
This seemed to work correctly as well. Until ...
I recently found out, that if I follow the following scenario it fails:
- Display list of documents.
- Display detail of a document A.
- Go back to the list.
- Display the same document A.
In this case, the detail view is not rerendered, because the objects displayed are the same with the same height and width. Therefore, the updateComplete event is not triggered and the minHeight remain set to 300 (because of the list minHeight set in the previous step). The panels in the detail go over the outer "documentTab" and scrollbar does not appear. The same situation appears when I go to another document with similar content (same panels visible and same proportions).
Does anyone have a working solution for this situation?
I have already tried even the "show" event to set the height to the value stored in the attribute. But it did not work. Worse, it started to behave really odd, because the value of "height" variable was set only to a bigger value than before, but never to smaller. When the view could be smaller, the variable kept the value from the previous size. And when the view needed bigger height, the variable took the new higher value. This resulted in resizing the view permanently to the maximal discovered size while visiting details of various documents and keeping this big height - have a lot of empty space and scrollbars for all document details.
I am getting really tired of this unpredictable behaviour of Flex :( So, if anyone have an idea what I should try to make this work, I would be really happy.
