Best way to set the style on a child class? Ex. Setting the width of a button.

[MostHated]

Hey there, I was wondering if anyone could recommend the best way to set the style on a child class? Ex. Setting the width of a button. When I set the style of a button, it seems to be setting the width of the buttons parent div class.

put_row([
    put_buttons(['Start'], onclick=lambda _: action('start')).style('width:50%'),
    put_buttons(['Stop'], onclick=lambda _: action('stop')).style('width:50%'),
]),

Unfortunately, this does not seem to have any effect on the actual button width.

I do realize that the library is using bootstrap, so there are additional ways to adjust things, such as adding or removing class names from the button, but I am unsure how to go about accessing the child button of the div. If someone could simply point me to an example of how to go about this, I would greatly appreciate it.

Thanks,
-MH

[wang0618]

Here is an example to add custom style to subelement.

css = """
#pywebio-scope-buttons button{
    width:50%;
}
"""
@config(css_style=css)
def main_th():
    with use_scope('buttons'):
        put_row([
            put_buttons(['Start'], onclick=lambda _: action('start')),
            put_buttons(['Stop'], onclick=lambda _: action('stop')),
        ])

The scope in PyWebIO is actually a html div element with pywebio-scope-<scope name> name.

[MostHated]

-- Edit: Ah! I see I can just change "#pywebio-scope-buttons" to my existing scope name and it will be applied to the items within that "using", so I was able to make it work. Thank you much, I greatly appreciate it. 👍

Ah, I see, thank you. Though, it looks like I might have hurt myself in the way I structured this, as I am already using nested scopes in order to have nested tabs, so I might have to just mess around with it and see what I can get it to do.