topic How to center align onDemandGrid headers in ArcGIS JavaScript Maps SDK Questions

How to center align onDemandGrid headers

GregRieck — Sat, 11 Dec 2021 15:41:18 GMT

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

Re: How to center align onDemandGrid headers

RobertScheitlin__GISP — Tue, 04 Apr 2017 18:22:14 GMT

Greg,

See if this helps:

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

Re: How to center align onDemandGrid headers

GregRieck — Sat, 11 Dec 2021 15:41:20 GMT

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;
}

Re: How to center align onDemandGrid headers

RobertScheitlin__GISP — Tue, 04 Apr 2017 19:53:03 GMT

Try

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

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

Re: How to center align onDemandGrid headers

GregRieck — Tue, 04 Apr 2017 21:44:56 GMT

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

Re: How to center align onDemandGrid headers

RobertScheitlin__GISP — Tue, 04 Apr 2017 22:33:11 GMT

Greg,

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

Re: How to center align onDemandGrid headers

GregRieck — Tue, 04 Apr 2017 22:56:18 GMT

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;
}