CODEWITHSUNDEEP
mobiledatepickeroverlaytitaniumtableview
Christof
Christof

Reputation: 3927

Create an overlay for Titanium Mobile TableView

I'm trying to create a DatePicker that slides in over a TableView in order to edit a date-field. The problem is that the DatePicker appears behind the TableView - you can see a part of it because the TableView is transparent.

enter image description here

I tried giving one a higher zIndex value than the other, both ways, but that didn't help. The datepicker is a picker control in a view, which I slide up with an animation.

How does one overlay a TableView with a different view?

Edit: the table is quite complicated because of the various types of data in it, so copy&paste would be overkill. But here's the relevant part:

var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView({zIndex: 1});

// some table sections are added here

// create picker layer
var row = Ti.UI.createTableViewRow({zIndex: 2});
var picker_view = Titanium.UI.createView({
  height: 251,
  bottom: -251,
  zIndex: 3,
  visible: false
  });

var picker = Ti.UI.createPicker({
  type: Ti.UI.PICKER_TYPE_DATE,
  selectionIndicator: true
  });
picker_view.add(picker);

row.addEventListener('click', function()
  {
  picker_view.visible = true;
  var slide_in = Titanium.UI.createAnimation({bottom:0});
  picker_view.animate(slide_in);
  });

row.add(picker_view);

some_section.add(row);
win.add(table);

Thanks!

Upvotes: 0

Views: 3111

Answers (2)

Muhammad Zeeshan
Muhammad Zeeshan

Reputation: 8856

Try to Add the picker in the window not in table.

Upvotes: 3

Aaron Saunders
Aaron Saunders

Reputation: 33345

dont add the view to the row, add it to the window.

dont set visibility on the view, it is irrelevant since you are sliding it up and down.

also you really are confusing things with the zIndexes, they are not really needed in this use case.

Upvotes: 2

Related Questions