Content hinter Sidebar

LuiM · 02.08.2022

Hallo zusammen,

ich habe aktuell das Problem, dass meine Tabelle hinter der Sidebar verschwindet.
Die Tabelle sollte eigentlich neben der Sidebar in voller Größe zu sehen sein und responsive sein.
Ich nutze Bootstrap 5.

Wie kann ich das umsetzen, dass die Tabelle responsive ist und neben der Sidebar zu sehen ist?

HTML:

HTML:

<div class="container-fluid">
    <div class="col-md-12 col-sm-12">
        <div class="row">
            <div class="col-md-4 col-sm-4">
                <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
                    <div class="position-sticky pt-3">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                {% if app.request.get('_route') == 'app_dashboard' %}
                                    <a class="nav-link active" aria-current="page" href="{{ path('app_dashboard') }}">
                                        <span data-feather="home"></span>
                                        Test
                                    </a>
                                {% else %}
                                    <a class="nav-link" aria-current="page" href="{{ path('app_dashboard') }}">
                                        <span data-feather="home"></span>
                                        Test
                                    </a>
                                {% endif %}

                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <span data-feather="file-plus"></span>
                                    Test
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <span data-feather="slash"></span>
                                    Test
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <span data-feather="users"></span>
                                    Test
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div>
                <h2>Test:</h2>
                <br>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Eigene CSS:

CSS:

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 45px 0 0;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
    width: 220px;
}

.sidebar .active {
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

@media (max-width: 767px) {
    .sidebar {
        padding: 120px 0 0;
    }
}

Vielen Dank im Voraus.

Falls ihr noch weitere Infos benötigt, bitte Bescheid geben

Sempervivum · 02.08.2022

Kurze und schnelle Lösung: Dem div, das die Tabelle und die Überschrift umschließt, eine Klasse geben, z. B. "table-wrapper" und dann ein margin-left:

Code:

        .wrapper-table {
            margin-left: 220px;
        }

Etwas eleganter: Die Nav und den Container mit der Tabelle ohne Bootstrap nebeneinander anordnen und den Container scrollbar machen. Dann kommt man ohne position: fixed; aus:

Code:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <style>
        .sidebar {
            padding: 45px 0 0;
            box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
            width: 220px;
        }

        .sidebar .active {
            border-radius: 5px;
            box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
        }

        @media (max-width: 767px) {
            .sidebar {
                padding: 120px 0 0;
            }
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
        }

        main {
            flex: 1;
            overflow-y: auto;
        }

        .main-inner {
            /* Nur um den Container zum Test zu vergrößern
            und sichtbar zu machen: */
            background-color: lightblue;
            height: 200vh;
        }
    </style>

</head>

<body>
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="pt-3">
            <ul class="nav flex-column">
                <li class="nav-item">
                    {% if app.request.get('_route') == 'app_dashboard' %}
                    <a class="nav-link active" aria-current="page" href="{{ path('app_dashboard') }}">
                        <span data-feather="home"></span>
                        Test
                    </a>
                    {% else %}
                    <a class="nav-link" aria-current="page" href="{{ path('app_dashboard') }}">
                        <span data-feather="home"></span>
                        Test
                    </a>
                    {% endif %}

                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <span data-feather="file-plus"></span>
                        Test
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <span data-feather="slash"></span>
                        Test
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <span data-feather="users"></span>
                        Test
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <main>
        <section class="main-inner">
            <h2>Test:</h2>
            <br>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
</body>

</html>

Die Nav und den Container mit der Tabelle bzw. was sonst noch darin ist, kannst Du ja weiterhin mit Bootstrap stylen.

LuiM · 02.08.2022

Hallo @Sempervivum

erstmal vielen Dank für deine schnelle Antwort.

Leider sieht das jetzt etwas merkwürdig aus

Ich habe jedoch alles so umgesetzt, wie von dir geschrieben.

Sempervivum · 03.08.2022

Guten Morgen LuiM,
das sieht allerdings merkwürdig aus. Welche Lösung hast Du denn verwendet, die schnelle oder die elegante?

Bei mir sieht die zweite so aus:

(Die Platzhalter wurden in meiner Testdatei natürlich nicht ersetzt.)

LuiM · 03.08.2022

Sempervivum schrieb:
Guten Morgen LuiM,
das sieht allerdings merkwürdig aus. Welche Lösung hast Du denn verwendet, die schnelle oder die elegante?

Bei mir sieht die zweite so aus:
Anhang anzeigen 292
(Die Platzhalter wurden in meiner Testdatei natürlich nicht ersetzt.)

Hey,

Ich habe die elegante Lösung verwendet.

Sempervivum · 03.08.2022

Ich frage mich, wo das Schwarze links her kommt. Gibt es da vielleicht einen weiteren Container? Wenn es nicht zu umfangreich ist, dann poste doch noch Mal, den Code, den Du jetzt hast.

LuiM · 03.08.2022

Hallo @Sempervivum

ich habe den Code nun nochmal eingefügt und tatsächlich sieht es im Vollbild nun sehr gut aus. Vielen Dank

Leider ist die Tabelle nur nicht responsive. Wenn man die Bildschirmgröße ändert, verschwindet die Tabelle leider hinter der Sidebar.
Was muss ich denn noch anpassen?

Mein jetziger html code:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Sponsoring System{% endblock %}</title>

    {% block stylesheets %}
        <link rel='shortcut icon' type='image/x-icon' href="{{ asset('images/favicon.ico') }}"/>
        <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}"/>
        <link rel="stylesheet" href="{{ asset('css/bars.css') }}"/>
    {% endblock %}

    {% block javascripts %}{% endblock %}
</head>
<body>

<header class="navbar navbar-dark bg-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand px-3" href="{{ path('app_dashboard') }}">Test</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <input class="form-control form-control-dark w-100" type="text"
           placeholder="Test" aria-label="Search">
    <div class="navbar-nav">
        <div class="nav-item text-nowrap">
            <a class="nav-link px-3" href="#">Logout</a>
        </div>
    </div>
</header>

<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
    <div class="pt-3">
        <ul class="nav flex-column">
            <li class="nav-item">
                {% if app.request.get('_route') == 'app_dashboard' %}
                    <a class="nav-link active" aria-current="page" href="{{ path('app_dashboard') }}">
                        <span data-feather="home"></span>
                        Test
                    </a>
                {% else %}
                    <a class="nav-link" aria-current="page" href="{{ path('app_dashboard') }}">
                        <span data-feather="home"></span>
                        Test
                    </a>
                {% endif %}

            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file-plus"></span>
                    Test
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="slash"></span>
                    Test
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="users"></span>
                    Test
                </a>
            </li>
        </ul>
    </div>
</nav>
<main>
    <section class="main-inner">
        <h2>Test:</h2>
        <br>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Test</th>
                <th>Test</th>
                <th>Test</th>
                <th>Test</th>
                <th>Test</th>
                <th>Test</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    Test
                </td>
                <td>
                    Test
                </td>
                <td>
                    Test
                </td>
                <td>
                    Test
                </td>
                <td>
                    Test
                </td>
                <td>
                    Test
                </td>
            </tr>
            </tbody>
        </table>
    </section>
</main>

<script src="{{ asset('js/jquery-3.6.0.js') }}"></script>
<script src="{{ asset('js/bootstrap.bundle.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
    feather.replace()
</script>
</body>
</html>

Meine css Datei:

CSS:

/*
 * Navbar
 */

.navbar-brand {
    font-size: 1.2rem;
}

.navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
}

.sidebar {
    padding: 45px 0 0;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
    width: 220px;
}

.sidebar .active {
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

@media (max-width: 767px) {
    .sidebar {
        padding: 120px 0 0;
    }
}

html,
body {
    height: 100%;
}

body {
    display: flex;
}

main {
    flex: 1;
    overflow-y: auto;
}

.main-inner {
    /* Nur um den Container zum Test zu vergrößern
    und sichtbar zu machen: */
    background-color: lightblue;
    height: 200vh;
}

Sempervivum · 03.08.2022

Wenn ich deinen letzten Code übernehme bekomme ich genau das Bild, das Du in Posting #3 gepostet hast. Und ich weiß jetzt wo das schwarze Element her kommt: Es ist der Header und er soll offenbar über der Tabelle und der Sidebar angeordnet werden. Das kann ich relativ leicht mit diesem CSS erreichen:

Code:

        @media (max-width: 767px) {
            .sidebar {
                padding: 120px 0 0;
            }
        }

        html,
        body {
            height: 100%;
        }

        body {
            /* Die Elemente darin als Grid einrichten: */
            display: grid;
            /* 2 Spalten, die Breite der linken entspr. Inhalt,
            die rechte füllt den verbleibenden Raum aus: */
            grid-template-columns: auto 1fr;
            grid-template-rows: auto 1fr;
        }

        header.navbar {
            /* Der Header soll 2 Spalten überspannen: */
            grid-column: 1/3;
        }

        main {
            /* Dieses Element soll bei Bedarf scrollbar sein: */
            overflow: auto;
        }

        .main-inner {
            /* Nur um den Container zum Test zu vergrößern
            und sichtbar zu machen: */
            background-color: lightblue;
            height: 200vh;
        }

Wir werden jedoch dann mit den Problemen konfrontiert, die durch das Mischen von Gridlayout mit Bootstrap entstehen: Bei breitem Anzeigefenster sieht es gut aus aber in der Handy-Ansicht funktioniert das Umschalten der Sidebar nicht so richtig gut. Bin unsicher, was ich jetzt empfehlen soll: Entweder auf die einfache Lösung in Posting #2 mit dem margin-left für den Wrapper der Tabelle zurück gehen oder mit CSS das Verhalten so einrichten, dass es passt. Im letzteren Fall müsste man wissen, wie sich die Sidebar verhalten soll: Die Tabelle überdecken? Oder soll die Tabelle horizontal schrumpfen?

Was dieses betrifft:

Leider ist die Tabelle nur nicht responsive. Wenn man die Bildschirmgröße ändert, verschwindet die Tabelle leider hinter der Sidebar.
Was muss ich denn noch anpassen?

so verhält sich bei mir die Tabelle schon responsiv: Sie wird breiter oder schrumpft abhängig von der Breite des main-Containers. Allerdings schrumpft sie nur so weit wie das von den Inhalten der Zellen her möglich ist. Das ist ein generelles Problem bei der Darstellung von Tabellen, die in die Breite gehen, in schmalen Browserfenstern. Allerdings gibt es Lösungen dafür, indem man die Anordnung der Zellen umändert.

LuiM · 03.08.2022

Sempervivum schrieb:
Im letzteren Fall müsste man wissen, wie sich die Sidebar verhalten soll: Die Tabelle überdecken? Oder soll die Tabelle horizontal schrumpfen?

Also am besten soll die Tabelle erstmal etwas schrumpfen und dann irgendwann die Sidebar ausgeblendet werden und der Toggler zu sehen sein. Das passiert ja schon, wenn man in der Handy-Ansicht ist.
Beim benutzen des Toggler Buttons, darf die Sidebar über die Tabelle überlappen, aber nicht, wenn die Sidebar dann "eingeklappt" ist.

Sempervivum · 04.08.2022

Ich habe das mal umgeändert mit einer Mediaquery und es sieht eigentlich gar nicht schlecht aus:

Code:

        /* Bis hier her unverändert */
        
        /* @media (max-width: 767px) {
            .sidebar {
                padding: 120px 0 0;
            }
        } */

        html,
        body {
            height: 100%;
        }

        body {
            /* Die Elemente darin als Grid einrichten: */
            display: grid;
            /* 2 Spalten, die Breite der linken entspr. Inhalt,
            die rechte füllt den verbleibenden Raum aus: */
            grid-template-columns: auto 1fr;
            /* 2 Zeilen, die Höhe der ersten (Header) entspr. Inhalt,
            die zweite füllt den verbleibenden Raum aus: */
            grid-template-rows: auto 1fr;
        }

        header.navbar {
            /* Der Header soll 2 Spalten überspannen: */
            grid-column: 1/3;
        }

        main {
            overflow: auto;
        }

        .main-inner {
            /* Nur um den Container zum Test zu vergrößern
            und sichtbar zu machen: */
            background-color: lightblue;
            height: 200vh;
        }

        @media (max-width: 767px) {

            .sidebar,
            main {
                /* Beide sollen 2 Spalten überspannen
                und die selbe Zelle einnehmen: */
                grid-column: 1/3;
                grid-row: 2/3;
            }

            .sidebar {
                align-self: start;
                padding: 0;
                position: relative;
                z-index: 99;
            }
        }

Jetzt Mitternacht, ich mache für heute erst Mal Schluss.

LuiM · 04.08.2022

Hey,

vielen Dank. Du hast mein Problem gelöst

Content hinter Sidebar

LuiM

Member

Sempervivum

Well-known member

LuiM

Member

Sempervivum

Well-known member

LuiM

Member

Sempervivum

Well-known member

LuiM

Member

Sempervivum

Well-known member

LuiM

Member

Sempervivum

Well-known member

LuiM

Member

Content hinter Sidebar

Content hinter Sidebar