• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

position:fixed psuje siatkę bootstrap

Object Storage Arubacloud
0 głosów
220 wizyt
pytanie zadane 2 lutego 2021 w HTML i CSS przez Mlorism Użytkownik (580 p.)
edycja 2 lutego 2021 przez Mlorism

Moja strona składa się z 2 głównych części, grafiki po lewej oraz tabeli lub formularza po prawej stronie. Do utworzenia tego podziału wykorzystuję bootstrapa. Wszystko ładnie działało do momentu, gdy zechciałem, by grafika przesuwała się wraz ze scrollowaniem strony. 
W momencie gdy dodałem do diva ją przechowującego position:fixed wtedy została zignorowana siatka bootstrapowa i grafika zaczęła nachodzić na tabelę. Próbowałem dodać width:100%, niestety bezskutecznie. Jak można to naprawić?

Bez position:fixed

position:fixed

Link do HTML: https://github.com/Mlorism/LastTemple/blob/master/LastTemple/Pages/Manage/Spell.cshtml
CSS: https://github.com/Mlorism/LastTemple/blob/master/LastTemple/wwwroot/css/site.css
Grafika: https://github.com/Mlorism/LastTemple/blob/master/LastTemple/wwwroot/img/spellBook.png

Uproszczony kod:

<div class="row">
    <div class="col-5 pl-1">
        <div style="position:fixed;">
            <img src="~/img/spellBook.png" class="img-thumbnail-dark" />
        </div>
    </div>

    <div class="col-7 pl-5 pr-5">
        <div id="spellTable" class="text-center">

            <button class="btn btn-outline-light mb-2" onclick="ToggleColumn(1)">Stwórz zaklęcie</button>

            <table class="table text-light text-center">
                <thead>
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Nazwa</th>
                        <th scope="col">Typ</th>
                        <th scope="col">Poziom</th>
                        <th scope="col">Mana</th>
                        <th scope="col">PA</th>
                        <th scope="col">Siła</th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.Spells)
                    {
                        <tr>
                            <th>@item.Id</th>
                            <td>@item.Name</td>
                            <td>@Enumerators.EnumConverter.Result(item.Type)</td>
                            <td>@item.Level</td>
                            <td>@item.ManaCost</td>
                            <td>@item.ActionCost</td>
                            <td>@item.Strength</td>
                            <td style="display:none">@item.Type</td>

                            <td><button class="btn btn-outline-warning" name="edit" type="button" onclick="ToggleColumn(2)">Edytuj</button></td>
                            <td><form method="post"><button class="btn btn-outline-warning" type="submit" asp-page-handler="Delete" asp-route-id="@item.Id">Usuń</button></form></td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

 

Tym foreach się nie przejmujcie, tworzę stronkę w ASP.NET i to po prostu odwołanie do tabeli z danymi.

CSS:

body {
    background: linear-gradient(#202020, #313131);    
}
 
html {
    position: relative;
    min-height: 100%;
}
 
.img-thumbnail-dark {
    padding: 2rem 0.5rem;
    background-color: #2F3336;
    border: 1px solid #fff;
    border-radius: 2rem;
    max-width: 100%;    
} 

1 odpowiedź

+1 głos
odpowiedź 2 lutego 2021 przez lateM Pasjonat (17,660 p.)
wybrane 2 lutego 2021 przez Mlorism
 
Najlepsza

Użyj position: sticky; z fixed czekają Cię same problemy. Taki element zostaje wyjęty z normalnego układu strony i ciężko będzie Ci to ogarnąć.

komentarz 2 lutego 2021 przez Mlorism Użytkownik (580 p.)
Osiągnąłem co chciałem i rozwiązało problem. :)

Podobne pytania

0 głosów
1 odpowiedź 186 wizyt
pytanie zadane 14 września 2019 w HTML i CSS przez Jakub Chomicz 1 Użytkownik (840 p.)
0 głosów
1 odpowiedź 166 wizyt
pytanie zadane 7 kwietnia 2019 w HTML i CSS przez Dru Nowicjusz (180 p.)
0 głosów
1 odpowiedź 722 wizyt
pytanie zadane 3 maja 2016 w HTML i CSS przez skrzatjedyny Gaduła (3,150 p.)

92,760 zapytań

141,684 odpowiedzi

320,471 komentarzy

62,104 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...