Background color for gridlayout slot

Vaadin 6 / 7 / 8
1

Hello. I don’t know how to make background color for current slot of grid layout. When I set it, I get background color of full layout. Help me, pls.

2

Hello : )
You can set a color to an exact part/ slot of GridLayout by getting component from the it (using slot’s postion there) and adding styleName to it.
Something like this:
grid.getComponent(1, 1).addStyleName(“yellowColor”);

and in SCSS file just write:
.yellowColor{
background: yellow;
}

Hopefully, it will help you : )

27729.jpg

3

Thanks, it works)
And maybe you could help me again. I have a problem with aligment. In gridlayout I have 2 row with labels, and when I add in code

for (int col = 0; col < grid.getColumns(); col++) { for (int row = 0; row < grid.getRows(); row++) { final Component c = grid.getComponent(col, row); grid.setComponentAlignment(c, Alignment.TOP_CENTER); } } it works.
But when I add the third row, which consist of button, all crash.

4

What do you mean by adding? Adding to gridLayout itself or adding aligment to the third row?
And, if it’s possible, can you share the code, where you create GridLayout and rows.
I will try to solve your issue : )

5

I hope what you might)

public static HorizontalLayout usersAndMonthPanel(final YearMonth yearMonthObject) {
        final DateFormatSymbols dfs = new DateFormatSymbols(Locale.ENGLISH);
        final String weekDays = dfs.getWeekdays();
        Calendar calendar;
        int dayOfWeek;
        final int numberOfDays = yearMonthObject.lengthOfMonth();
        final VerticalLayout userList = UsersStatusLayout.middleLayout();
        final GridLayout date = new GridLayout(numberOfDays, 3);
        for (int i = 0; i < numberOfDays; i++) {
            // Minus for month 'cause getMonthValue returns from 1 to 12, but
            // month in GregorianCalendar begins since 0
            calendar = new GregorianCalendar(yearMonthObject.getYear(), yearMonthObject.getMonthValue() - 1, i + 1);
            dayOfWeek = calendar.get(Calendar.DAY_OF_WEEK);
            date.addComponent(new Label(weekDays[dayOfWeek]
.substring(0, 1)), i, 0);
            date.addComponent(new Label(String.valueOf(i + 1)), i, 1);
            date.addComponent(new Button("_"), i, 2);
        }
        date.setSizeFull();
        for (int col = 0; col < date.getColumns(); col++) {
            for (int row = 0; row < date.getRows(); row++) {
                final Component c = date.getComponent(col, row);
                date.setComponentAlignment(c, Alignment.TOP_CENTER);
            }
        }
        final HorizontalLayout horizontalLayout = new HorizontalLayout(userList, date);
        horizontalLayout.setSizeFull();
        return horizontalLayout;
    }
6

Hello again : )
I have done it in this way:
So,

  1. Button ab = new Button(“_”);
    ab.setSizeFull();
    ab.setHeight(“25px”);
    date.addComponent(ab, i, 2);

those replace this line:

date.addComponent(new Button(“_”), i, 2);
2.
Add to you scss file:
.v-button{
padding:0px;
}

  • You can just add a specific style name, if you don’t want this to affect all the buttons used in a project. Like
    ab.addStykeName(“nonePadding”);
    and in scss
    .nonePadding{

    padding:0px;
    }
    You can see a result in the attachment.
    Hopefully, it will help you and resolve your issue : )
    27730.jpg

7

Thanks a lot :slight_smile: