Grid background color issue

[SeanTyree]

I am noticing an issue with the background colors on the grid widget. If the row height is set to a value greater than 25, the selection background color only display in the upper 25 pixels of the grid row.

I have attached a json dump that demonstrates the problem. (version 4.6.5)

Thanks,
Sean

[David]

The problem here is that the built-in styling for the 'ice blue' grid uses an image to provide the mouse over effect. The image is 25px tall, and is not designed in such a way that it would look good if it were repeated vertically down a taller grid cell.

You can get around this by doing a bit of your own styling on the grid. You could do that by adding a 2nd CSS class to the grid, for example 'myClass'.

Then you could use code like this in your style sheet to override the hover effect:

Code: Select all

.myClass .hover {

    background-image: none;
    background-color: #FFE088;

}

That should take off the image and instead just assign a similar color to the background of the cell.

[David]

Actually I've had another look at this and what I mentioned above is not correct, please disregard that, sorry for any confusion.

Here is the problem...

Normally the Ice Blue grid's hover CSS applies an orange background color to the cell that blends nicely with the 25px image, so that you get the entire cell highlighted.

What's preventing this is that you have hard coded cell background colors using the 'even row background' and 'odd row background'. Anytime that you set styling properties in the designer, this hard codes them in such a way that they cannot be overridden with CSS. Try removing those property settings and you should see the entire row is highlighted.

To get both your custom background color and the highlight effect working you'd have to apply your background color with CSS, instead of designer properties. This way it can be overridden by the hover CSS.

If you want to make ALL 'Ice Blue' grids look like in your example, you can use this CSS in your style sheet:

Code: Select all

.ice-blue-grid .odd, .ice-blue-grid .even {

  background-color: #F5F2E9;

}

If you want to use default styling for most Ice Blue grids, and you want only selected ones to look as in your example, you can attach an additional CSS class to the grid (example 'myClass') and then use this CSS:

Code: Select all

.myClass .odd, .myClass .even {

  background-color: #F5F2E9;

}

[SeanTyree]

Thanks David,

I did notice that when I removed the background color, the selected row went back to normal. We will probably create a custom grid for this.

Sean