I need to make Vaadin 8 Grid cell text wrap. I tried to follow this link in Vaadin Forum.
https://vaadin.com/forum/thread/16908210/vaadin-8-grid-wrap-long-lines
My Grid contains Strings only in every cell.
I have a StyleGenerator class like this:
public class MyGridStyleGenerator<ArrayList> implements StyleGenerator {
public String apply(Object item) {
return ".m-grid-cell-wrapper";
}
}
I am converting from Vaadin 6 so I still use old theme ("../reindeer/legacy-styles.css")
In my styles.css file, there is:
.m-grid-cell-wrapper {
word-wrap: break-word;
white-space: normal;
}
In the class that creates the Grid, I have:
Grid<List<String>> table = new Grid<>("My Test Grid");
//skip setting items code since the cell content shows up fine.
MyGridStyleGenerator style = new MyGridStyleGenerator();
table.setStyleGenerator(style);
table.setBodyRowHeight(35); // more than two lines of text height
I set each column width to a fixed value using setWidth() of Grid.Column so that more columns can be displayed in the given window.
The problem is that when the Grid is displayed, text longer than column width does not wrap.
What did I miss?
Thanks for any advice.
BTW, there is another question on this topic in Stack Overflow where the answer is to use label.setStyleName(ValoTheme.LAYOUT_HORIZONTAL_WRAPPING);
I don't have Label and don't use Valo style.
The CSS class controlling the Grid cell is .v-grid-cell, so I added the following in my styles.css file.
.v-grid-cell {
white-space: normal; }
This caused the text in Grid cell to wrap.
Related
Original Question
I want to add a loading indicator overlay to the grid.
I tried to append the overlay element to the shadow root by using the attachShadow method.
The following code works well in vaadin 22.
final Grid<String> grid = new Grid<>();
final Element element = new Element("div");
element.setText("Hello");
add(grid);
grid.getElement().attachShadow().appendChild(element);
When I execute the same code in vaadin 23 it breaks the component.
Alternative solution
I tried to extend the grid component on the client side with the following typescript code
import { Grid } from "#vaadin/grid";
export class CustomGrid extends Grid {
static get is() {
return 'custom-grid';
}
}
customElements.define(CustomGrid.is, CustomGrid);
To use my custom grid in flow, I have extended the flow Grid class and added my custom typescript code with the #JsModule annotation.
#Tag("custom-grid")
#JsModule("./src/custom-grid/custom-grid.ts")
public class CustomGrid<T> extends Grid<T> {
}
I used the following code to add my custom grid to the layout
final CustomGrid<String> grid = new CustomGrid<>();
grid.addColumn(s -> s).setHeader("Hello");
grid.setItems(List.of("Item 1", "Item 2", "Item 3"));
add(grid);
The problem
The items are not visible. There are just blank rows.
ps: extending other components like buttons or comboboxes works pretty well.
I faced the same issue with my own customization of Vaadin's Grid.
I did exactly the same as you - and it worked with v22 but it does not with v23.
Although it's a dirty hack, it works by doing the follwing:
final Grid<String> grid = new Grid<>();
add(grid);
grid.getElement().executeJs("elem = document.createElement(\"div\"); elem.innerHTML=\"Hallo\"; this.shadowRoot.appendChild(elem);");
I have something similar to this code:
TextArea textArea = new TextArea();
textArea.setSizeFull();
Panel dataPanel = new Panel("Panel", textArea);
dataPanel.setSizeFull();
textArea.setValue(... some very long text...);
The problem is that this TextArea appears without vertical scrollbar (and mouse-wheel scrolling also doesn't work), although inner text is longer than TextArea height (I can navigate lower using cursor and keyboard down arrow).
How do I enable scrolling in this component?
A bit weird, but as per the documentation if you disable word-wrapping in a text-area, you'll get the vertical scroll-bar:
Word Wrap
The setWordwrap() sets whether long lines are wrapped ( true - default) when the line length reaches the width of the writing area. If the word wrap is disabled (false), a vertical scrollbar will appear instead. The word wrap is only a visual feature and wrapping a long line does not insert line break characters in the field value; shortening a wrapped line will undo the wrapping.
The following code sample illustrates this behaviour with Vaadin 8.0.6. Please note my class extends Panel to match your sample but at this point you can eliminate it:
public class PanelWithScrollableTextField extends Panel {
public PanelWithScrollableTextField() {
TextArea textArea = new TextArea();
textArea.setWordWrap(false);
textArea.setSizeFull();
setContent(textArea);
setSizeFull();
StringBuffer buffer = new StringBuffer();
IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
textArea.setValue(buffer.toString());
}
}
Result:
P.S. I know it's a bit weird to grasp, but panels are used to scroll surfaces that are larger then the panel size, so if we'd get it working, you'd be scrolling the text area itself, not its content. You can see below a sample to better understand what I mean:
public class PanelWithScrollableTextField extends Panel {
public PanelWithScrollableTextField() {
TextArea textArea = new TextArea();
textArea.setWordWrap(false);
textArea.setHeight("500px"); // fixed size with height larger than the panel
setContent(textArea);
setHeight("100px"); // fixed height smaller than the content so we get a scroll bar
StringBuffer buffer = new StringBuffer();
IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
textArea.setValue(buffer.toString());
}
}
Result:
You can change it CSS also like below .
.v-textarea { overflow-y: auto ! important;}
I'm trying to use the md-chips directive of angular material in a single line, but when I add more chips than size of a field, the field add a line to bottom like in this image.
I think you need a CSS workaround to adapt the behaviour of md-chips in an input form.
For example you can use this CSS:
/* reduce input element (not visible till the user begins editing) width */
.md-chips .md-chip-input-container input {
max-width: 20px;
}
/* adapt input to md-chip height */
.myheight {
height: 49px !important;
}
/* adapt datepicker input to md-chip height */
.md-datepicker-input {
height: 49px;
}
Here is a demo: http://codepen.io/beaver71/pen/gPqPBW
P.S.: don't forget that docs declare:
Warning: This component is a WORK IN PROGRESS. If you use it now, it will probably break on you in the future.
I have a problem formatting toplevel-nodes in a Vaadin-Tree. I understand using the ItemStyleGenerator to set ccs-Style for particular nodes. I did this with following code:
this.setItemStyleGenerator(new Tree.ItemStyleGenerator() {
#Override
public String getStyle(Tree source, Object itemId) {
if (source.isRoot(itemId)) {
return "toplevel";
} else {
return null;
}
}
});
The CSS is as follows:
.v-tree-node-toplevel {
border: 1px solid #d8d9d9;
background: #fff;
#include border-radius(6px);
}
And the result is, that the root-node and all its child nodes have the same background-color and the border is around the toplevel- and all its child-nodes and the node icon is missing
My goal is to format just the root-node.
When i set the toplevel-style to a child node it is formatted as expected.
Can somebody help? Thanks.
Bernhard
Change your CSS to this:
.v-tree-node-caption-toplevel {
border: 1px solid #d8d9d9;
background: #fff;
#include border-radius(6px);
}
If you only want to style behind the text, and not the whole width of the tree, use this:
.v-tree-node-caption-toplevel span {
CSS stuff...
}
(The text part of the caption is contained within a span inside the v-tree-node-caption element.)
Here's a (not very detailed) explanation of what's occurring:
An expanded node inside a Vaadin tree (with children) is actually made up of about 3 distinct divs. First you have the container div, which is v-tree-node. Then you have the v-tree-node-caption which is an inner div that contains the name and icon of the node, this is probably what you want to style. Last, there is v-tree-node-children which contains all the child nodes underneath. The ItemStyleGenerator not only applies your style to the v-tree-node, but the v-tree-node-caption and v-tree-node-children as well.
This is basically how your HTML will look when you apply the toplevel style to an item:
<div class="v-tree-node v-tree-node-toplevel">
<div class="v-tree-node-caption v-tree-node-caption-toplevel">
node1, the best node!
</div> //end of caption
<div class="v-tree-node-children v-tree-node-children-toplevel">
...
Other divs (child nodes)
...
</div> //end of children
</div> // end of node
You were losing the arrow icon because it's the background image of the v-tree-node. Each v-tree-node (where canHaveChildren() == true) has a background style (transparent, with the arrow image).
.v-tree-node {
url("../reindeer/tree/img/arrows.png") no-repeat scroll 6px -10px transparent;
}
If you override the background style on a v-tree-node, you will lose the image (the arrow). What you could do instead is to use the background-color style to only override the transparent part, but as I pointed out earlier, the v-tree-node element contains both the caption and children elements, so your background color will be visible behind any child nodes (and slightly to the left, even if you style the background-color of the child node).
I have problem with ASP.NET MVC Telerik Grid.
In my grid I have comment column and some columns contains too large text.
This effects to row height. I need that all rows have same height.
How I can reduce the text? I tried to add HTML abbr, but it doesn’t work.
Best regards Paul.
Using custom formatting, you can check the length of your text, and if the text length is greater than a certain number, you can limit the length by using substring. For example, if your comment column is called "Comment", you could do something like this:
Html.Telerik().Grid(Model)
.Name("MyGrid")
.CellAction(cell =>
{
if (cell.Column.Title != null)
{
if (cell.Column.Title.Equals("Comment"))
{
if (cell.DataItem.Comment.Length > 25)
{
cell.Text = cell.DataItem.Comment.Substring(0, 25) + "...";
}
}
}
});
Update
You asked about showing the complete comment. I don't know of a simple way built into the telerik control, but you can do it using css. I am using css code from kollermedia.at, but there are lots of examples of css tooltips if you want a different style.
In your css, put something like this:
/* tooltip */
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
Then change the line in your view to this:
cell.Text = "<a class=\"tooltip\" href=\"#\">" + cell.DataItem.Comment.Substring(0, 25) + "<span>" + cell.DataItem.Name + "</span></a>";
When you hover over the shortened text, the complete text is displayed in a tooltip.