Ribbon Text automatically changing size


The code for ribbon block xml is given below

    <tab text="Settings">
        <item type="block" text="Rating Scale Limits" mode="cols">
                <item id="rs_lolimit" type="slider"  size="100" min="1" max="10" step="1" value="1" enableTooltip="true" />
                <item id="rs_uplimit" type="slider"  size="100" min="1" max="10" step="1" value="10" enableTooltip="true" />
                <item id="ratings_txt" type="text" text="Limits : 1 -&gt; 10" />

The ratings_txt automatically changes color and size when the slider moves along with the value(see pic): Is there a way to prevent size changes ?

The slider event code is

   dhxRibbon.attachEvent("onValueChange", function(id, value){
                dhxRibbon.setItemText("ratings_txt","Limits : "+dhxRibbon.getValue("rs_lolimit")+" -> "+dhxRibbon.getValue("rs_uplimit"));
                if(value > dhxRibbon.getValue("rs_uplimit")){
                  dhxRibbon.setValue("rs_uplimit", value,null);
                dhxRibbon.setItemText("ratings_txt","Limits :"+dhxRibbon.getValue("rs_lolimit")+" -> "+dhxRibbon.getValue("rs_uplimit"));
                if(value < dhxRibbon.getValue("rs_lolimit")){
                  dhxRibbon.setValue("rs_lolimit", value,null);

Also, if I try to change the label for the slider inside the event with the code

dhxRibbon.setItemText("rs_lolimit","Low - "+value);

it does not seem to change ?? Its a very useful component but I hope these are not bugs …


please try the following (add once after dhtmlx.js loaded):

dhtmlXRibbon.prototype.items.text.setText = function(item, text) { item.conf.text = text; item.base.firstChild.innerHTML = item.conf.text };