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: 1106

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...)

_________________
używasz Dev-Cpp? tools->editor options -> use tab character (włącz), smart tabs (wyłącz)... albo ściągnij np. Visual Studio C++ free.
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość Wyślij email
Sinus32



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

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: 1106

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 ;)

_________________
używasz Dev-Cpp? tools->editor options -> use tab character (włącz), smart tabs (wyłącz)... albo ściągnij np. Visual Studio C++ free.
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.17815 sekund, zapytan = 11
contact

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