PDA

View Full Version : progressbar text align center



oracle.cons.tr
1 Mar 2014, 5:31 PM
Hi i use the below code to render a progress bar inside a grid cell
but the text is left aligned. Is there a way to align text to center?

Thanks




renderer: function(v,m,r) {
var val,text;
if(v === r.get('totalCount')) {
val = 1;
text = "%100"
}
else {
val = 100*v/r.get('totalCount');
text = "%"+value
}


var progressRenderer = (function (pValue, pText) {
var b = new Ext.ProgressBar();
return function(pValue, pText) {
b.updateProgress(pValue, pText, true);
return Ext.DomHelper.markup(b.getRenderTree());
};
})(val, text);


return progressRenderer(val, text);
}

venkatesh teja
2 Mar 2014, 6:27 PM
Hi...

Did you try with CSS...?

Piruthu
2 Mar 2014, 9:55 PM
Try this



var b = new Ext.ProgressBar({cls: 'customAlign'});


//CSS
.customAlign .x-progress-text{
text-align:center !important;
}


[Edit]
Added Fiddle here: https://fiddle.sencha.com/#fiddle/40j

oracle.cons.tr
3 Mar 2014, 8:01 AM
I tried this but no luck.

Actually


<div class="x-progress-text" style="position:relative">


dies exactly what i want but i dont know how i can do it with css.

oracle.cons.tr
5 Mar 2014, 5:21 AM
Hi,

This is how i got it working thanks.



.customAlign .x-progress-bar .x-progress-text {
position : relative;
}