Author Topic: https://jsfiddle.net/glt101/47m9fc8o/  (Read 692 times)

brwncald

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 16
    • View Profile
https://jsfiddle.net/glt101/47m9fc8o/
« on: April 07, 2022, 09:05:21 pm »
Hi,

I am having a problem using the freezeCols column option:

The right-most of the columns that are frozen get overlapped by the next column to the right when scrolling to the left.
See attached image and the following JSFiddle:

https://jsfiddle.net/glt101/47m9fc8o/

Cheers,
Geoff

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: https://jsfiddle.net/glt101/47m9fc8o/
« Reply #1 on: April 07, 2022, 10:20:11 pm »
Please include any theme file: https://jsfiddle.net/z9vbo25r/

brwncald

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: https://jsfiddle.net/glt101/47m9fc8o/
« Reply #2 on: April 09, 2022, 12:45:04 am »
I see.
In the Pro Tutorial page you have the PQGrid css themes marked as optional so I had not included that:

Code: [Select]
    <!--ParamQuery Grid custom theme e.g., office, bootstrap, rosy, chocolate, etc (optional)-->
    <link rel="stylesheet" href="path to custom theme pqgrid.css" />

After I added that resource (see the same JSFiddle) it overwrites the jquery-ui custom theme.
Is it possible to have a jquery-ui custom theme and still have the freezeCols option work?

Cheers,
Geoff

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: https://jsfiddle.net/glt101/47m9fc8o/
« Reply #3 on: April 11, 2022, 10:24:07 am »
Please add this after initialization of the grid.

Code: [Select]
$(".pq-cont-inner").addClass("ui-widget-content");

https://jsfiddle.net/h5mokvtb/1/

brwncald

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: https://jsfiddle.net/glt101/47m9fc8o/
« Reply #4 on: April 12, 2022, 02:29:20 am »
Thanks. That partially solved the issue.
I still had to add the following as well in a separate file:

Code: [Select]
\.pq-grid-title, .pq-group-header {
    background: #332985;
    border-color: #332985;
}
.pq-grid-row.pq-striped {
    background: #edecff;
}

.ui-widget-header {
    border: 1px solid #332985;
    background: #332985;
    color: #fff;
    font-weight: bold;
}

Cheers,
Geoff