text-transform wierdness

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

    Posted 24 Jul Link to this post

    I tried setting "text-transform: none" on a button, but it seemed to show all letters in capitals. When I set textWrap=true, it seemed to work as I expected (i.e. exactly as I typed the text in upper and/or lower case ). Could be just me doing something stupid...

    (uses font-awesome...)

            <Button id="b0" text="  &#xf015;   Back to home   " row="2" col="0" tap="tapReturn" class="flow-item" style="horizontal-align: left; margin-left: 30; color: white;" textWrap="true"/>

    .flow-item {
       border-color: white; 
    border-width: 1;   
      border-radius: 0;
        font-size: 18;
        text-transform: none;
        text-align: center;
        color: white;
        background-color: #3C3CA5;
        font-family: "FontAwesome"; 
        padding: 0 10 0 10;
        margin: 10;
        height: 60;
        vertical-align: center;
        horizontal-align: center;
    }

     

     

     

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    95 posts

    Posted 28 Jul Link to this post

    Hi Tim,

    By default in Android (as recommended by Google's Material design guides) all buttons are UPPERCASE.
    So text-transform:none will preserve the default Android style for buttons (all letters uppercased).
    One applicable option is to set text-transform: capitalize
    e.g.:
    .flow-item {
        text-transform: capitalize;
        font-family: "FontAwesome";
    }
    <Button text=&#xf015;   Back to home   "  class="flow-item" />

    The example above works as expected without having to set textWrap=true
    Currently, there is no way to set different casing for different words in button (again following the guidelines in Material Design).

    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Tim
    Tim avatar
    20 posts
    Member since:
    Apr 2016

    Posted 28 Jul Link to this post

    Thanks Nikolay. Yep I had used capitalize, but then the UX guy's spec called for only uppercase on first letter of first word.

    Cheers,

    Tim

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    95 posts

    Posted 28 Jul Link to this post

    Hi Tim,

    One possible workaround for your case is to use formatted string to set your customized text to your button.
    e.g.
    var btn = <buttonModule.Button>page.getViewById("b0");
    var formattedString = new formattedStringModule.FormattedString();
    var firstSpan = new spanModule.Span();
     
    firstSpan.fontSize = 18;
    firstSpan.text = "Capitalized word and then lowercased wrods ";
    formattedString.spans.push(firstSpan);
    btn.formattedText = formattedString;

    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top