Forum Coders' city Strona Główna Coders' city
Nasza pasja to programowanie!
 

 PomocPomoc   SzukajSzukaj   UżytkownicyUżytkownicy   GrupyGrupy  RejestracjaRejestracja 
Archiwum starego forum + teoria    RSS & Panel/SideBar
 ProfilProfil   Zaloguj się, by sprawdzić wiadomościZaloguj się, by sprawdzić wiadomości   ZalogujZaloguj 

Potrzebuję szybkiej odpowiedzi na moje pytanie... Zasady

[Html/Css]Position relative, absolute: Div rysujący się poza swoim parentem



 
Odpowiedz do tematu    Forum Coders' city Strona Główna -> Webmasterstwo
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
lethern



Dołączył: 09 Paź 2007
Posty: 1115

PostWysłany: Pon Lut 29, 2016 9:55 pm  OP    Temat postu: [Html/Css]Position relative, absolute: Div rysujący się poza swoim parentem Odpowiedz z cytatem Pisownia

Zrobiłem sobie "imitację" comboboxa (dropdownlist, select), który umieszczony jest w wierszach tabeli - tabela ma wiele wierszy, jest obcięta i ma pasek przewijania. I tu pojawia mi się problem, gdyż "rozwinięty" combobox jest przycinany tak samo jak tabela, trzeba więc "przewijać" tabelę żeby obejrzeć to co się nie zmieściło z comboboxa...

Jeśli słowo nie zobrazowało problemu, poniżej kod który powinien być w stanie to zrekonstruować:
Kod:

<style>
.div_ddl_div {
    /* div zawierający dropdownlist */
    position: relative; /* ----WAZNA LINIA ----*/
    display: inline-block;
}
.div_ddl_btn {
    background-color: white !important;
    color: black;
    border: 1px solid silver !important;
    padding: 2px 25px 2px 7px !important;
    min-width: 60px;
    min-height: 13px;
}

.div_ddl_links {
    /* rozwijana lista z opcjami */
    border: 1px solid silver;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 3007;
}
.div_ddl_links a {
    /* link (opcja) do kliknięcia */
    color: black;
    padding: 4px 10px;
    display: block;
    border-bottom: 1px solid silver;
}

._show {
    display:block !important;
}
</style>

<div style="height:100px; display:block; background-color:#fff6df;overflow: auto;">
    <table style="border-collapse: collapse;" border="1" cellspacing="0" cellpadding="0">
        <tbody>
    <tr><td ><div class="div_ddl_div">
        <input class="div_ddl_btn" type="button" value="">
        <div class="div_ddl_links"><a href="#">test1</a><a href="#">test2</a><a href="#">test3 dlugi slownik</a></div>
    </div></td></tr>
    <tr><td ><div class="div_ddl_div">
        <input class="div_ddl_btn" type="button" value="">
        <div class="div_ddl_links"><a href="#">test1</a><a href="#">test2</a><a href="#">test3 dlugi slownik</a></div>
    </div></td></tr>
    <tr><td ><div class="div_ddl_div">
        <input class="div_ddl_btn" type="button" value="">
        <div class="div_ddl_links _show"><a href="#">test1</a><a href="#">test2</a><a href="#">test3 dlugi slownik</a></div>
    </div></td></tr>
    <tr><td ><div class="div_ddl_div">
        <input class="div_ddl_btn" type="button" value="">
        <div class="div_ddl_links"><a href="#">test1</a><a href="#">test2</a><a href="#">test3 dlugi slownik</a></div>
    </div></td></tr>
    <tr><td ><div class="div_ddl_div">
        <input class="div_ddl_btn" type="button" value="">
        <div class="div_ddl_links"><a href="#">test1</a><a href="#">test2</a><a href="#">test3 dlugi slownik</a></div>
    </div></td></tr>
    </table>
</div>


(drobne wyjaśnienie: lista rozwijana jest wyświetlona tam, gdzie dodałem class _show do diva, czyli w wierszu tabeli 3)

Ma ktoś może pomysł?

Da się coś zrobić poprzez zakomentowanie linijki z komentarzem /* ----WAZNA LINIA ----*/
Jednak nie współpracuje to z scrollbarem (nasza lista z comboboxa wisi w powietrzu)
(może da się napisać JavaScript, który będzie równo ze scrollbarem przesuwał pozycję tej listy, ale to straszne rozwiązanie...)
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość Wyślij email
Sinus32



Dołączył: 20 Sty 2007
Posty: 903

PostWysłany: Wto Mar 01, 2016 12:15 am      Temat postu: Odpowiedz z cytatem Pisownia

Tego nie obejdziesz. Lista w tym wypadku będzie zawsze "przywiązana" do elementu który ją zawiera.
Rozwiązanie to trzymanie listy poza tablicą jako ostatni element elementu body. Tą technikę stosuje na przykład jQuery w https://jqueryui.com/dialog/, https://jqueryui.com/autocomplete/ i https://jqueryui.com/datepicker/. Wbrew pozorom stworzenie menu w js i wyświetlenie we wskazanym miejscu na stronie nie jest trudne, ani kosztowne dla współczesnych przeglądarek. W dodatku możesz się wspomóc https://jqueryui.com/position/.
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość Odwiedź stronę autora
lethern



Dołączył: 09 Paź 2007
Posty: 1115

PostWysłany: Wto Mar 01, 2016 12:51 am  OP    Temat postu: Odpowiedz z cytatem Pisownia

Tak przypuszczałem po chwili przemyslen, dzięki więc za potwierdzenie
Prawie mi się udało, tabelkę oraz div-listę rozwijaną (z pozycją absolute) umieściłem we wspólnym divie o pozycji relative, javascript ustawia mi przesunięcie. Jedynie scroll'ować nie można po rozwinięciu combobox ;)
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość Wyślij email
Wyświetl posty z ostatnich:   
Odpowiedz do tematu    Forum Coders' city Strona Główna -> Webmasterstwo Wszystkie czasy w strefie CET (Europa)

Strona 1 z 1

 
Skocz do:  
Możesz pisać nowe tematy
Możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Możesz dodawać załączniki na tym forum
Możesz pobierać pliki z tego forum




Debug: strone wygenerowano w 0.10299 sekund, zapytan = 11
contact

| Darmowe programy i porady Jelcyna | Tansze zakupy w Helionie | MS Office Blog |