Avaiga / taipy

Turns Data and AI algorithms into production-ready web applications in no time.
https://www.taipy.io
Apache License 2.0
15.05k stars 1.83k forks source link

Sidebar class is not usable on mobile #473

Open FlorianJacta opened 11 months ago

FlorianJacta commented 11 months ago

Issue

The 'sidebar' class name from the stylekit will make the app unusable. The user only sees on the page the sidebar. The second column is not visible.

image

from taipy.gui import Gui

page = """<|toggle|theme|>

<page|layout|columns=300px 1fr|
<|sidebar|
### Sidebar
|>

<|container|
# Container
|>
|page>
"""

if __name__ == "__main__":
    Gui(page=page).run(margin="0px")

Expected behavior

We should see both columns (maybe one after the other).

Environment

Taipy 3.0.0

FredLL-Avaiga commented 8 months ago

@FlorianJacta Have you tried columns[mobile] ?

<page|layout|columns=300px 1fr|columns[mobile]=50vw 1fr|

FlorianJacta commented 7 months ago

This is working

FlorianJacta commented 2 months ago

I changed the style with:

.sidebar{
    position: relative;
    height: auto;
}

It seems to work fine with a lot of use cases.

FlorianJacta commented 2 months ago

If this answers all the issues about the sidebar, I think this should be the default behavior of the sidebar. This is necessary for mobiles.

FredLL-Avaiga commented 2 months ago

sticky is very different from relative !

FlorianJacta commented 2 months ago

I know, but I thnk we need a solution.

FlorianJacta commented 2 months ago

Or maybe something like this:

.css-75cauk .sidebar{
    height: auto;
}