How to style GridLayout

Support
#1

How can I change the styling of rows in the gridlayout?

#2

Hi.

Let me bring an example:

  1. In my application, I have added the following gridLayout to a screen. I have specified the stylename of the component.

<grid id="grid"
        spacing="true"
        stylename="myGrid">
        <columns count="2"/>
        <rows>
         ...
         </rows>
</grid>
  1. After that, using studio, I made a theme extension in the project and added the following code to the halo-ext.scss file.

@import "../halo/halo";

/* Define your theme modifications inside next mixin */
@mixin halo-ext {
  @include halo;
  
  .myGrid {
      background-color: #166ed5;
      border: 1px solid black;
  }

  .myGrid input {
      background-color: azure;
  }
}

That was enough to style certain gridLayout component. The result is attached.

Regarding styling rows. There is no ability to style particular row in the gridLayout*, but you can style each component in it, specifying *stylenames for them.

Please see also the following documentation: Themes - CUBA Platform. Developer’s Manual.
It describes styling of CUBA applications.

Regards.

GridLayoutStyling

#3

Who would it be if I want to have odd an even rows in a different background color?

#4

You can style certain child of the gridLayout using the :nth-child() selector, but the approach is considered bad because it requires number of target child to be hardcoded.


@import "../halo/halo";

/* Define your theme modifications inside next mixin */
@mixin halo-ext {
   @include halo;
  .myGrid{
    border: 1px solid black;
  }
  
  .myGrid .v-gridlayout-slot:nth-child(2),
  .myGrid .v-gridlayout-slot:nth-child(3) {
     background-color: azure;
  }
 
  .myGrid .v-gridlayout-slot:nth-child(4),
  .myGrid .v-gridlayout-slot:nth-child(5) {
     background-color: red;
  }
}
#5

It is better to style components located in the gridLayout.

#6

Came to the same conclusion myself.
I only wanted a line to split the rows.
What I did was using label.
The label has empty value but is formatted with


.my-label {
    border-bottom: 10px solid #C0C0C0;
}

Then create a new row and put the label here and set row flex to column count.