2

How am i able to increase the height(thickness) of a vaadin progressbar- 7.6.3. And also how can i display the values which are progressed. For example in the middle of a progressbar showing how much is done and how much is remaining. I have tried with the following code but it is always the default size.

_progress.setWidth("100%");
_progress.setHeight("100%");

and also i tired using css, something like, 

_progress.setCaption(" ");
_progress.setCaptionAsHtml(true);
_progress.addstylename("progress");

where ".progress" i have defined in my .css with 

.progress1 {
color: black;
text-align: right;
font-size: 2em;
font-weight: bold;
height: 100%;
}
user9630935
  • 349
  • 1
  • 4
  • 18

1 Answers1

1

Instead of defining a style just for your progress bar, you have to include the wrapper to your style rule.

  .v-progressbar-fat .v-progressbar-wrapper {
    height: 20px;
  }

If you add this to your style sheet and apply the style name "fat" to your progress bar, it's height will be changed to 20px (Or whatever amount you wish)

Julius Hörger
  • 383
  • 3
  • 11
  • Thank you @Julius It helped. Could you suggest me how can i make the values displayed in centre of the progressbar, like how much is done and how much is remaining. – user9630935 May 29 '18 at 10:18