Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-15691

iOS: Dynamically adding sections on tableview using insertSection method does not auto re-size content on orientation change

    Details

      Description

      Description

      We used the insertSection method to dynamically insert sections into the table on tap of a button. However, on orientation change, the labels in the rows(of the new section) either overlap with each other or don't resize accordingly, as shown in the screenshots attached.

      Test code

       
      var win = Ti.UI.createWindow({
      backgroundColor:'white'
      });
       
       
      var myTable = Ti.UI.createTableView({
      backgroundColor : "transparent",
      minRowHeight : 44,
      height : '100%',
      width : '100%',
      style : Titanium.UI.iPhone.TableViewStyle.GROUPED
      });
       
      var sections = [];
       
       
       
      var tableSection = Ti.UI.createTableViewSection();
      tableSection.headerTitle = "First Section";
      var aRow = Ti.UI.createTableViewRow({
      highlightedColor : '#FFF',
      color : "#2c95de",
      font : {
      fontSize : 17,
      fontWeight : "bold"
      },
      minimumFontSize : 12,
      textAlign : 'center',
      height : "auto",
      title : "Tap to add New Section"
      });
       
      aRow.addEventListener('click',addNewSection);
      tableSection.add(aRow);
       
      sections.push(tableSection);
       
      var tableSection1 = Ti.UI.createTableViewSection();
      tableSection1.headerTitle = "Second Section";
      for(i = 0; i<3;i++){
      var aRow = Ti.UI.createTableViewRow({
      backgroundColor : "#FFFF",
      height : 44,
      left : 10,
      right : 10,
      hasChild : true,
      selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.BLUE
      });
       
      aRow.title = "Row "+i+" Second Section";
      tableSection1.add(aRow);
      }
       
      sections.push(tableSection1);
       
      myTable.data = sections;
       
      win.add(myTable);
      win.open();
       
      function addNewSection(e)
      {
      // if(myTable.sectionCount == 2){
      // myTable.deleteSection(1);
      // }
       
      var row1 = Ti.UI.createTableViewRow({
      backgroundColor : "#FFFF",
      height : Ti.UI.SIZE,
      left : 10,
      right : 10,
      hasChild : true,
      selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.BLUE,
      layout : 'vertical'
      });
       
      var row1Text = Ti.UI.createLabel({highlightedColor : '#FFF',
      color : "#333",
      font : {
      fontSize : 17,
      fontWeight : "bold"
      },
      minimumFontSize : 12,
      top : 2,
      left : 10,
      right : 10,
      height : 19,
      text : "Site"
      });
       
      row1.add(row1Text);
       
      var siteTextLabel = Ti.UI.createLabel({
      textAlign : "left",
      color : "#6A6A6A",
      left : 10,
      bottom : 2,
      font : {
      fontSize : 14
      },
      height : Ti.UI.SIZE,
      text : "131448434,  SOME SITE NAME,  ABC CITY,  XYZ TECHNOLOGY PARK,  STATE,  MA  13148184014"
      });
       
      row1.add(siteTextLabel);
       
      var row2 = Ti.UI.createTableViewRow({
      backgroundColor : "#FFFF",
      height : Ti.UI.SIZE,
      left : 10,
      right : 10,
      hasChild : true,
      selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.BLUE,
      layout : 'vertical'
      });
       
      var row2Text = Ti.UI.createLabel({highlightedColor : '#FFF',
      color : "#333",
      font : {
      fontSize : 17,
      fontWeight : "bold"
      },
      minimumFontSize : 12,
      top : 2,
      left : 10,
      right : 10,
      height : 19,
      text : "Product"
      });
       
      row2.add(row2Text);
       
      var productTextLabel = Ti.UI.createLabel({
      textAlign : "left",
      color : "#6A6A6A",
      left : 10,
      bottom : 2,
      font : {
      fontSize : 14
      },
      height : Ti.UI.SIZE,
      text : "New Product Relaesed 12 SQL Server, Version 123, Site ABC"
      });
       
      row2.add(productTextLabel);
       
      var tableSectionNew = Ti.UI.createTableViewSection();
      tableSectionNew.headerTitle = "New Section";
      tableSectionNew.add(row1);
      tableSectionNew.add(row2);
      myTable.insertSectionAfter(0,tableSectionNew);
      }
      
      

        Attachments

        1. NotResized.png
          NotResized.png
          399 kB
        2. Overlapped.png
          Overlapped.png
          359 kB
        3. ProperData.png
          ProperData.png
          384 kB

          Activity

            People

            • Assignee:
              vduggal Vishal Duggal (Inactive)
              Reporter:
              rsharma Rupesh Sharma
              Reviewer:
              Pedro Enrique (Inactive)
            • Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-17801
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code