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

position:fixed psuje siatkę bootstrap

Fiszki IT
Fiszki IT
0 głosów
48 wizyt
pytanie zadane 2 lutego w HTML i CSS przez Mlorism Użytkownik (580 p.)
edycja 2 lutego 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 przez lateM Pasjonat (17,780 p.)
wybrane 2 lutego 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 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ź 83 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ź 69 wizyt
pytanie zadane 7 kwietnia 2019 w HTML i CSS przez Dru Nowicjusz (180 p.)
0 głosów
1 odpowiedź 465 wizyt
pytanie zadane 3 maja 2016 w HTML i CSS przez skrzatjedyny Gaduła (3,170 p.)
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

84,758 zapytań

133,561 odpowiedzi

295,987 komentarzy

56,012 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...