search

Avaiga / taipy-gui

Graphical User Interface generator for Taipy
Apache License 2.0
60 stars 18 forks source link

Styling of component in panes #766

Closed questela closed 1 year ago

questela commented 1 year ago

Description Hi everyone, it seems that the styling of element in panes is not fully taken into account.

How to reproduce Simple app :

from taipy.gui import Gui, notify
import pandas as pd

#list of kpi (key / value)
tp_kpis = pd.DataFrame(
    {
        "name":["A", "B", "C"],
        "value":["1", "2", "3"]
    }
)

show_kpi = False

def display_kpi(state):
    state.show_kpi = True

main_page = """
<|toggle|theme|>
###Kpis
<|Kpis|button|on_action=display_kpi|>
<|{show_kpi}|pane|anchor=bottom|width=560px|
<|card|
<|{tp_kpis}|table|columns=name; value|show_all=True|width=500px|height=700px|>
|>
|>

<|card|
<|{tp_kpis}|table|columns=name; value|show_all=True|width=500px|height=700px|>
|>
"""
#Run Taipy GUI
gui = Gui(main_page).run(dark_mode=True)

Expected behavior Have the proper styling in the pane

Screenshots

image

Runtime environment Please specify relevant indications.

FlorianJacta commented 1 year ago

Thank you for your issue! It seems that visual elements or Stylekit components (like tables or card) behaves wrongly in the pane control. We will work on it!

I created a simpler code to reproduce this behavior:

from taipy.gui import Gui

data = {
        "name":["A", "B", "C"],
        "value":["1", "2", "3"]
    }

main_page = """
<|toggle|theme|>

<|{True}|pane|
<|{data}|table|>

<|card|
Here is a **card**{.color-primary}
|>
|>
"""

Gui(main_page).run(dark_mode=False)

Screenshot:

image