slodeveloper slodeveloper - 9 days ago 5
CSS Question

How to set size of a checkbox in table vaadin

I have column that contains default vaadin checkbox in my vaadin table. My table width is 100%, I have also column that contains embedded image so the height of row is 90 px.

Vaadin version is 7.6.3.

I want to set height and width of checkbox to about 60px.

How do I achieve that?

My java code:

CheckBox cboxone=new CheckBox();
cboxone.setConvertedValue(true);
cboxone.setHeight("60px");
cboxone.setWidth("60px");
cboxone.setStyleName("csmy");


I set height and width to 60px. I apply css style (style name is csmy) to checkbox. I try following css styles:

@import "../valo/valo.scss";

@mixin blabla{
@include valo;

//here i put my css styles

.csmy .v-checkbox > label{

height:60px !important;
width:60px !important;
}

.csmy .v-checkbox{

height:60px !important;
width:60px !important;
}

.csmy{
height:60px !important;
width:60px !important;
}

.csmy .v-checkbox > input{

height:60px !important;
width:60px !important;
}
}


But still nothing happen. Checkbox is still the same size as before.

Answer

In the checkbox.scss of the valo theme you see this:

/**
 * Outputs the selectors and properties for the CheckBox component.
 *
 * @param {string} $primary-stylename (v-checkbox) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group checkbox
 */
@mixin valo-checkbox ($primary-stylename: v-checkbox, $include-additional-styles: contains($v-included-additional-styles, checkbox)) {

  .#{$primary-stylename} {
    @include valo-checkbox-style;
  }


  @if $include-additional-styles {
    .#{$primary-stylename}-small {
      @include valo-checkbox-style($unit-size: $v-unit-size--small);
      font-size: $v-font-size--small;
    }

    .#{$primary-stylename}-large {
      @include valo-checkbox-style($unit-size: $v-unit-size--large);
      font-size: $v-font-size--large;
    }
  }
}

You see the both variants large / small styles. Basically it is using the $v-font-size value, so just define another checkbox style as huge for example and use your 60px size for the variable and it should work.

So in your theme scss file add these lines and use the style hugefor your checkboxes

  $v-unit-size--huge: 60px;
  $v-font-size--huge: 60px;

  // Insert your own theme rules here
  .v-checkbox-huge {
  @include valo-checkbox-style($unit-size: $v-unit-size--huge);
      font-size: $v-font-size--huge;
    }

And in the java code:

    CheckBox cb1= new CheckBox();
    cb1.addStyleName("huge");
Comments