How to use Css to make CellList flow Horizontally rather than Vertically? (GWT & CSS)

Question

I have a need to use a CellList that flows horizontally, like this:

This is traditional celllist (showing vertically)
Page
1
2
3
....

I want it to show horizontally like this:
Page 1 2 3 ......

I found a solution, but some people said that this solution is not so good cos it modifies the html tag (by replacing all <div> to <span>) of the Widget.

public class HorizontalCellList<T> extends CellList<T> {

  public HorizontalCellList(Cell<T> cell) {
    super(cell);
  }

  @Override
  protected void renderRowValues(
      SafeHtmlBuilder sb, List<T> values, int start, SelectionModel<? super T> selectionModel) {
    SafeHtmlBuilder filteredSB = new SafeHtmlBuilder();
    super.renderRowValues(filteredSB, values, start, selectionModel);
    SafeHtml safeHtml = filteredSB.toSafeHtml();
    String filtered = safeHtml.asString().replaceAll("<div", "<span").replaceAll("div>","span>");
    sb.append(SafeHtmlUtils.fromTrustedString(filtered));
  }
}

Then they suggest me to use Css to achieve the same result. I tried but none of them works.

.horizontalCellList { display: inline; } --> it doesn't work
.horizontalCellList { display: inline; float:left; } --> it doesn't work either
myCellList.getElement().getStyle().setDisplay(Display.INLINE_BLOCK); --> doesn't work
myCellList.getElement().getElementsByTagName("li").getItem(i).getStyle().setDisplay(Display.INLINE);also doesn't work

For people who do not know GWT but know CSS/Html, then here is the Html code of CellList, i don't see any <span> there, they only have <div>. The trick here is how to make all the <div> turn to <span> by JUST using CSS.

<div class="GNOXVT5BEB" __gwtcellbasedwidgetimpldispatchingblur="true" __gwtcellbasedwidgetimpldispatchingfocus="true">
    <div></div>
    <div>
         <div aria-hidden="true" style="width: 100%; height: 100%; padding: 0px; margin: 0px; display: none;">
             <div aria-hidden="true" style="width: 100%; height: 100%; display: none;"></div>
         </div>
         <div aria-hidden="true" style="width: 100%; height: 100%; padding: 0px; margin: 0px; display: none;">
              <div aria-hidden="true" style="width: 100%; height: 100%; display: none;">
              </div>
         </div>
     </div>
</div>

Can anyone provide a good solution?

Answer 1

Based on what Thomas suggested, this is a complete solution

1- myCellList.css

.cellListWidget {

}

.cellListEvenItem {
  display: inline-block;
  cursor: pointer;
  zoom: 1;
}

.cellListOddItem {
  display: inline-block;    
  cursor: pointer;
  zoom: 1;
}

.cellListKeyboardSelectedItem {
  background: #ffc;
}

 @sprite .cellListSelectedItem {
  gwt-image: 'cellListSelectedBackground';
  background-color: green;
  color: white;
  height: auto;
  overflow: visible;
}

2- MyCellListResources.java

import com.google.gwt.user.cellview.client.CellList;
import com.google.gwt.user.cellview.client.CellList.Style;

public interface MyCellListResources extends CellList.Resources{
     @Source({"myCellList.css"})
     @Override
     public Style cellListStyle();
}

3- YourMainPresenter.java

CellList<String> myHorizontalCellList = new CellList<String>(myTextCell, GWT.<MyCellListResources> create(MyCellListResources.class));

The code was tested & met your requirement.

Answer 2

It's not the .horizontalCellList that you want display: inline-block, it's the inner <div> elements for each item. The selector needs to be:

.horizontalCellList .gwt-CellList-cellListEvenItem, .horizontalCellList .gwt-CellList-cellListOddItem

assuming you @Imported CellList.Style on your CssResource.

(disclaimer: I only tried that in a completely re-defined custom CellList.Style, but there's no reason it wouldn't work with @Import and a descendant selector)