title: Weird and unpredictable behavior by Views and Images from remote URL?
body: <p>Here is my</p>
  
  <p><strong>APP.js</strong></p>
  
  <pre><code>var win = Ti.UI.createWindow({
      navBarHidden : true,
      className : 'window',
      backgroundColor : "#efefef"
  });
  
  var header = Ti.UI.createView({
      height : 20,
      width : 303,
      top : 0,
      backgroundColor : "#abc"
  });
  win.add(header);
  
  var scroll = Ti.UI.createScrollView({
      top : 44,
      bottom : 44,
      layout : 'vertical'
  });
  win.add(scroll);
  header.addEventListener('click', function(evt) {
      fetch_images();
  });
  
  win.open();
  
  function fetch_images() {
      var xhr = Ti.Network.createHTTPClient({
          onload : function() {
              myjson = JSON.parse(this.responseText);
              for ( i = 0; i &lt; myjson.length; i++) {
                  Ti.API.debug(i);
                  var look = new looks(myjson[i])
                  scroll.add(look);
              }
          },
          onerror : function(e) {
              Ti.API.debug("STATUS: " + this.status);
              Ti.API.debug("TEXT:   " + this.responseText);
              Ti.API.debug("ERROR:  " + e.error);
              if (Titanium.Network.online) {
                  alert('No reponse from server.');
              } else {
                  alert('Please Check your Internet connectivity.');
              }
          },
          timeout : 5000
      });
      xhr.open('GET', 'http://xxxxxxx.com/xxxxxxx.json?api_token=xxxxxxxx');
      xhr.send();
  }
  
  function looks(image_details) {
      var look_container = Ti.UI.createView({
          height : 325,
          width : 303,
          top : 10,
          layout : 'horizontal',
          backgroundColor : "#cac"
      });
      var look_image = i.UI.createImageView({
          width : 303,
          top : 0,
          left : 0,
          right : 0,
          image : image_details.image_medium
      });
  
      look_container.add(look_image);
      return look_container;
  }
  </code></pre>
  
  <p>I am about to pull my hairs from my head.
  Working with this for around last 4-5 hours.
  Acc. to the code Image should be something like this</p>
  
  <p><img src="https://i.stack.imgur.com/MWBKT.png" alt="enter image description here"></p>
  
  <p>But it appears like this.</p>
  
  <p><img src="https://i.stack.imgur.com/1NdUa.png" alt="enter image description here"></p>
  
  <p>Any guess whats wrong !! Any help would be grateful ??</p>
  
  <p>As per the code Image should be aligned to top (0px from top). But Image is always down the line in the view and dont stick to the top... ??</p>
  
  <p><strong>-------------------------EDIT---------------------------</strong></p>
  
  <p>I editted my code to check for static JPG images</p>
  
  <p>and its same even for the Images in the resources directory</p>
  
  <p>check this question <a href="http://developer.appcelerator.com/question/141034/how-to-achieve-a-layout-in-a-view-" rel="nofollow noreferrer">developer.appcelerator.com/question</a></p>
  
  <p><strong>code</strong></p>
  
  <pre><code>var win = Ti.UI.createWindow({
      navBarHidden : true,
      className : 'window',
      backgroundColor : "#efefef"
  });
  
  var my_container = Ti.UI.createView({
      height : 325,
      width : 303,
      top : 30,
      backgroundColor : "#cac",
      layout : "horizontal"
  });
  var my_image = Ti.UI.createImageView({
      width : '100%',
      top : 0,
      left : 0,
      right : 0,
      image : 'hello.jpg'
  });
  
  my_container.add(my_image);
  win.add(my_container);
  
  my_container.addEventListener('click', function() {
      my_image.top = my_image.top - 25;
  })
  
  win.addEventListener('click', function() {
      my_image.top = my_image.top + 5;
  })
  win.open();
  </code></pre>
  
  <p>and <a href="https://i.imgur.com/Y9zvF.png" rel="nofollow noreferrer">image url</a> for the image to be used.</p>