How to center align onDemandGrid headers

[GregRieck]

Hello,

I'm using WAB 2.2 with the Jewelry Box theme and I am using dgrid's onDemandGrid and would like to center align specific column headers but not all headers in a grid. How would I go about accomplishing this?

I have the following in my css file:

.mywidget h3 {  
   font-size: 1.2em;
}
.mywidget h3, p {
  margin-top: 0;
}
.dgrid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    font-size:larger;
}
.dgrid-row-odd {
  background: #F2F5F9;
}
.dgrid-column-A {
  width: 80px;
}
.dgrid-column-B {
  width: 120px;
}
.dgrid-column-C {
  width: 80px;
}
.dgrid-column-D {
  width: 120px;
}
.dgrid-column-E {
  width: 50px;
}
.dgrid-column-F {
  width: 70px;
}

Thank You,

Greg

[RobertScheitlin__GISP]

Greg,

   See if this helps:

the dgrid-header and dgrid-cell overwrites the text-align property · Issue #378 · SitePen/dgrid · Gi... 

[GregRieck]

Hi Robert,

Thanks for the reply. Yes, I saw that one. But that centers ALL headers. I just want to center a select few, not all of them. I'm thinking I can do something inside the individual .dgrid-column-COLUMNNAME brackets. But when I try to do a "text-align:center;" it has no impact on the column header. Also, there isn't any reference to the column's header inside the bracket.

For example:

This does not work and there is no "header" reference inside .dgrid-column-B

.dgrid-column-B {
   text-align:center;
  width: 120px;
}

[RobertScheitlin__GISP]

Try 

.dgrid-header .dgrid-cell .dgrid-column-B {
   text-align:center;
  width: 120px;
}

or

.dgrid-header .dgrid-column-B {
   text-align:center;
  width: 120px;
}

[GregRieck]

Robert,

The second option worked:

.dgrid-header .dgrid-column-B {
   text-align:center;
  width: 120px;
}

With a slight problem. The header columns don't align with the cells.

However, if I use the column resize tool and click the line between the different columns it resets itself. Of course it would be best if it looked nice from the start without having to resize the columns to bring them all into alignment but this is a great step forward. FYI, I am calling grid.resize and grid.refresh after the data has been inserted from the memory store.

Thank You,

Greg

[RobertScheitlin__GISP · Accepted solution]

Greg,

    Do not set the width in the CSS rule for the header set the width in a separate rule with only column name

[GregRieck]

Yes, Robert, thank you, I just found that solution as well. This is what worked for me.

.dgrid-header .dgrid-column-B {
   text-align:center;
}

..dgrid-column-B {
  width: 120px;
}