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

Windows: Ability to manipulate Ti.UI.Picker's width

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Medium
    • Resolution: Fixed
    • Affects Version/s: Release 6.1.1
    • Fix Version/s: Release 6.2.0
    • Component/s: Windows
    • Labels:
      None

      Description

      Problem Description:

      As of now, setting the width to Ti.UI.SIZE or a fixed value has no effect when the picker first renders.

      Sample code:

      var words = ['Bananas', 'Strawberries', 'Mangos', 'Electrocardiographically',
      'October', 'November', 'September', 'Wednesday', 'Trinitrophenylmethylnitramine',
      'Humor', 'Weekday', 'Balloon', 'Ornament', 'Strange', 'Disestablishmentarianism',
      'Aeroplane', 'Aeroplane', 'Chess board', 'Floodlight', 'Rocket', 'Space Shuttle',
      'Thermometer', ' Umbrella', 'Water', 'Tunnel', 'Treadmill', 'Lips', 'Brush',
      'Subconstellation', 'Typewriter', 'Room', 'Money', 'Hieroglyph', 'Flower', 'Monument',
      'Egg', 'Explosive', 'Family', 'Festival', 'Gloves', 'Horoscope', 'Kaleidoscope',
      'Microscope', 'Pendulum', 'Restaurant', 'Apples', 'Cycle', 'Miraculousness',
      'Overprovocation', 'Kyphoscoliotic', 'Disillusionizing', 'Prince'];
       
      Ti.UI.backgroundColor = 'white';
      var win = Ti.UI.createWindow({
          exitOnClose: true,
          layout: 'vertical'
      });
       
      // Add TiClassic picker - 1 column, width = Ti.UI.SIZE, height = Ti.UI.SIZE, backgroundColor = #d83636
      var classicPicker = Ti.UI.createPicker({
          top: 20,
          left: 0,
          height: Ti.UI.SIZE,
          width: Ti.UI.SIZE,
          backgroundColor: '#554e4e'
      });
       
      var classicPickerRows = [];
      for (var i = 0; i < words.length; i++) {
          var wordIndex = Math.round(Math.random() * 50);
          classicPickerRows[i] = Ti.UI.createPickerRow({
              title: words[wordIndex]
          });
      }
      classicPicker.add(classicPickerRows);
       
      win.add(classicPicker);
       
      // Add TiClassic picker - 1 column, width = 350, height = Ti.UI.SIZE, backgroundColor = #EDEDED
      var classicPicker2 = Ti.UI.createPicker({
          top: 200,
          left: 0,
          height: Ti.UI.SIZE,
          width: 350,
          backgroundColor: '#554e4e'
      });
       
      var classicPickerRows2 = [];
      for (var i = 0; i < words.length; i++) {
          var wordIndex = Math.round(Math.random() * 50);
          classicPickerRows2[i] = Ti.UI.createPickerRow({
              title: words[wordIndex]
          });
      }
      classicPicker2.add(classicPickerRows2);
       
      win.add(classicPicker2);
      win.open();
      

      In this sample, observe how there are two pickers declared. Observe that the PickerRows will most likely populate with very long words.

      Run this app (can be deployed with -T ws-local) and observe the behavior of both pickers.

      As shown in the code, classicPicker has a width set to Ti.UI.SIZE, but when rendered in the app and selecting a very long option, the picker width won't adjust.

      Additionally, classicPicker2 whose width is 350 seems to be rendered in a 350 width View (judging by the backgroundColor) but the actual picker width is NOT 350. For this picker, the size adjusts well when selecting a very long option though.

      So, is it possible to implement to actually fix the width? And, if set to Ti.UI.SIZE, it adjusts depending on the size of the selected option?

      Expected Result:

      Picker width should get adjusted upon item selection.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                kiguchi Kota Iguchi
                Reporter:
                nmishra Neeraj Mishra
                Reviewer:
                Gary Mathews
                Tester:
                Samir Mohammed
              • Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

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

                    Git Source Code