text-transform wierdness

[Tim]

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

 

 

 

[Nick Iliev]

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

[Tim]

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

[Nick Iliev]

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