[0.12.29] [kovarex] padding not included in label size & breaks align

This subforum contains all the issues which we already resolved.
Post Reply
JasonC
Filter Inserter
Filter Inserter
Posts: 363
Joined: Tue Mar 22, 2016 3:05 am
Contact:

[0.12.29] [kovarex] padding not included in label size & breaks align

Post by JasonC »

This is two likely related issues in one:
  • On labels, padding does not increase the element size. Instead it forces the content off the label (most apparent with left_padding).
  • Right padding breaks vertical alignment (align="center") if it is too large (which is its own issue, but also would not occur if the above was not an issue too).
It's actually a bit messier than that (see horizontal flow example below, second image).

Consider the following styles:

Code: Select all

data.raw["gui-style"].default["test-base"] = {
	type = "label_style",
	parent = "label_style",
	minimal_height = 50,
	left_padding = 0,
	top_padding = 0,
	right_padding = 0,
	bottom_padding = 0
}

-- default alignment:
data.raw["gui-style"].default["test-a"] = {type = "label_style", parent = "test-base"}
data.raw["gui-style"].default["test-b"] = {type = "label_style", parent = "test-base", left_padding = 2}
data.raw["gui-style"].default["test-c"] = {type = "label_style", parent = "test-base", left_padding = 8}
data.raw["gui-style"].default["test-d"] = {type = "label_style", parent = "test-base", right_padding = 2}
data.raw["gui-style"].default["test-e"] = {type = "label_style", parent = "test-base", right_padding = 8}
-- same as above but align="center":
data.raw["gui-style"].default["test-f"] = {type = "label_style", parent = "test-base", align = "center"}
data.raw["gui-style"].default["test-g"] = {type = "label_style", parent = "test-base", align = "center", left_padding = 2}
data.raw["gui-style"].default["test-h"] = {type = "label_style", parent = "test-base", align = "center", left_padding = 8}
data.raw["gui-style"].default["test-i"] = {type = "label_style", parent = "test-base", align = "center", right_padding = 2}
data.raw["gui-style"].default["test-j"] = {type = "label_style", parent = "test-base", align = "center", right_padding = 8}
The following UI construction demonstrates the issue (the checkboxes have been included as center-line references; they are vertically centered in each cell):

Code: Select all

local test_parent = player.gui.top.add({type="frame",style="inner_frame_in_outer_frame_style",name="test-frame"})
test_parent = test_parent.add({type="table",style="table_style",colspan=2})
test_parent.add({type="label",style="test-a",caption="test-a"})
test_parent.add({type="checkbox",style="checkbox_style",state=false})
test_parent.add({type="label",style="test-b",caption="test-b"})
test_parent.add({type="checkbox",style="checkbox_style",state=false})
test_parent.add({type="label",style="test-c",caption="test-c"})
test_parent.add({type="checkbox",style="checkbox_style",state=false})
test_parent.add({type="label",style="test-d",caption="test-d"})
test_parent.add({type="checkbox",style="checkbox_style",state=false})
test_parent.add({type="label",style="test-e",caption="test-e"})
test_parent.add({type="checkbox",style="checkbox_style",state=false})
test_parent.add({type="label",style="test-f",caption="test-f"})
test_parent.add({type="checkbox",style="checkbox_style",state=false})
test_parent.add({type="label",style="test-g",caption="test-g"})
test_parent.add({type="checkbox",style="checkbox_style",state=false})
test_parent.add({type="label",style="test-h",caption="test-h"})
test_parent.add({type="checkbox",style="checkbox_style",state=false})
test_parent.add({type="label",style="test-i",caption="test-i"})
test_parent.add({type="checkbox",style="checkbox_style",state=false})
test_parent.add({type="label",style="test-j",caption="test-j"})
test_parent.add({type="checkbox",style="checkbox_style",state=false})
This produces:

Image

Note that right_padding=2 (test-i) remains vertically centered, but right_padding=8 (test-j) forces the text to the bottom. The inconsistency of vertical alignment all around is visible very clearly in the labels only (no checkboxes) in a horizontal flow:

Image

In that example, test-a thru e should all be in the exact same vertical position (default alignment on all, same styles, only horizontal padding differs), and f thru j should also be the same (all centered, same styles, only horizontal padding differs). But d/e/i/j are all over the place (these are the ones with right_padding>0).

Testing a theory that right padding only breaks alignment if it would increase the label width to larger than the parent, I added a long label to the first example above to increase the first column width. The problem still occurs -- therefore I do not know what the threshold is for right_padding before it breaks (additionally I have not looked closely enough to say whether or not the subtler differences illustrated in the horizontal flow image above are present in vertical layouts, I can only say for certain that j is not correct):

Image

There, test-j (right_padding=8, align="center") is still forced to bottom. I've drawn a red dotted line through the vertical center line.

The expected results of all this, for the two issues originally listed, are:
  • Horizontal padding should increase the element width to compensate (this is arguably "not a bug", but the current behavior is not particularly useful nor consistent with behaviors present in other styling systems).
  • More importantly, horizontal padding should not affect vertical alignment. In particular, in the horizontal flow image above, the first 5 labels should be at the same vertical position (top), as well as the last 5 (centered).
The horizontal flow above is the best illustration of the alignment issue. I think getting it to look right would be a good test case if this behavior is ever addressed.

This is only somewhat of an edge case, as there are fairly mundane situations in which this can be recreated. For example, I discovered it when styling the following dialog (problem not shown):

Image

When I attempted to add a bit of right_padding to the orange labels to add some space between the labels and the text fields / checkboxes, it forced the labels to the bottoms of their table cells.
Took a break from 0.12.29 to 0.17.79. I never know what's happening.
Gates are broken for trains. | The people demand a better chain signal! | Disabled inserters are a lie! (see also)

User avatar
Klonan
Factorio Staff
Factorio Staff
Posts: 5026
Joined: Sun Jan 11, 2015 2:09 pm
Contact:

Re: [0.12.29] padding not included in label size & breaks align

Post by Klonan »

Thanks for the report,

This is really thorough and i don't think i will need to try to reproduce it :)

kovarex
Factorio Staff
Factorio Staff
Posts: 8058
Joined: Wed Feb 06, 2013 12:00 am
Contact:

Re: [0.12.29] [kovarex] padding not included in label size & breaks align

Post by kovarex »

0.12.33 changelog wrote: Fixed that label padding was applied twice, moving the rendered text to be out of place.
Do you know that you can change the style at runtime to test these kind of things?

Code: Select all

/c game.local_player.gui.top.label.style.left_padding = 10

JasonC
Filter Inserter
Filter Inserter
Posts: 363
Joined: Tue Mar 22, 2016 3:05 am
Contact:

Re: [0.12.29] [kovarex] padding not included in label size & breaks align

Post by JasonC »

Oh wow, this will make testing so much easier.
Took a break from 0.12.29 to 0.17.79. I never know what's happening.
Gates are broken for trains. | The people demand a better chain signal! | Disabled inserters are a lie! (see also)

kovarex
Factorio Staff
Factorio Staff
Posts: 8058
Joined: Wed Feb 06, 2013 12:00 am
Contact:

Re: [0.12.29] [kovarex] padding not included in label size & breaks align

Post by kovarex »

JasonC wrote:Oh wow, this will make testing so much easier.
http://lua-api.factorio.com/0.12.32/LuaStyle.html

Post Reply

Return to “Resolved Problems and Bugs”