Open javier-godoy opened 4 years ago
Blocked by #5
Vaadin 14.3.1 / chipfield 2.0.2-SNAPSHOT
ChipField<String> chf = new ChipField<>("Select", "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune");
chf.setClosable(true);
add(new Span("(Type UR for: Mercury, Saturn, Uranus)"));
Grid<List<String>> grid = new Grid<>();
grid.addColumn(list->list.isEmpty()?"Click me!":list.stream().collect(Collectors.joining(", "))).setEditorComponent(chf);
grid.getEditor().setBinder(new Binder<>());
grid.addItemClickListener(ev->grid.getEditor().editItem(ev.getItem()));
grid.setItems(Arrays.asList(new ArrayList<>()));
add(grid);
I've done some testing and it seems this issue happens because Grid's cell has a overflow:hidden
style rule. A possible workaround will be to add a style to the column that will be containing the chip. This could be achieved by defining a new css file for grid and setting a new class to the column using setClassNameGenerator
method. If we take the previous example, it could be something like this:
@CssImport(value = "./styles/vaadin-grid-cell-with-overflow.css", themeFor = "vaadin-grid")
public class MainView extends VerticalLayout {
public MainView() {
ChipField<String> chf = new ChipField<>("Select", "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune");
chf.setClosable(true);
add(new Span("(Type UR for: Mercury, Saturn, Uranus)"));
Grid<List<String>> grid = new Grid<>();
Column chipColumn = grid.addColumn(list -> list.isEmpty() ? "Click me!" : list.stream().collect(Collectors.joining(", "))).setEditorComponent(chf);
chipColumn.setClassNameGenerator(c -> "overflow-visible-on-edit");
grid.getEditor().setBinder(new Binder<>());
grid.addItemClickListener(ev -> {
grid.getEditor().editItem(ev.getItem());
});
grid.setItems(Arrays.asList(new ArrayList<>()));
add(grid);
}
}
and the syle file will need to contain something like:
:host [part~="cell"].overflow-visible-on-edit ::slotted(vaadin-grid-cell-content) {
overflow: visible;
}
That workaround would be even better if https://github.com/vaadin/web-components/issues/750 were implemented. (Otherwise, the cell overflows even when it's not in edition mode.)
I think this may be an issue with the client-side component, since it renders the dropdown inside of the shadow root.
Other working components such as vaadin-combo-box
don't have this issue, but they render the dropdown in an overlay.
I would keep this issue open for further consideration.
From thread in Vaadin Directory, Julien Nicoulaud wrote:
I can't find a way to use this component inside a grid cell, the dropdown menu always gets clipped at the cell boundary even if I use a global CSS rule
* {overflow: visible;}.