progress bar right to left

Flow
1

Hi,

How can I change the progress bar to go from right to left rather than left to right.

Regards

2

Is your question about framework progress bar or core elements progress bar? This is not exactly supported feature, but I think you can create the illusion with suitable theming and updating the value with 1 / x (remember to handle potential division by zero).

3

So I am using ProgressBarRenderer on a table column. And for one of them I would like it to start on the right and finish on the left.
so my code looks like

Column<PositionKeeperBO, Double> longUsageColumn = this.positionKeeperGrid.addColumn(PositionKeeperBO::getLongUsage).setCaption(“L/Usage”).setRenderer(new ProgressBarRenderer() {
@Override
public JsonValue encode(Double value) {
if (value != null) {
value = (value - 1) / 100.0;
}
return super.encode(value);
}
});

4

I started wondering if this could be done with CSS and I think I found a solution that seems to work, at least in the component Sampler. Note that this is not a supported feature, but a hack.

Add the stylename “flipped” to your progressbar.

progressBar.addStyleName("flipped");

Add the Css to transform the component to the mirror image

.v-progressbar-flipped {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
5
6

Is there a way to show the progress bar value? i.e in text form over the progress bar?