3

I have the following dxButton element. 

<div class="dx-field-value" data-bind="dxButton: { text: name, onClick: $root.name }"></div>

The text of the button is being assigned via the variable name. Now, I want the button text to be always uppercase for this specific element only.

I have tried setting an id and a class for it, and create custom css however it did not work. I have also tried inline styling as follows:

<div class="dx-field-value" style="text-transform: uppercase;" data-bind="dxButton: { text: 'Text' }"></div>
David
  • 1,192
  • 5
  • 13
  • 30
  • Why don't you go `
    `?     – connexo Jun 21 '17 at 08:29
  • @connexo hi thanks for your comment. This won't work because there is already a css rule that forces all button text to be lowercase. I just want this to be inversed for this specific button. – David Jun 21 '17 at 09:06

1 Answers1

4

Use the dx-button-text class name to customize your button text.

Make all buttons lowercase:

.dx-button-text {
    text-transform: lowercase;
}

Then, add a specific css class to the button you want to be uppercase:

<div data-bind="dxButton: { text: name }" class="uppercase"></div>

And apply the following rule:

.uppercase .dx-button-text {
    text-transform: uppercase;
}

Demo.

Sergey
  • 5,396
  • 3
  • 26
  • 38