Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-3749] iOS: ImageView with scaled image, auto leaves padding

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionDuplicate
Resolution Date2014-03-15T18:37:19.000+0000
Affected Version/sRelease 1.6.0, Release 2.1.0, Release 2.0.1
Fix Version/sSprint 2012-16 API, Release 3.0.0
ComponentsiOS
Labelsapi, module_imageview, qe-port, qe-testadded
ReporterAlan Leard
AssigneeVishal Duggal
Created2011-04-26T15:31:47.000+0000
Updated2017-03-29T22:14:20.000+0000

Description

If you create an ImageView with a fixed width and auto for height, if the image is being scaled, then the height seems to leave padding on top and bottom, see screen shot: http://screencast.com/t/OlO2t6WIw Here is test code:
var win = Ti.UI.createWindow({backgroundColor:'#fff'});

var image = Ti.UI.createImageView({
	image: "image165.jpg",
	left: 0,
	top : 0,
	width : '165',
	height : 'auto',
	backgroundColor : "red"
});

win.add(image);
win.open();
Here is a link to the image that is 201x105: http://www.catravelservices.com/management/hotels/pictures/Mawamba_lodge_nature.jpg HD Ticket Reference: http://appc.me/c/APP-297864

Attachments

FileDateSize
imageview_scalling.png2014-02-28T07:10:42.000+0000117999
imageview_scalling2.png2014-02-28T07:10:42.000+000095631
IMG_0087.PNG2013-09-06T07:21:09.000+0000151905

Comments

  1. Sindre Sorhus 2012-01-04

    Confirmed on 1.8.0.1, iOS 5 simulator. I'm having the same issue. Can anyone take a look at this?
  2. Devang Gandhi 2012-02-06

    Another ticket, with same issue, http://support-admin.appcelerator.com/display/APP-934641#reply74719
  3. Junaid Younus 2012-05-15

    Tested with 2.0.1GA2, issue still exists on the iOS simulator. Android is not affected with this issue.
  4. Nikhil Sharma 2012-07-18

    Tested with 2.1.0.GA, this issue still exists on the iOS simulator.
  5. Junaid Younus 2012-07-19

    For now, there is the following workaround: http://pastebin.com/YmTGkp7d However it doesn't support dynamic resizing behavior (i.e. using Ti.UI.SIZE for height), the width and height have to be explicitly set, in order to avoid the padding.
  6. Vishal Duggal 2012-08-01

    Additional Test Case
       var win = Ti.UI.createWindow({
       	backgroundColor:'#fff',
       	layout:'vertical'
       });
       
       var image = Ti.UI.createImageView({ 
       	image: "http://www.catravelservices.com/management/hotels/pictures/Mawamba_lodge_nature.jpg", 
       	backgroundColor : "red" 
       });
       
       
       var label = Ti.UI.createLabel({
       	text:'Results Here'
       })
       
       var updateLabel = function(){
       	var size = image.size;
       	label.text = 'ImageView size is '+size.width+'x'+size.height;
       }
       
       var controlsContainer = Ti.UI.createView({
       	height:Ti.UI.SIZE
       })
       
       var widthControls = Ti.UI.createView({
       	width:'50%',
       	layout:'vertical',
       	left:0,
       	height:Ti.UI.SIZE
       })
       
       var heightControls = Ti.UI.createView({
       	width:'50%',
       	layout:'vertical',
       	right:0,
       	height:Ti.UI.SIZE
       })
       
       controlsContainer.add(widthControls);
       controlsContainer.add(heightControls);
       
       var b1 = Ti.UI.createButton({title:'WIDTH=SIZE'})
       var b2 = Ti.UI.createButton({title:'WIDTH=165'})
       var b3 = Ti.UI.createButton({title:'WIDTH=250'})
       var b4 = Ti.UI.createButton({title:'HEIGHT=SIZE'})
       var b5 = Ti.UI.createButton({title:'HEIGHT=50'})
       var b6 = Ti.UI.createButton({title:'HEIGHT=165'})
       b1.addEventListener('click',function(e){
       	image.width=Ti.UI.SIZE;
       	setTimeout(updateLabel,500);
       })
       b2.addEventListener('click',function(e){
       	image.width=165;
       	setTimeout(updateLabel,500);
       })
       b3.addEventListener('click',function(e){
       	image.width=250;
       	setTimeout(updateLabel,500);
       })
       b4.addEventListener('click',function(e){
       	image.height=Ti.UI.SIZE;
       	setTimeout(updateLabel,500);
       })
       b5.addEventListener('click',function(e){
       	image.height=50;
       	setTimeout(updateLabel,500);
       })
       b6.addEventListener('click',function(e){
       	image.height=165;
       	setTimeout(updateLabel,500);
       })
       win.add(image);
       widthControls.add(b1);
       widthControls.add(b2);
       widthControls.add(b3);
       heightControls.add(b4);
       heightControls.add(b5);
       heightControls.add(b6);
       win.add(controlsContainer);
       win.add(label)
       win.open();
       
  7. Vishal Duggal 2012-08-01

    Pull pending https://github.com/appcelerator/titanium_mobile/pull/2665
  8. Rima Umbrasas 2012-08-14

    Still occurs with: Mobile sdk-2.2.0.v20120810080115 Titanium Studio, build: 2.1.1.201207271312 Device: Ipad 5.1
  9. Shyam Bhadauria 2012-08-17

    Environment used for verification - Tested with Titanium SDK: 2.2.0.v20120816212512 Tested with Titanium  Studio: 2.1.1.201207271312 Device - iOS 5.1 simulator Machine OS - MAC 10.8
  10. Anshu Mittal 2013-06-21

    Still occurs with: Tested with: SDK:3.1.2.v20130619101604 Appcelerator Studio: 3.1.1.201306131423 OS: OSX 10.7.5 Device:iPhoneSimulator(v 6.0), Samsung tab(v 3.2) Xcode: 4.6
  11. Priya Agarwal 2013-07-11

    Verified with: Titanium Studio:3.1.2.201307091843 Titanium SDK: 3.1.2.v20130710144553 acs:1.0.3 alloy:1.1.3 npm:1.2.14 titanium:3.1.1 titanium-code-processor:1.0.1 OS: OSX 10.8 Device:iPhone 4(v 5.1), Galaxy Nexus (v 4.0.4) Xcode: 4.5.1
  12. Anshu Mittal 2013-09-06

    Still occurs on: SDK: 3.1.3.v20130904134612 Appcelertaor Studio: 3.1.3.201308302458 OS: OSX 10.8.4 Device: iPad3(iOS7) Xcode: 5.0 DP6 titanium-code-processor@1.0.2 alloy@1.2.2 Please find the attached screenshot
  13. Vishal Duggal 2013-09-06

    Can not reproduce the issue. Please attach reproduction steps.
  14. Paras Mishra 2014-02-28

    I am able to reproduce this issue. Screen shots are attached as imageview_scalling.png, imageview_scalling2.png Steps to reproduce: 1. Run the App mentioned by Vishal in above comment 2. Click Height=50 Expected: No padding should occur, image should fit to the imageview Actual: Padding occurs arround the image Environment used: Device : iPod touch 2 , iOS version: 7.1 SDK: 3.2.2.v20140221161255 CLI version : 3.2.1 OS : MAC OSX 10.9 Alloy: 1.3.1 ACS: 1.0.12 npm:1.3.2 Appcelerator Studio, build: 3.2.1.201402061120 titanium-code-processor: 1.1.0 XCode : 5.1 Beta 5
  15. Vishal Duggal 2014-03-15

    The issue raised here will be addressed as part of TIMOB-15707
  16. Keylo E. 2014-04-03

    still happening in 3.2.2, build: 3.3.0.201403281750
  17. Keylo E. 2014-04-03

    ..in mobileweb
  18. Lee Morris 2017-03-29

    Closing ticket as duplicate, please refer to TIMOB-10359.

JSON Source