Hi Thierry, hi all,

In bootstrap mode, especially in chrome (photo attached), the grid is not very sexy 😉
The gray is really old and I wonder about the relevance of the boxes on the left side.
All of this must be able to be improved by CSS, but could we not evolve together ?

Vincent

Hi Vincent,

Michele had a similar problem and, as the grid had only a couple of rows (just like you), he preferred generate a list in .wcHTMLgen() in lieu of the grid, as shown here.

Hopefully Michele can share his code here…

In this example, I have only two rows but in reality, grids often have much more.

Difficult to do without grids

What would you like to change? headers? line height? background?

A more flat appearance, removing the gray outlines and removing the marks on the left that appear even if deletedMark = .F.

more flat appearance, removing the gray outlines

can be done by CSS (in xxx.css) using .aw-* classes

removing the marks on the left

Currently shown by default as in VFP, we can add a awGrd.property to hide it

can be done by CSS (in xxx.css) using .aw-* classes

OK, quite a number of properties to modify

Currently shown by default as in VFP, we can add a awGrd.property to hide it

Based on deletedMark, it will be nice !

Based on .deletedMark

I think .recordMark is the exact equivalent in VFP; not sure why it was not implemented earlier… will do.

Rather delicate to manipulate ...
Below, an example before and after CSS

pretty nice, thanks for sharing… would you also share your CSS changes?

Yes, of course. It is surely perfectible ...
What bothers me a bit is that I add the !Important clause since most of the registrations are in contradiction with that generated natively by FiC

/* Grid

.aw-grid-control {
  border-color: transparent!important;
}
.aw-grid-box {
  border-color: lightgray!important;
}
.aw-hpanel-top {
  background-color: threedface!important;
}
.aw-grid-header {
  border-color: lightgray transparent lightgray lightgray !important;
  border-block-color: threedface!important;
}
.aw-grid-cell {
  border: 0px!important;
}
.aw-item-box {
  border: 1px none lightgray!important;
  font-weight: bold;
  padding: 1px 4px!important;
}
.aw-row-selector {
  display: none!important;
}
.aw-header-0 {
  margin-left: -1px!important;
}

Bonjour Vincent,

I had already improved the display of grids, but with your CSS modifications, it's even more pleasant to look at

Merci Vincent

Thanks Gilles, always nice to have a feedback !

You just need to ‘strengthen’ your selectors by adding more clauses, eg. div.bootstrap div.awgrd span.aw…

Yes. Are you considering incorporating some of these instructions into your code ?

Just double checked, .recordMark is already supported

Probably! I will have 2 sets of rules, for body.bootstrap and body:not(.bootstrap)

Great ! So, I am waiting for you job ...