Devextreme Override Css of dxButton
I Have the Following dxButton Element. the Text of the Button Is Being Assigned via the Variable Name. Now, I Want the Button Text to Be Always Uppercase for...
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>
1 Answer
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.
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
