According to this question
show highcharts node text from beginning if the text is to long
it is possible to use dataLabels.nodeFormat to display only the name which is correct. But the text stands all in one line, and you cant read the whole text "Merkmale | Makro zur Prüfung" because it gets cut off in the end. If you don't use datalabels.nodeFormat the text will be wrapped inside the label automatically. Is there any solution for this?
I think that using this CSS config is a solution to your issue:
.highcharts-data-labels span {
word-break: break-word !important;
white-space: normal !important;
}
Demo: https://jsfiddle.net/BlackLabel/36y52qcf/
Related
Does anyone maybe have an example of a LitRenderer with multiple lines of potentially wrapped text in a vaadin grid please?
All the examples in the documentation just have a bold line and a small single line of text underneath. I have tried to create a bold line and then a multi line text paragraph underneath it, but I cant get the grid to render this properly.
The text should ideally change width responsively with flex grow, wrap accordlingly and potentially truncate if no space is available.
Edit:
I think I got this working as follows:
grid.addColumn(TemplateRenderer.<SubProductTypeOption>of("""
<vaadin-vertical-layout style="line-height: var(--lumo-line-height-m); height: 175px; cursor: pointer;">
<span> [[item.name]] </span>
<span style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color); white-space:normal;">[[item.description]]</span>
</vaadin-vertical-layout>
""")
.withProperty("name", SubProductTypeOption::getName)
.withProperty("description", SubProductTypeOption::getDescription)
).setFlexGrow(1);
Seems to work so far...
In Vaadin 13, I have a grid in which 80% of the content does NOT fill in the cell, so Vaadin 13 intelligently truncates the cell and adds ellipses to indicate that the field is truncated.
However, is there any way in which the ellipse can appear on the LEFT part of the text, so the user can always see the "suffix/ending" portion of the cell rather than the beginning of the cell field?
(In case you're curious as to why we need this: the cell contains the "full path" information for various files, but in 90% of the cases, the beginning part of the filepath is always identical, eg "C:/Windows/system32/folder 1/folder 2" etc. But the suffix tends to be unique, so we'd rather show the suffix.)
direction: rtl; should address the problem, as suggested here : I need an overflow to truncate from the left, with ellipses
It seems to work fine with my example:
Styles under shared-styles.html:
<dom-module id="my-grid-theme" theme-for="vaadin-grid">
<template>
<style>
[part~="cell"].truncateLeft {
background: rgb(245, 245, 255);
direction: rtl;
}
</style>
</template>
</dom-module>
This is a column definition:
grid.addColumn(string->"Loooooooooooooooooooooooong test").setHeader("column 6").setWidth("45px").setClassNameGenerator(item->"truncateLeft");
And this is the final result:
[
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());
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:
After
3 points:
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.
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)
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.
I need to create a a 2x2 grid for a mobile website where the cells are text areas. The problem is that when I do this there doesn't seem to be a way where the text boxes all join together at the inner-most corner. All I am able to achieve is two separate text boxes on top of two other separate text boxes none of which are touching vertically of horizontally. I have tried to manipulate the margins, padding, and borders, but nothing works. Thanks for your help!
Working example: http://jsfiddle.net/Gajotres/cGt2J/
CSS used:
.ui-input-text {
border-radius: 0 !important;
margin:0 !important;
}
When putting multiple charts tooltips from upper charts are hidden behind others.
I found some tips on how to it but nothing helped.
Is there anyway to keep tooltips on top of charts?
The example is here: http://jsfiddle.net/Zw3uM/
Thanks a lot!
This is pure html : Any div element loaded after ( meaning appearing after on the html page) will always be in front.
In order to get the first chart tooltip be in front of the second : load the second in first and set its y position on the page using an absolute or relative position in css :
I've change their order, putting the container2 in first in html:
<div id="container2" style="height: 200px"></div>
<div id="container1" style="height: 200px"></div>
Then set the position of container2 to be under the first one (thanks to the top style attribute) :
div[id="container2"] {
position:absolute;
top:200px;
}
Here is the result : http://jsfiddle.net/Zw3uM/3/
You can use tooltip pisitioner:
http://api.highcharts.com/highcharts#tooltip.positioner
The problem is due to each highchart container having its own stacking context. This is because the highcharts-container has both position: relative and z-index: 0 (css dynamically applied by the highcharts library).
So the z-index of the tooltip has meaning only in its parent highchart container.
To fix this we need to override the (z-index: 0) rule for the highcharts-container using the following:
.highcharts-container
{
z-index: auto !important;
...
}
This way all hightcharts-containers & their children would share the same stacking context and their z-indices would apply the desired effect.
You can check the fix here: http://jsfiddle.net/w5bLo1cw/4/