I'm having an issue with keeping the text of a button centered followed by an icon. The code works fine until I add special characters in front of the button text. In that case, the special characters are placed after the text followed by the icon.
I suspect that this issue is related to the dir:'rtl' property I am using. However, I need this property to position my icon on the right side of the text.
Any help or opinions on this matter would be greatly appreciated.
Here is what my code and CSS look like:
<button data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="OpenButton" data-dojo-props="'class':'ButtonStandard',dir:'rtl', iconClass:'ButtonArrowRight'">None</button>
My CSS is as follows:
.ButtonStandard {
width: auto;
margin-bottom: 2px;
padding: 0px;
}
.ButtonArrowRight {
background-image: url("images/ArrowRight.png");
background-position: 0 53%;
background-repeat: no-repeat;
width: 12px;
height: 12px;
}
Thank you