Now I have embedded three labels in a table, and I have big problems with the positioning of the text. The embedded labels are not positioned right in simulation:
It seems that the only way I can create my prototype is by using the workaround described in a previous thred…
6 answers
Hi Ulrich, this is related to the auto-layout algorism of web browser. My experience is that leaving just one column (usually I take the last column) has an “auto” width will get the best result. Can’t say it will be 100% accurate, but I think one or two pixels error can be accepted.
What’s more, it is also rely on the web browser, FireFox works much better than IE, you can have a comparation.
I’ve changed the width of the last column to “Auto” (that’s the only “auto”-column), but as you can see from the screenshots, the problem is exactly the same in IE8, Forefox and Chrome:
This is not acceptable…
-
Xavier Young_
⋅ January 3, 2011
Thanks for the input. I just created a similar table to reproduce the issue. We will check it.
Hi, Ulrich, with the Bug_0275 and Bug_0276 fixed, this problem should also be solved. Can you confirm that?
Well, as the picture shows, the problem is not solved:
The embedded label elements are aligned differently across the table.
The main problem seems to be that column widths shown in ForeUI are not the column widths shown in simulation.
When using embedded elements the problems gets worse, because the placement of the embedded elements are the same in ForeUI and simulation.
The consequence of this is that the columns and the embedded elements get “out of sync”.
-
I think the column that contain the refresh icon is too narrow, can you enlarge it and try again?
-
If I enlarge the column width to around 40 pixels, the icon stays within the column, but I can't really live with that. I need some columns to be smaller than 40 pixels :(
By the way, the left-, center-, and right-align doesn't work well on the embedded element.
About your reply below (75 > 78 pixels): Why does the table element require so much space in each column? Can't you optimize this? -
The table cell will reserve 10 pixels for left pading and another 10 pixels for right padding, so to hold a 16x16 icon, the column width should be at least 36 pixels width. If you table is not scrollable, you can keep the column empty and leave the icons floating over the column, thus the column can be smaller.
As for the left, center and right aligments, they don't work for embedded element, since embedded element is using an absolute positioning system.
⋅ Hi Ulrich,
In your screenshot, some columns are just too narrow to hold their content, so the layout is bad. I just changed the column width from 75 to 78, and things are much better:
As you can see, all links are within the table cell, the situation has been improved a lot.
This question is now closed