Composite Cell width on CellTable

Question

I have a composite cell, which works fine, it has a textinputcell and a button cell. However when it is shown it puts the buttoncell under the text input cell, like in the picture:

Here is the implementation of my compositecel using hascells:

final HasCell<ObjetoDato,String> celda1=new HasCell<ObjetoDato,String>(){
    TextInputCell celda;

    @Override
    public Cell<String> getCell() {
        celda=new TextInputCell();
        
        return celda;
    }

    @Override
    public FieldUpdater<ObjetoDato, String> getFieldUpdater() {
        return null;
    }

    @Override
    public String getValue(ObjetoDato object) {
        //new Scripter(object,actual.getComportamiento(),true);
        return object.getValor(actual.getNombreCampo());    
    }

    
    
};                        
HasCell<ObjetoDato,String> celda2=new HasCell<ObjetoDato,String>(){
    ButtonCell celda;

    @Override
    public Cell<String> getCell() {
        celda=new ButtonCell();
        
        return celda;
    }

    @Override
    public FieldUpdater<ObjetoDato, String> getFieldUpdater() {
        return new FieldUpdater<ObjetoDato, String> (){
            
            @Override
            public void update(int index,ObjetoDato object, String value) {
                new Seleccionador(actual.getClaseRelacion(), actual.getNombreCampo(),object.getValor(actual.getNombreCampo()), object.getIdRelacion(actual.getNombreCampo()), object,tabla,object,actual.getComportamiento());
            
            }
        };
    }

    @Override
    public String getValue(ObjetoDato object) {
        
        return "...";
    }
    
    
};
//Composite
List<HasCell<ObjetoDato,?>> celdas = new LinkedList<HasCell<ObjetoDato,?>>();
celdas.add(celda1);
celdas.add(celda2);
CompositeCell<ObjetoDato> cell = new CompositeCell<ObjetoDato>(celdas);

Column<ObjetoDato,ObjetoDato> columna = new Column<ObjetoDato,ObjetoDato>(cell) {
        @Override
                public ObjetoDato getValue(ObjetoDato object) {
                    return object;
                }
};

//columna.setCellStyleNames("columna3puntos");
tabla.agregarColumna(columna,actual.getCaption());

Answer 1

You may want to take a look at how your render() method. Also if your internal cells use block elements like <div>. It will be displayed vertically. So you may change that to <span>. Or you can add style="float:left;" to your div's CSS. I had something similar to yours. But mine was a custom cell of a 2-row table with 1 column like below:

+----+
|    |
+----+
|    |
+----+

I used a CellList to hold a number of these custom cells. The problem with CellList is that it displays them vertically. So I had to override the CellList for it to display horizontally. I modified the CellList's template to have float:left and my cells started rendering horizontally just like below:

+----+     +----+   +----+
|    |     |    |   |    |
+----+     +----+   +----+
|    |     |    |   |    |
+----+     +----+   +----+