0

I'm finding a behavior that's really strange (at least, on the CSS side) in the CellTable component of GWT.

Suppose we examine the following CellTable demo: http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwCellTable

If I try to add ellipsis to the header (TH tags) only by using CSS, by the following code (we can try to add this in the clean.css file directly in the Developer tools of browser):

th {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 50px;
  display: inline-block;
  white-space: nowrap;
}

This works with a normal HTML test page (according to this question), but not in this case: the headers will break into newlines instead.

I can't figure out which CSS properties of the elements have interfered with this simple approach.

Sorry for the simple question, but I'm learning CSS and try to experiment more with it, thus thanks in advance for any support. Otherwise, I can try to solve this on the Java side, and custom the header with a builder.

ramcrys
  • 335
  • 1
  • 2
  • 9
  • Minus the "inline-block" setting for display (which makes the `` elements each appear on its own line) it seems to work for me when added to the very top of clean.css: https://imgur.com/a/Rd7p9Ds Confirmed quickly in both firefox and chrome. – Colin Alworth May 11 '18 at 12:31
  • Strange, i also tried removing the inline-block property, but it doesn't show the ellipsis (even if I change width to only 20px). It only works when I resize the browser so that it's smaller .. – ramcrys May 12 '18 at 06:44
  • Ah, I didn't try to force small headers except by simply not having enough space. Is it a requirement to artificially force the ellipsis? Or is it enough that if the data table doesnt have room that it will draw them where necessary (i.e. if the entire column is too narrow, not just the width given to the `th` itself)? – Colin Alworth May 12 '18 at 19:04
  • Actually the ellipsis for the "th" is just an approach that I thought of when the text for these headers are too long. Because it seems the GWT CellTable component does not support this, I tried with this approach hoping for a quick CSS solution :) I find it strange that you have the ellipsis working. Do you have the same CSS as mine ? – ramcrys May 14 '18 at 06:54

0 Answers0