Vertical position text on label in iOS

3 posts, 0 answers
  1. Tim
    Tim avatar
    20 posts
    Member since:
    Apr 2016

    Posted 07 Jul Link to this post

    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. Tim
    Tim avatar
    20 posts
    Member since:
    Apr 2016

    Posted 07 Jul Link to this post

    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";

  3. Nikolay Iliev
    Nikolay Iliev avatar
    67 posts

    Posted 11 Jul Link to this post

    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:

    Example(platform specific files):

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

    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.

Back to Top