CODEWITHSUNDEEP
vaadinvaadin7
Sanyifejű
Sanyifejű

Reputation: 2740

How to increase the caption area for vaadin timeline

If I add too many/too long captions to a vaadin7 timeline, they will only be displayed partially (i.e. the part we have space for is displayed and the remainder is truncated) How can I increase this area in order to allocate enough space for all?

timeline.setGraphCaption(container, h.toString());

Upvotes: 0

Views: 236

Answers (1)

kukis
kukis

Reputation: 4634

You need to add these rules in your scss file:

  .v-timeline-widget .v-timeline-widget-modelegend{
    background: inherit;
  }

  .v-timeline-widget-legend-label{
    height: auto !important;
    white-space: normal !important;
  }

Before: enter image description here

After

enter image description here

3 points:

  1. While these rules may not met criteria of well-written CSS or good practice rules (I am looking at you !important), they do the trick. Still, better approach would be to get your hand dirty by editing Vaadin Timeline addon sources.

  2. As you surely noticed text background has changed. That's because we override default background which was designed for only one line (you should provide your own background image)

  3. Bottom of the widget is cut off by few pixels. Well, the only way to fix it is to jump into DOM and css and try fix it. Doable but I haven't tried.

Upvotes: 0

Related Questions