CSS Styles for alternate rows plus selected

Forum to discuss the new web client version of Servoy.

CSS Styles for alternate rows plus selected

Postby huber » Tue Apr 04, 2017 9:38 am

I have styled a table view form with odd and even row background color
Code: Select all
.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,
You do not have the required permissions to view the files attached to this post.
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 312
Joined: Mon May 14, 2012 11:31 pm

Re: CSS Styles for alternate rows plus selected

Postby patrick » Tue Apr 04, 2017 10:59 am

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.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3648
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: CSS Styles for alternate rows plus selected

Postby huber » Fri Apr 07, 2017 9:15 am

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 wrote: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
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 312
Joined: Mon May 14, 2012 11:31 pm

Re: CSS Styles for alternate rows plus selected

Postby huber » Fri Apr 07, 2017 10:42 am

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

Code: Select all
.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 wrote: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.
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 312
Joined: Mon May 14, 2012 11:31 pm

Re: CSS Styles for alternate rows plus selected

Postby huber » Mon Apr 10, 2017 9:59 am

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:
Code: Select all
...
.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,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 312
Joined: Mon May 14, 2012 11:31 pm

Re: CSS Styles for alternate rows plus selected

Postby lvostinar » Mon Apr 10, 2017 1:45 pm

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
Laurian Vostinar
Servoy
lvostinar
 
Posts: 1049
Joined: Tue Feb 19, 2008 10:53 am

Re: CSS Styles for alternate rows plus selected

Postby marco.rossi » Wed Jul 11, 2018 5:38 pm

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

Code: Select all
.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?
You do not have the required permissions to view the files attached to this post.
Marco Rossi
Senior Analyst Developer
Freelance Consultant

IT Manager @Mantho
Webmaster @Sitoliquido
marco.rossi
 
Posts: 47
Joined: Sun Apr 12, 2015 9:33 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 3 guests