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());

What exactly is the question? I assume you would like to have it in one line right? Is it possible for you to set yourCellTable.setWidth("100%", true) ? This will set fixed layout but it's ... let's say too fixed then. Hovewer after that you can set widths of all columns. So are you allowed to do this? If it damages your design too much then this probably isn't the way — Miroslav, Jun 25 '13 at 09:22

jax502 · Accepted Answer · 2013-06-25T17:01:12.997

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:

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

Composite Cell width on CellTable

1 Answers1