CSS Styles for alternate rows plus selected

Classic Servoy
1

I have styled a table view form with odd and even row background color

.svy-form .ui-grid-row:nth-child(odd) .ui-grid-cell {
	background-color: #ffffff;
}

.svy-form .ui-grid-row:nth-child(even) .ui-grid-cell {
	background-color: #f1f5fa;
}

This works fine but there is an unexpected fine (1px?) grey line on top of each row. It is a bit darker grey on the even rows than on the odd rows. Interestingly, the line does not appear on a checkbox field (field titled Disp.). See attached image. The line does not come from field border style.

I can’t find out where this grey lines comes from. Anyone having seen this?

Servoy 8.1.2
Java 1.8.0_121

Best regards,

odd even.png
odd even.png435×224 3.05 KB

2

Maybe it comes from the style class applied to text fields? I suggest you open the inspector in the browser and see what style classes are applied.

3

Thanks for the hint patrick. There is no such definition in the field style class. I also can’t find it in the browser code, but that is quite hard to get a bit of an overview. Any other idea where I could look at?
From your answer I assume you don’t have (see) these lines on fields and don’t have it on checkbox fields in table view forms?

patrick:
Maybe it comes from the style class applied to text fields? I suggest you open the inspector in the browser and see what style classes are applied.

Thanks and regards

4

I found that if I apply to the .ui-grid-row… as below

.ui-grid-row:nth-child(even) .ui-grid-cell {
	border-color: blue;
	border-style: solid;
	border-width: 1px 0px 0px 0px;

the top grey line is still there, inside (below) the blue one. So the question ist: what is inside the alternating row and how can I access it? I assume it must be the cell, but don’t know how to style a cell.

patrick:
Maybe it comes from the style class applied to text fields? I suggest you open the inspector in the browser and see what style classes are applied.

5

I would like to ask if nobody is seeing this effect of having a line on the even rows without specifying it? Any hint is appreciated.

My css code is as following:

...
.ui-grid-row-selected div.ui-grid-cell {
	background-color: #b5d5ff !important;
}

.ui-grid-row:nth-child(odd) .ui-grid-cell {
	background-color: #ffffff;
	border-style: none;
}

.ui-grid-row:nth-child(even) .ui-grid-cell {
	background-color: #f1f5fa;
	border-style: none;
}
...

Regards,

6

Robert,

As Patrick said, you should look in browser dev tool to see which element has a top/bottom border and where that comes from. Start from input and go up in hierarchy until you find it. Without that cannot help too much. Or, if you have a sample, I can have a quick look.

Regards

7

Hi, I have a similar problem:
I’m trying to use odd/even logic on the NGClient using this css code:

.svy-form .ui-grid-row:nth-child(odd) .ui-grid-cell {
   background-color: #ff0000;
}

.svy-form .ui-grid-row:nth-child(even) .ui-grid-cell {
   background-color: #ffffff;
}

The problem is that exists a “form-control” class that overwrites the above code.
By using the chrome dev tools, I find out that it’s a bootstrap class.

How can I avoid that this class takes over what I defined on the above code?

problem.PNG
problem.PNG1884×154 9.36 KB