Forum Coders' city Strona Gwna Coders' city
Nasza pasja to programowanie!
 

 PomocPomoc   SzukajSzukaj   UytkownicyUytkownicy   GrupyGrupy  RejestracjaRejestracja 
Archiwum starego forum + teoria    RSS & Panel/SideBar
 ProfilProfil   Zaloguj si, by sprawdzi wiadomociZaloguj si, by sprawdzi wiadomoci   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 Gwna -> Webmasterstwo
Zobacz poprzedni temat :: Zobacz nastpny temat  
Autor Wiadomo
lethern



Doczy: 09 Pa 2007
Posty: 1115

PostWysany: 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), ktry 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 ktry 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, ktry b?dzie rwno ze scrollbarem przesuwa? pozycj? tej listy, ale to straszne rozwi?zanie...)
Powrt do gry
Zobacz profil autora Wylij prywatn wiadomo Wylij email
Sinus32



Doczy: 20 Sty 2007
Posty: 910

PostWysany: 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 ktry 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? wspomc https://jqueryui.com/position/.
Powrt do gry
Zobacz profil autora Wylij prywatn wiadomo Odwied stron autora
lethern



Doczy: 09 Pa 2007
Posty: 1115

PostWysany: 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 wsplnym divie o pozycji relative, javascript ustawia mi przesuni?cie. Jedynie scroll'owa? nie mo?na po rozwini?ciu combobox ;)
Powrt do gry
Zobacz profil autora Wylij prywatn wiadomo Wylij email
Wywietl posty z ostatnich:   
Odpowiedz do tematu    Forum Coders' city Strona Gwna -> Webmasterstwo Wszystkie czasy w strefie CET (Europa)

Strona 1 z 1

 
Skocz do:  
Moesz pisa nowe tematy
Moesz odpowiada w tematach
Nie moesz zmienia swoich postw
Nie moesz usuwa swoich postw
Nie moesz gosowa w ankietach
Moesz dodawa zaczniki na tym forum
Moesz pobiera pliki z tego forum




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

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