Help with Popover window sizing from Tableview

I am trying to correctly size a popover window to match the passed Tableview contents. The height = 'auto' does not work, it won't display any size. I tried using Ti.UI.SIZE and Ti.UI.FILL and they appear broken with a JIRA issue that while showing resolved, I believe is only resolved in version 3.0 which is not out yet?

 var annotationDetailPopover = Ti.UI.iPad.createPopover({
                        title:'Contact Details',
                        //rightNavButton: travelMgmtRightNavButton

                     annotationDetailPopover.addEventListener('hide', function()     //Let's remove the selected annotation after the popover is killed
                        isAnnotationDetailPopOverVisible = "false";
                    });  //end annotationDetail listener function

                    var annotationDetailPopoverWindow= Titanium.UI.createWindow({
                        title: "Contact Detail",

                    //**************** GET Tableview detail from********************************************    
                    var TestContactWindowTableview = getContactDetailsFromSqlDB( );  //will contain a tableview

                    annotationDetailPopoverWindow.add(TestContactWindowTableview); //Add tableview to detail window
                    annotationDetailPopover.add( annotationDetailPopoverWindow );  //Add window to popover

                    //************* Alpesh's code for Popover ****************************************

                    var lblTemp = Ti.UI.createLabel({
                        text: evt.annotation.subtitle,


                    var tempView = Ti.UI.createView({
                        top : 17,
                        left : lblTemp.toImage().width-30,  //+38,
                        width : 1,
                        height : 1



                    if (isAnnotationDetailPopOverVisible  == false)
                                    //view:evt.annotation.leftView,             //view here means is relative to where popover show display
                                    view:tempView,             //view here means is relative to where popover show display
                             ); // end popover show    

                            isAnnotationDetailPopOverVisible = "true";

                    }//end if isPoPOverVisible
— asked 3 years ago by Stephen Flournoy
1 Comment
  • Malcolm, first thank you for taking the time to look at this.
    What I am doing is a SQL lookup and building a tableview with this code as shown.

    var TestContactWindowTableview = getContactDetailsFromSqlDB(

    This tableview is NOT fixed height, so when I display it in the popover, I want the popover to grow or shrink in height to match the data (with the limits of the screen of course). apples own annotation Popover does this in the Maps app today.

    Currently when I display the popover using .FILL or .SIZE, Titanium doesn't show the tableview at all. This was documented as a bug I believe in a Jira post. The code I posted was fixed height because currently that's the only situation where it will work.

    I am building a custom view so that I have something to attach to the annotation window. My app is a mapping app and when a user touches the disclosure button a popover appears with more detailed data. If I could get the x and y coordinates of the pin I guess I could attach e popover there, but I haven't been successful with that yet either…(different problem)

    I will look at the properties you mention, I may have carried those over from someone else's code or some example… But I still have the problem with needing the popover to dynamically resize to the Tableview data. Hope this makes sense and hoping you can help.

    — commented 3 years ago by Stephen Flournoy

1 Answer

  • Hi

    You have asked how to have your popOver match the size of the tableView, but I do not see any code for a tableView.

    Are you hoping to match the size of the popOvers internal size to match that of a tableView where you require a fixed width and/or height?

    When you set the width and height of the popOver, iOS will create a window large enough to supply the desired dimensions, however if you ask for dimensions greater than the device can provide or the current arrow position causes a restriction - the actual width and height returned will be less than asked for.

    The popOver will act as a parent view so any children (tableView as example) can be added using the properties of Ti.UI.FILL for either (or both) width and height. This is by design and allows you table to expand (or shrink) to match the available space.

    You have also added several parameters in the show method that do not exist and are not documented; including; x, y, width, height, navBarHidden & animated.

    I am also not sure why you have added a tempview, unless is designed to fake where the arrow goes, if that is the case it SHOULD point to the thing that was clicked, it is designed to give context.

    And finally you have tried to set arrowDirection which is READ-ONLY, this only tells you where iOS decided to point the arrow, not where you want it to appear.

    In short; a popOver will act as a container and is designed for content that does not fill the screen - other views/windows are better suited for that. It controls how it points to the view that you nominate as the thing that initiated the popOvers appearance. Child views of any kind can easily fill it by using Ti.UI.FILL on width and/or height of the popOver itself.

    — answered 3 years ago by Malcolm Hollingsworth
    • Hi

      I have some test code that you can use to show how you can have a popover have a height correct for the amount of data - so long as the row height is the same for all entries. I have also provided a easy way to show you how to attach the popover to the annotation - without any fake views.

      To see it work, create a new simple project and replace the entire app.js with the code below and run.

      It uses an array of months with the table being filled with a random number of them from 3-12. The height of the popover is calculated from this information.

      To remove the need for the fake view this example creates an imageView and assigns it to the leftView of annotation rather than a simple image. You can then use this connect to the popover.

      Let me know how this goes.

      var tab1, tab2, tab3, tab4, tab5, tab6, tab7, tab8;
      (function () {
          var win = Ti.UI.createWindow({  
              height: Ti.UI.FILL,
              title: 'Map',
              width: Ti.UI.FILL
          function addPin(obj) {
              var pin = Ti.Map.createAnnotation({
                  longitude:  obj.lon,
                  title: obj.title,
                  subtitle: obj.subtitle,
                  pincolor: Ti.Map.ANNOTATION_RED,
                  animate: true
              return pin;
          var month = [
              { title: 'January' },
              { title: 'February' },
              { title: 'March' },
              { title: 'April' },
              { title: 'May' },
              { title: 'June' },
              { title: 'July' },
              { title: 'August' },
              { title: 'September' },
              { title: 'October' },
              { title: 'November' },
              { title: 'December' }
          var data = [];
          var imgTest1 = Ti.UI.createImageView({
              height: 43,
              image: 'KS_nav_ui.png',
              width: 46
          imgTest1.addEventListener('click', function (e) {
              var data = month.slice(0, Math.floor(Math.random() * 9) + 3);
              var tbl = Ti.UI.createTableView({
                  data: data,
                  height: Ti.UI.FILL,
                  rowHeight: 50,
                  width: Ti.UI.FILL
              var popover = Ti.UI.iPad.createPopover({
                  height: data.length * tbl.getRowHeight(),
                  title: 'Example',
                  width: 300
                  view: imgTest1
          var imgTest2 = Ti.UI.createImageView({
              height: 43,
              image: 'KS_nav_views.png',
              width: 46
          var pin = Ti.Map.createAnnotation({
              latitude: 52.4914,
              longitude: 0.6964,
              title: 'Corby',
              pincolor: Ti.Map.ANNOTATION_PURPLE,
              animate: true,
              leftView: imgTest1,
              rightView: imgTest2
              lat: 52.97,
              lon: -1.18,
              title: 'Nottingham'
              lat: 53.3822,
              lon: -1.4667,
              title: 'Sheffield'
              lat: 51.5171,
              lon: -0.1062,
              title: 'London'
          var map = Ti.Map.createView({
              annotations: data,
              height: Ti.UI.FILL,
              region: {
                  latitude: 52.97,
                  longitude: -0.18, 
                  latitudeDelta: 2,
                  longitudeDelta: 2
              width: Ti.UI.FILL
          tab8 = Ti.UI.createTab({  
              icon: 'KS_nav_views.png',
              title: 'Map',
              window: win
      var tabGroup = Ti.UI.createTabGroup();

      — commented 3 years ago by Malcolm Hollingsworth
    • Did my example code answer your question?

      — commented 3 years ago by Malcolm Hollingsworth
    • Malcom,

      Thank you SOOOO much for taking the time with the code. Unfortunately, my day job has wiped me out in the last few days… no chance to test in my code yet. Please stand by…I am hopeful!

      — commented 3 years ago by Stephen Flournoy