Layout Advice: variable height text above a table view

Question

Layout Advice: variable height text above a table view

You must Login before you can answer or comment on any questions.

Hello!

I'm having a hard time getting my head around layout. I think what I want should be possible with vertical layouts, but I must be missing something.

I have a window that contains a piece of text (ideally, HTML in a WebView). This text is of variable height. Underneath this text, I want a table view that consumes the rest of the available space in the window.

I've been trying code like this:

var win = Ti.UI.currentWindow;
 
var webview = Titanium.UI.createWebView({html:'Sample text', height: 'auto', top: 0});
win.add(webview);
 
 
//var tblContView = Titanium.UI.createView({backgroundColor: 'red', height: 'auto'});
//win.add(tblContView);
 
var data = [{title:"Test view 1"},{title:"Placeholder"}];
var table = Titanium.UI.createTableView({data:data, height: 'auto'});
win.add(table);

This displays the top webview properly, but the tableview is not displayed and I receive the warnings:

[WARN] [object TiUITableView] has an auto height value of 0, meaning this view may not be visible.

(repeated 7 more times)

I've tried other approaches, such as checking the height of the web view (thinking I could set the top and height of the tableview accordingly), also to no avail.

How do people handle layouts with variable height?

Thanks!

-Mike L.

2 Answers

Your Answer

Think you can help? Login to answer this question!

Oops, sorry, I left in a couple commented out lines. Please ignore them. I was trying some other tricks, containing the tableview inside another view. That didn't work out for me either.

— commented 2 years ago by Mike Lester

Accepted Answer

Accepted Answer

I have a cheap fix for you...

var win = Ti.UI.currentWindow;
 
var webview = Titanium.UI.createWebView({html:'Sample text', height: 'auto', top: 0});
win.add(webview);
 
 
var data = [{title:"Test view 1"},{title:"Placeholder"}];
var table = Titanium.UI.createTableView({data:data, bottom:0});
win.add(table);
 
setTimeout(function(){updateHeight();},100);
function updateHeight() {
    table.height = 460 - webview.height;
}

Good luck. I'll try to check back to see if it works for you.

Answer 2

TableView's headerView could store the webView

TableView.setHeaterView