This is a migrated thread and some comments may be shown as answers.

Vertical position text on label in iOS

2 Answers 219 Views
Report a bug
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Tim
Top achievements
Rank 1
Tim asked on 07 Jul 2016, 10:39 AM

Hi Folks,

I'm not sure if this is a bug. I am using padding-top to vertically position text in the center of a label. However on iOS this seems to have a weird effect.

In Android it positions the text as I would expect. However on iOS I see the text at the bottom of the label. If I specify no vertical padding the text appears centered vertically in the label on iOS. However it then appears at the top in Android. See my cssClass below.

It seems like a bug to me, but how do I work around it in the meantime? I have tried 

 

.item-label {
  border-color: #3C3CA5; 
  border-width: 2;   
  border-radius: 0;
  background-color: white;
  color: black;
  text-transform: none;
  text-align: left;
  vertical-align: center;
  horizontal-align: stretch;
  font-size: 18;
  margin: 10;
  padding: 25 0 0 70;
  height: 80;
  min-height: 80;
}

 

2 Answers, 1 is accepted

Sort by
0
Tim
Top achievements
Rank 1
answered on 07 Jul 2016, 10:43 AM

I have found a workaround. I can specify a different css class, and in my code check which platform I'm on and if it is Android I can apply a class with padding-top set. 

 

i.e.  L0.cssClass = "AndroidClass";

0
Nick Iliev
Telerik team
answered on 11 Jul 2016, 08:23 AM
Hi Tim,

Indeed your workaround is an applicable and valid solution. In fact, this practice is commonly used (different CSS styles for iOS and Android). 
You can also use different platform specific layout pages like described in the following link:
https://docs.nativescript.org/core-concepts/supporting-multiple-screens.html#platform-qualifiers

Example(platform specific files):

  • app.android.css - CSS styles for Android.
  • app.ios.css - CSS styles for iOS.


Regards,
Nikolay Iliev
Telerik by Progress
 

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

 
Tags
Report a bug
Asked by
Tim
Top achievements
Rank 1
Answers by
Tim
Top achievements
Rank 1
Nick Iliev
Telerik team
Share this question
or