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

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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:

<SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">mywidget h3 </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; 
&nbsp;&nbsp;&nbsp;font</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">size</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">1.2em</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">mywidget h3</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> p </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; margin</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">top</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">0</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">dgrid </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; position</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> absolute</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; top</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">0</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; bottom</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">0</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; left</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">0</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; right</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">0</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; height</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-size: 13px;">auto</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp;&nbsp;&nbsp; font</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">size</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">larger</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">dgrid</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">row</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">odd </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; background</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-size: 13px;">#F2F5F9;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">dgrid</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">column</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">A </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; width</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">80px</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">dgrid</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">column</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">B </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; width</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">120px</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">dgrid</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">column</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">C </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; width</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">80px</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">dgrid</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">column</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">D </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; width</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">120px</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">dgrid</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">column</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">E </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; width</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">50px</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">dgrid</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">column</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">F </SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">{
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">&nbsp; width</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-size: 13px;">70px</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-size: 13px;">}</SPAN>

Thank You,

Greg

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Greg,

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

All comments

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

RobertScheitlin__GISP

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

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. Shows column headers not aligning with the cells below

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.

This is what it should look like when correctly displayed.

Thank You,

Greg

RobertScheitlin__GISP

Try

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

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

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

<SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">dgrid</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">column</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">-</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">B </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">{
&nbsp;&nbsp;&nbsp;text-align:center;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">&nbsp; width</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">120px</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">;
</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">}</SPAN>

RobertScheitlin__GISP

Greg,

See if this helps:

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.