Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25926] Android TextField padding not applied with SDK 7.0.1

GitHub Issuen/a
TypeBug
Priorityn/a
StatusOpen
ResolutionUnresolved
Affected Version/sn/a
Fix Version/sn/a
Componentsn/a
Labels7.0.1, engReviewed, padding, sdk-7.0.0
ReporterSandro Lain
AssigneeShak Hossain
Created2018-01-22T16:39:04.000+0000
Updated2019-05-21T16:57:45.000+0000

Description

241/5000 The settings of the "padding" property (top, bottom, left, right) in the TextFields are not applied in the SDK 7.0.1. In SDK 6.3.0, the style is applied correctly. I enclose two screenshots of the same code in SDK 6.3.0 and SDK 7.0.1. The code for the TextField style into .tss file. 
"#field_input": {
	width: "100%",
	height: 28,
	top: 0,
	textAlign: "center",
	backgroundColor: "transparent",
	color: "#FFFFFF",
	font: {
		fontFamily: "Roboto",
		fontSize: 14
	},
	paddingLeft: 0,
	paddingRight: 0,
	padding: {
		top: 0,
		bottom: 0,
		left: 0,
		right: 0
	},
	borderWidth: 1, borderColor: "#F0F"
}

Attachments

FileDateSize
SDK_6.3.0.png2018-01-22T16:36:48.000+0000114032
SDK_7.0.1.png2018-01-22T16:36:48.000+0000106031

Comments

  1. Sharif AbuDarda 2018-01-23

  2. Sharif AbuDarda 2018-01-25

    Hello [~sandrolain], I see your Textfield height is hard-coded to 28. Which isn't a good idea since font size is hard-coded too. This makes a bad assumption about the OS theme that is applied to the TextField and what decoration might be applied. Try changing the TextField's "height" to Ti.UI.SIZE. I have tested this and it's working fine. Thanks.
  3. Sandro Lain 2018-01-25

    Thanks, it was one of my tests and in other works I did so, but unfortunately for this application the graphics have been defined by a third company paid by my client, and I have to respect the proportions of the UI that I have been given.
  4. Joshua Quick 2018-02-02

    [~sandrolain], I don't consider this a bug. Let me explain... In Titanium 7.0.0, we switched to using Google's newest material themed TextFields and TextAreas. These updated UI views from Google have more space above and below the editable area to make room for a top hint text, bottom underline, and bottom description text. Have a look at Google's "Input text" section and note that they've added "8dp" of *+internal+* padding above and below the editable field. This is not the same as the outer padding you're setting. (There's a picture showing this in the link below.) https://material.io/guidelines/components/text-fields.html#text-fields-layout So, the issue here is that your code is making a bad assumption about the space needed for the theme and UI decorations around the TextField, which is a portability issue between platforms and even different themes on the same platform (such as Android). You should never set both the TextField height and font size. Ideally, you should always the TextField height to Ti.UI.SIZE and it'll always correctly size to just-fit the field's contents and custom font you give it. Note that this is why Titanium offers vertical and horizontal layout features and the ability to auto-size UI. This is needed to display UI correctly between differently platforms and system themes. This is probably not the answer you want to hear, but it is a portable future-proof solution.
  5. Sandro Lain 2018-02-05

    Hi, I have now done to make the adaptive height of the text field without specifying a fixed, as recommended, but if it were possible to specify a height as on iOS I could meet the rules of UI indicated by my client. The documentation indicates that on Android SDK 6.0.0 is available the property "padding" as for iOS, and actually in SDK 6.x.x I have already used it without problems. It should be reimplemented into SDK Android to respects it, or update the documentation indicating that with 7.x is no longer supported. http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TextField-property-padding
  6. Joshua Quick 2018-02-05

    [~sandrolain], the "padding" feature does work on Android, but it's an external padding. If you set it to something large such as... 
       { top: 50, left: 50, bottom: 50, right: 50 }
    ...then you'll see that the above works. The issue is that Google's material themed TextFields also has an internal padding now that is separate from the external padding. If you look at the "material" theme guide I showed you, you can see this. That's the change here. If you're not willing to use Ti.UI.SIZE, then I recommend that you set the fontSize smaller on Android.
  7. Mostafizur Rahman 2018-02-12

    [~sandrolain], Did you manage to try the recommended steps?
  8. Sandro Lain 2018-02-12

    Hi, I used height = Ti.UI.SIZE on android and it works as expected, but at the moment it does not solve the problem because from my client's graphic studio I have very specific dimensions, padding and font-size directives that I can not ignore
  9. (deactived) Brian Immel 2018-04-09

    [~topener], What is that minimum padding number? 50? Should I include the following in https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TextField-property-padding "Android sets it's own minimum padding automatically. If you attempt to set anything below 50, it will not be reflected in your app."
  10. Rene Pot 2018-04-10

    [~bimmel] 50 is too big. [~jquick] can probably answer that question
  11. Joshua Quick 2018-04-10

    Let's punt on this.
  12. Kerberos 2018-07-22

    Yes I have same problem too.

JSON Source