Remove Grid Lines

[MikeC]

I know this has been asked - and answered - before. I need to remove all the internal lines from a grid - i.e. the individual cell boundaries. Unfortunately, I can't quite understand the answer (to use custom CSS) as I a) don't know which class to override and b) don't know where to put any code, exactly. I've looked at the two examples until I'm cross-eyed, but could really, really do with another (easier for me to understand!)example .

[Alexander Bulei]

Hi MikeC,

Which grid lines? rows? for what?

Best Regards.

[MikeC]

The cell boundaries. Each cell has an icon and it would look a lot nicer without being inside a "box". So - eliminate the row lines and the column lines.

[Alexander Bulei]

Hi,

viewtopic.php?f=34&t=3119&p=15572&hilit=lines#p15572

Best Regards,

[MikeC]

Yes, that's one of the posts I was referring to. I wonder if it would be possible for a more specific example - or just indicate what class the grid actually is so as to override it, as wading through the existing CSS is rather a gargantuan task.....

[Alexander Bulei]

Hi MikeC,

Add the css class to grid (css property):

Code: Select all

IWCGJQGrid1.Css:= 'my-grid';

Then, you need create your own custom style file (use the topics refs).

Add this css code:

css code

.my-grid .ui-jqgrid tr.ui-row-ltr td{
  border-width: 0;
}

Best Regards.

[MikeC]

Fantastic! I can hardly believe it worked . Thanks so much. I'm now left with the external border around the whole grid..... that appears to need something else in the CSS to get rid of it. Would you have any suggestions for that, so I can finally put this bit to rest?

[Alexander Bulei]

Hi MikeC,

Here you have:

css code

.my-grid-css .ui-jqgrid{
  border: 0;
}

Best Regards.

[MikeC]

That's it! Brilliant. Thank you so much. I really need to find a book on the CSS used in JQuery........

[bob9999]

Hi there. The vertical lines are also still in the columns headers. Is there a way to also get rid of those too? Thanks for this code! Works like a charm and now I see how to customize the grid look. Cheers!