beeware
background color ignored by sub box label widget
If I set a box with a background color, label widget children of that box are displayed correctly with the specified background.
However, if a child is another box that contains a label, then the background colour of the outer box is not propagated to the inner boxes.
Is that the expected behaviour?
I would have thought the I could set a background colour of a box and then all sub-widgets (no matter how deep in sub-boxes) would also be rendered with the same background colour.
#!/usr/bin/env python
import toga
from toga.style import Pack
from toga.style.pack import ( COLUMN, ROW, CENTER )
#!============================================================================
class Test_App( toga.App ) :
def startup( self ) :
#! Create the main window
self.main_window = toga.MainWindow( title=self.name )
body_box = toga.Box( id = 'days_box',
style = Pack( direction=ROW, flex=0, background_color='yellow' ),
children = [
toga.Label( "XXX" ),
toga.Box( children = [ toga.Label( "YYY" ) ] ),
toga.Label( "ZZZ" ),
],
)
main_box = toga.Box( id = 'main_box',
style = Pack( direction=COLUMN, flex=0 ),
children = [ body_box ],
)
self.main_window.content = main_box
#! Show the main window
self.main_window.show()
#!============================================================================
def main() :
return Test_App( 'Test App', 'au.com.etrix.test_app' )
Note how label "YYY" does not have the specified background colour. It has the default system colour.
Agreed this is a little unexpected. I can certainly explain it - but that explanation is more of a rationalization than a satisfying API.
The underlying problem here is that styles don't currently cascade (or, more specifically, there's no concept of "inherit" as a value in Pack).
Broadly, we should be aiming to follow the lead of HTML and CSS here; so the YYY block should be inheriting it's color from it's parent. In this case, it's, not because it's getting the default background color.
Doing some housekeeping; it occurs to me that one simple fix here might be to make the default background color for box transparent/no fill - that way, a child box will inherit the parent color by virtue of being transparent.
Only some properties are inherited in CSS, and background-color isn't one of them. However, CSS's default background-color is indeed transparent. So I think that's a better solution.
