I have played around with a layout issue we've been meaning to change forever, and i can't get it to work.
USECASE:
In a listgrid cell, we are displaying an icon. It is centered in the cell. See example below. We want to be able to align it to the top or the bottom(and left/right) of the inside of the cell, depending on the situation.
PROBLEM:
I can't get it to work. I'm working with a cell formatter, and i have used Canvas.imgHTML in the past. Now i've tried lots of different stuff - putting my own img code with vertical-alignment, putting a div around with vertical alignment and various other things.
IT seems that listgrid adds a div around my content called "presentation", which wraps the image, meaning that the height becomes the same as the image. I then hard-coded the height of the div around the img to same as grid, which made the "presentation" div the same as the listgrid cell height and thus the image appeared at the top. But the vertical-alignment doesn't seem to work at all if i instead want the image to appear at the bottom of the cell.
QUESTION:
How can i move around a, for example 20X20 image in a cell with height say 100 so that i can control where in the cell it is aligned? Pointers appreciated and test code below:
USECASE:
In a listgrid cell, we are displaying an icon. It is centered in the cell. See example below. We want to be able to align it to the top or the bottom(and left/right) of the inside of the cell, depending on the situation.
PROBLEM:
I can't get it to work. I'm working with a cell formatter, and i have used Canvas.imgHTML in the past. Now i've tried lots of different stuff - putting my own img code with vertical-alignment, putting a div around with vertical alignment and various other things.
IT seems that listgrid adds a div around my content called "presentation", which wraps the image, meaning that the height becomes the same as the image. I then hard-coded the height of the div around the img to same as grid, which made the "presentation" div the same as the listgrid cell height and thus the image appeared at the top. But the vertical-alignment doesn't seem to work at all if i instead want the image to appear at the bottom of the cell.
QUESTION:
How can i move around a, for example 20X20 image in a cell with height say 100 so that i can control where in the cell it is aligned? Pointers appreciated and test code below:
Code:
public void onModuleLoad() {
ListGrid grid = new ListGrid();
grid.setCellHeight(70);
ListGridField id = new ListGridField("id");
ListGridField name = new ListGridField("name");
name.setValign(VerticalAlignment.TOP);
grid.setFields(id, name);
//name.setCellFormatter((o, listGridRecord, i, i1) -> Canvas.imgHTML("/images/icon.png", 0, 0, "alt", "style='width:20px;height:20px;align:middle;vertical-align:top'", null));
name.setCellFormatter((o, listGridRecord, i, i1) -> {
return "<div style='vertical-align:bottom;height:70px;border:1px solid red;' ><img src ='/images/icon.png' style='width:20px;height:20px;align:middle;vertical-align:bottom'/></div >";
});
Record data = new Record();
data.setAttribute("id", "1");
data.setAttribute("name", "Banana");
grid.setData(new Record[]{data});
RootPanel.get().add(grid);
}
Comment