0

This seems to be a common problem on both the Vaadin Forums and here, but so far I have not seen a solution. I have lots of tables where the column heading does not line up with the data consistently. It seems to always work with IE, but with any Chromium based browser it is off some. Below is what I am talking about, specifically running in the Brave browser. Bad table header alignment

So have people solved this problem with their Vaadin 7 apps?

New info 10/4/2020: I just noticed something interesting. I have one table the behaves perfectly, but then, on the same view, I have a second table where it is off. What is super interesting is that the "header" and "data" columns have the same width in HTML, but look different from perspective of the browser ( Brave browser, so Chromium based ). Any ideas what would cause that? Header Figure 1: Header

Data Figure 2: Data

From what https://stackoverflow.com/a/14857179/3329922, it seems to be that TD width is ignored in certain cases. Just don't understand why it is ignored in one place on this same screen, but not in the other. Any pointers on what to look for?

Edit 10/8/2020:

OK, found at least part of the problem, but don't know how to fix it. For some situations, where things look perfect, the width of the header table is the exact same as the data table class="v-table-table". But where the mismatch occurs, the table widths do NOT match. If I cheat and make them match in the browser, everything lines up perfectly. So why do the widths of the "header" and "data" tables not match and how can I make them match?

Tony B
  • 915
  • 1
  • 9
  • 24
  • You're [not alone](https://www.google.com/search?q=vaadin-7%20table%20header%20align&tbm=isch) with the problem. There seems to be various reasons behind this. [One of them](https://vaadin.com/forum/thread/9946658/9953036) is `td` `padding` in custom CSS. – haba713 Sep 21 '20 at 19:12
  • I have tried everything, nothing works. The problem is I don't understand what is happening or even how to ask a better question. Any ideas would be appreciated. – Tony B Sep 28 '20 at 22:04
  • Are you using a custom CSS? Can you reproduce the problem in a separate test application with the same custom CSS? If you can you can share the test app with us. – haba713 Sep 29 '20 at 05:02
  • Custom valo based theme. Not that the theme was customized much, but it was customized. In my customization changes, I do not have anything beyond color coding for tables in my scss files. Obviously, the Valo theme does, but I don't think I override those defaults much. As for a test application, I started with the vaadin 7 dashboard app. Let me see if I can rework that simpler app, and confirm it has the same problem. At first glance, this demo app has the same problem. – Tony B Sep 29 '20 at 23:16
  • It turns out my demo app, while it does sort of show the problem, it is not as pronounced as I thought, so then I looked at other tables and found an example where it worked (see recent edits). Comparing those two tables to see if it helps find the problem. – Tony B Oct 04 '20 at 18:38
  • See [this answer](https://stackoverflow.com/a/8026008/2158271). Maybe Vaadin calculates too narrow width based on content & font size. What is the type of the first column? Does your theme & widgetset versions match to Vaadin version? You can also discuss Vaadin framework related issues [here](https://gitter.im/vaadin/framework-8). – haba713 Oct 05 '20 at 07:54
  • `table-layout: fixed;` did not work when I tried it in the browser development tool. Since the Table component ends up being two ``s (don't know why, maybe GWT issue, or legacy issue), I believe that is the root cause of the issue. Just need to figure out how to keep these two `
    ` in sync. Still researching that.
     – Tony B Oct 07 '20 at 20:46
  • thanks for the help, added more interesting info to main post. Still trying to figure out a way to fix this. – Tony B Oct 08 '20 at 20:58

0 Answers0