none
Bootstrap row fixed-top Probleme RRS feed

  • Frage

  • Hallo,

    ich habe eine klassische Blazor Anwendung angelegt nach klassischer Vorlage... Menü links, Login oben....

    Im Hauptbereich der Seite (z.b. bei Counter) möchte ich ein Bootstrap Grid anlegen, bei dem die obere Reihe fixiert ist. 

    Beispiel:

    <div class="container">
                <div class="row fixed-top">
                    <div class="col-sm">
                        <p>Obere Zeile</p>
                    </div>
    
                </div>
                <div class="row">
                    <div class="col-sm">
                        <p>Inhalt</p>
    
                    </div>
    
                </div>
            </div>

    In diesem Beispiel wird die obere Reihe allerdings auf dem Gesamtbildschirm ganz oben links platziert.. also über dem Bereich des Nav Menüs und des LoginDisplays...

    Wie bekomme ich es hin, dass die Fixierung nur im @Body Bereich stattfindet?


    .::datekk::.

    Freitag, 4. Dezember 2020 08:02

Antworten

Alle Antworten

  • Hallo,

    dazu solltest Du dich mit der Positionierung von Elementen in CSS beschäftigen und wie diese wirken. Eine Positionierung mit fixen wir immer am View/Browserfenster ausgerichtet und nicht z.B. am Eltern DIV. Gut finde ich die Anleitungen von kulturbanause Blog


    Gruß Thomas
    Github

    Freitag, 4. Dezember 2020 20:31
  • Hallo Thomas,

    danke für den Link. Dieser ist sehr informativ, behebt aber nicht mein Problem. 

    Ich möchte z.B. die obere Zeile einer Tabelle einfach fixiert haben, sodass man beim scrollen die Spaltenüberschriften sieht.

    Oder einfach in einem Div ein oberer Bereich ist, der fix ist und unter dem der Inhalt scrollt.

    Vielleicht noch eine Idee?


    .::datekk::.

    Samstag, 12. Dezember 2020 19:01
  • Bei einem Div ist dies recht einfach zu lösen

    <div>
        <div style="background-color: blue;">
            Fest oben
        </div>
        <ul style="height: 80px; overflow-y: scroll;">
            <li>Inahlt</li>
            <li>Inahlt</li>
            <li>Inahlt</li>
            <li>Inahlt</li>
            <li>Inahlt</li>
            <li>Inahlt</li>
            <li>Inahlt</li>
            <li>Inahlt</li>
            <li>Inahlt</li>
            <li>Inahlt</li>
            <li>Inahlt</li>
        </ul>
    </div>

    Bei einer Tabelle ist dies schon etwas schwieriger HTML table with 100% width, with vertical scroll inside tbody


    Gruß Thomas
    Github

    Samstag, 12. Dezember 2020 20:28