Results 1 to 4 of 4

Thread: Align cells in a grid

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    14

    Default Align cells in a grid

    How to align a checkbox in a column?

    Here is code snippet that doesn't work:

    Code:
    ColumnConfig<Inventory, Boolean> config = new ColumnConfig<Inventory, Boolean>(props.fiscal(), 50, RES.gridInventoryFiscal());
    config.setSortable(false);
    CheckBoxCell cell = new CheckBoxCell();
    cell.setReadOnly(true);
    config.setCell(cell);
    config.setAlignment(HasHorizontalAlignment.ALIGN_CENTER);

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    14

    Default

    Quick workaround, but maybe a better solution available:

    Code:
            CheckBoxCell cell = new CheckBoxCell(new CheckBoxDefaultAppearance() {
                @Override
                public void render(SafeHtmlBuilder sb, Boolean value, CheckBoxCell.CheckBoxCellOptions options) {
                    String checkBoxId = XDOM.getUniqueId();
    
    
                    String nameParam = options.getName() != null ? " name='" + options.getName() + "' " : "";
                    String disabledParam = options.isDisabled() ? " disabled=true" : "";
                    String readOnlyParam = options.isReadonly() ? " readonly" : "";
                    String idParam = " id=" + checkBoxId;
                    String typeParam = " type=" + type;
                    String checkedParam = value ? " checked" : "";
    
    
                    sb.appendHtmlConstant("<div style=\"position: relative;left: 0;top: 0;zoom: 1;white-space: nowrap;text-align: center;\">");// modified line
                    sb.appendHtmlConstant("<input " + typeParam + nameParam + disabledParam + readOnlyParam + idParam + checkedParam + " />");
                    sb.appendHtmlConstant("<label for=" + checkBoxId + " class=" + style.checkBoxLabel() + ">");
                    if (options.getBoxLabel() != null) {
                        sb.appendHtmlConstant(options.getBoxLabel());
                    }
                    sb.appendHtmlConstant("</label>");
                }
            });

  3. #3
    Sencha User
    Join Date
    Nov 2013
    Posts
    2

    Default Another workaround

    ValueBaseField.css contains
    HTML Code:
    .wrap {  position: relative;  left: 0;  top: 0;  zoom: 1;  white-space: nowrap;  text-align: left;}
    Create custom css without "text-align"
    HTML Code:
    .checkBoxAppearance {    position: relative;    left: 0;    top: 0;    zoom: 1;    white-space: nowrap;}
    Create class
    Code:
    public class CheckBoxAppearance extends CheckBoxDefaultAppearance {
    	@Override
    	public void render(SafeHtmlBuilder sb, Boolean value, CheckBoxCell.CheckBoxCellOptions options) {
    		String checkBoxId = XDOM.getUniqueId();
    		String nameParam = options.getName() != null ? " name='" + options.getName() + "' " : "";
    		String disabledParam = options.isDisabled() ? " disabled=true" : "";
    		String readOnlyParam = options.isReadonly() ? " readonly" : "";
    		String idParam = " id=" + checkBoxId;
    		String typeParam = " type=" + type;
    		String checkedParam = value ? " checked" : "";
    		sb.appendHtmlConstant("<div class=checkBoxAppearance>");
    		sb.appendHtmlConstant("<input " + typeParam + nameParam + disabledParam + readOnlyParam + idParam + checkedParam + " />");
    		sb.appendHtmlConstant("<label for=" + checkBoxId + " class=" + style.checkBoxLabel() + ">");
    		if (options.getBoxLabel() != null) {
    			sb.appendHtmlConstant(options.getBoxLabel());
    		}
    		sb.appendHtmlConstant("</label>");
    		sb.appendHtmlConstant("</div>");
    	}
    }
    Use this class
    Code:
    CheckBoxCell checkBoxCell = new CheckBoxCell(new CheckBoxAppearance());

  4. #4
    Sencha Premium Member
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    13

    Default

    Thanks, I tried this and it works, even though the checkbox is not perfectly centered (it appears slightly on the left side of the column).

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •