Issue with Centering Grid Column Captions

[szaluk]

I am not able to center the Grid column captions. I have the following CSS:

.text-align-center { text-align: center; }

I am setting the style like so:

HeaderRow headerRow = countSummaryGrid.getDefaultHeaderRow();

HeaderCell testCycleHeaderCell = headerRow.getCell("Test Cycle");
testCycleHeaderCell.setStyleName("text-align-center");
testCycleHeaderCell.setHtml("<strong>Test Cycle</strong>");

The caption is not centering. However, if I do the following in the footer, it does get centered:

FooterRow footerRow = countSummaryGrid.getFooterRow(0);

FooterCell totalsFooterCell = footerRow.getCell("Test Cycle");
totalsFooterCell.setStyleName("text-align-center");
totalsFooterCell.setHtml("<strong>Totals:</strong>");

Formatting text in a HeaderCell should work the same way as a FooterCell for consistency. I can't seem to get the caption in the Header to center at all.

[Legioth]

Centering seems to work for me on http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features when using the browser inspector to add this CSS:

.v-grid-column-header-content {
    text-align: center;
}

Some things that you could check out for using the browser's DOM inspector:

• Is there enough room in the header cell for actually aligning the text? There's slightly less space available for the contents in header cells compared to footer cells since some pixels are reserved for the column resize handle and a potential sorting indicator.
• Does the <th> element actually get text-align-center as part of its class attribute value?
• Does your theme contain some other, more specific CSS rule, that overrides the text alignment for headers?

[szaluk]

Thanks for the info!

I update the code to the following:

        HeaderCell testCycleHeaderCell = headerRow.getCell("Test Cycle");
        testCycleHeaderCell.setStyleName("v-grid-column-header-content");
        testCycleHeaderCell.setHtml("<strong>Test Cycle</strong>");

That still is not working. When I check the DOM, I am not seeing text-align-center added to the class for that element.

I am able to center the contents of the cells in the footer and the grid itself, just not the header.

Also, in that link you sent, the headers are showing up as left aligned.

[Legioth]

Also, in that link you sent, the headers are showing up as left aligned.

I used the browser's inspector to add text-align: center for the column header. By doing that, I could verify that there doesn't seem to be anything in Grid itself that would prevent column headers from being centered.

Changing your code to set v-grid-column-header-content as the style name of the contents of a header may have some unintended side effects since the contents of the header might then get styling that is only intended for the actual header itself.

I'm suspecting that there's something in your application's theme that is interfering with the .text-align-center styling. To find out more about this, you can select the header contents in the DOM inspector and then look at what styles are applied for that element ("Styles" in the righthand panel in Chrome). There you can see all CSS selectors that apply for the selected element. If you find your .text-align-center stylename there, the text-align definition might be striked through, meaning that there is some other style definition that overrides your styles. The other option is that .text-align-center is not there at all, if you still see the stylename in the class attribute, then this would indicate that your stylesheet is not properly updated or loaded.

[szaluk]

@Legioth - When I look in the inspector I do see the style that I added with a strike though:

It seems like the styling in .v-grid-header is overriding what I am setting with text-align-center. How I can set my styling as higher precedence? I am calling setStyleName() on the header cell.

Thanks,
Steve

[knoobie]

@szaluk Easiest way would be to add !important to your style. But you could also change your selector to something like .v-grid-header th.text-align-center if the style is added to the th, otherwise if it's added to the div below the th, change it to .v-grid-header th div.text-align-center.

[szaluk]

@knoobie - Adding !important worked. Thanks!

I do think this should be investigated a bit. As a user I would expect that adding the same style to a HeaderCell as a FooterCell would result in the same behavior.

[stale]

Hello there!

It looks like this issue hasn't progressed lately. There are so many issues that we just can't deal them all within a reasonable timeframe.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!