logo
07.05.2021 16:36
1
Zdravím,
V HTML kódu mám několik rozklikávacích <details>, jejichž <summary> mají defaultně display:block, což znamená, že dají rozliknout z celé šířky stránky, ať už je <summary> jakkoli dlouhé/široké.
Jak docílit, aby se <details> mohl rozkliknout pouze po délce <summary> (tj. kliknutím na jejich 'nadpis') a současně zůstaly <details> pod sebou?
Kód:
display {
    display: inline-block;
}
(očekávaně) způsobí, že <details> budou za sebou, já je potřebuji pod sebou. Zkoušel jsem:
Kód:
display::after {
    content: "\a";
    white-space: pre;
}
, to samé pro <summary>, všechny kombinace mezi tím, a nic nezafungovalo.
Díky za rady.
07.05.2021 17:35
2
Já možná nepochopil cíl nebo zadání ... ale když dám display: inline-block na summary tak jde kliknout jen na nadpis a furt je vše pod sebou. Není tohle o chceš?

ukázka: https://jsfiddle.net/pamare/6v5d2agp/
07.05.2021 17:41
3
Původně odeslal crs
Zdravím,
V HTML kódu mám několik rozklikávacích <details>, jejichž <summary> mají defaultně display:block, což znamená, že dají rozliknout z celé šířky stránky, ať už je <summary> jakkoli dlouhé/široké.
Jak docílit, aby se <details> mohl rozkliknout pouze po délce <summary> (tj. kliknutím na jejich 'nadpis') a současně zůstaly <details> pod sebou?
Moc moudrej z toho popisu nejsem, chtělo by to vidět.
Nepomůže display:flex a flex-direction? (střelba hodně od boku :)
07.05.2021 19:12
4
Díky za odpovědi.
@Doctore97: Z nějakého důvodu mi to začalo fungovat :), ale současně se ztratily šipečky/trojúhelníčky ukazující doprava nebo dolů podle toho, jestli je obsah rozkliknutý nebo ne.
HTML má defaultně pro details a summary nastaveno vlastnosti:
Kód:
details {
  display: block;
}
details > summary {
  display: list-item;
  counter-increment: list-item 0;
  list-style: inside disclosure-closed;
}
details > summary {
  list-style: inside disclosure-open;
}
Změnou display: list-item na inline nebo inline-block se „ztratí vliv“ list-style (a možná ještě nějakých vlastností, co se seznamy souvisí).

Toto se dá ale spravit pomocí ::before a content - napíšu sem své řešení pro někoho, kdo by to třeba v budoucnu řešil —
Kód:
summary::before {
  content: "\25BA";
  padding-right: 1ex;
}
details[open] > summary::before {
  content: "\25BC";
}
Já ještě navíc mám uvnitř summary nadpisy (které samy o sobě před šipkami odsazují), ale stačí danému nadpisu přiřadit display: inline-block.