CODEWITHSUNDEEP
vaadinvaadin8
Kumar
Kumar

Reputation: 511

Remove spacing between the first row and second row in the Gridlayout

Thank you very much for your help in advance.

Let me explain the problem,

I have grid layout where I am adding the labels in the first row (its called header row). In the next 5 rows, I am adding text field, combo and date fields.

The problem I am facing is, I would like to remove the space between header(first) row and second row and continue to have default space from second row to the last rows. I have highlighted the space as red line in the snapshotenter image description here

Please find the snapshot in attachment. Any hints, please advise.

Upvotes: 3

Views: 969

Answers (2)

tremendous7
tremendous7

Reputation: 751

if the columns have fixed width you could create 2 GridLayouts one for the header and one for the content. Both of them should have no margin and the layout that contains them should have no spacing.

Upvotes: 0

anasmi
anasmi

Reputation: 2652

As I've mentioned in the comments, position of a component in a GridLayout defined by a top value in css. So you would need to change it if you want to re-position(remove space, in this case) an element. The problem here is that

  • GridLayout not necessary starts from top, so you would need to figure out a correct value for a top,
  • and then you would need to differentiate a correct component(label in this case) using :n-th child, since a class name applied to a component, is not propagated to a parent's v-gridlayout-slot.

enter image description here

As for an alternative, you could add a common styleName to all components (except labels) and using this style set margins(left, right, bottom)to all the components. (In the example below used a pink color to verify styles are applied.)

In this scenario, output is like this: enter image description here

The css part:

.addPadding{
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    background-color: pink;
  }

Code used:

 setContent(addGridLayout())
  ////
 private GridLayout addGridLayout(){
        // Create a 4 by 4 grid layout.
        GridLayout grid = new GridLayout(4, 4);
        //grid.setSpacing(true);
        grid.addStyleName("example-gridlayout");

// Fill out the first row using the cursor.
        for (int i = 0; i < 4; i++) {
            Label l=new Label("Col " +
                    (grid.getCursorX() + 1));
            grid.addComponent(l);
            grid.setComponentAlignment(l,Alignment.BOTTOM_CENTER);
        }

    // Fill out the first column using coordinates.
        for (int i = 1; i < 4; i++) {
            TextField x=new TextField();
            x.addStyleName("addPadding");
            grid.addComponent(x, 0, i);
        }

    // Fill out the secondcolumn using coordinates.
        for (int i = 1; i < 4; i++) {
            TextField x=new TextField();
            x.addStyleName("addPadding");
            grid.addComponent(x, 1, i);
        }

    // Fill out the third column using coordinates.
        for (int i = 1; i < 4; i++) {
            DateField x=new DateField();
            x.addStyleName("addPadding");
            grid.addComponent(x, 2, i);
        }

    // Fill out the third column using coordinates.
        for (int i = 1; i < 4; i++) {
            ComboBox x=new ComboBox<String>();
            x.addStyleName("addPadding");
            grid.addComponent(x, 3, i);
        }
        return  grid;
    }

Upvotes: 1

Related Questions