[CSS] Element met "resize" maar ook een initiele max-height

[NickThissen]

Ik heb een forum waar gebruikers stukjes code (scripts) kunnen plaatsen. Deze code komt in de html binnen een <pre><code>...</code></pre> blok terecht.

Dit blok wil ik graag aan een aantal eisen laten voldoen:
1. De initiele height mag niet meer dan 200 px zijn.
2. Als de content niet genoeg is om de 200 px te vullen, dan moet hij kleiner zijn (height = zoveel hij nodig heeft).
3. Gebruiker moet het blok kunnen resizen in hoogte.

Het idee er achter:
1. Zodat grote lappen code niet enorm lange pagina's opleveren.
2. Zodat kleine stukjes code (one-liners bijv) niet een groot leeg blok opleveren.
3. Zodat de lezer een groot stuk code kan uitschuiven om meer in een keer te zien.


Ik kan geen manier vinden waarop ik alle drie eisen kan voldoen...

Bijvoorbeeld...

Poging A:

Cascading Stylesheet:

.message-content pre {
    height: 200px;
    resize: vertical;
}

Voldoet aan 1 en 3, maar niet aan 2 (one-liners geeft leeg blok van 200px).

Poging B:

Cascading Stylesheet:

.message-content pre {
    min-height: 50px;
    resize: vertical;
}

Voldoet aan 2 en 3, maar niet aan 1 (grote lappen code = heel lang blok).

Poging C:

Cascading Stylesheet:

.message-content pre {
    max-height: 200px;
    resize: vertical;
}

Voldoet aan 1 en 2, maar niet aan 3 (kan niet groter dan 200px resizen).


Ik kan het probleem het beste samen vatten als:

- Als ik "height" gebruik dan is de initiele grootte niet goed voor kleine stukjes code (maar wel voor grote).
- Als ik "min-height" gebruik dan is de initiele grootte niet beperkt.
- Als ik "max-height" gebruik dan kan ik niet meer groter dan dit resizen.

Ik zoek eigenlijk een "initial-height" wat initieel werkt als een "max-height" setting (zodat hij automatisch wel kleiner kan zijn), maar zonder dat de resize daardoor beperkt is...

Is dit mogelijk?

[Harrie_]

Weinig reacties hier tot dusver. Gisterennacht was ik nog tot laat bezig en zag ik dit topic voorbij komen, ik heb toen wat lopen kliederen in een jsfiddle maar volgens mij kant dit gewoon niet in puur CSS.

Trek je JS erbij is het natuurlijk een ander verhaal. Ik zou dan voor 'Poging A' gaan en met JS de height aan passen. Ik weet niet of je verder nog dynamische code gebruikt maar je zou natuurlijk met PHP/ASP natuurlijk vooraf al e.e.a. kunnen bepalen i.p.v. achteraf met JS

[Gooly]

Een oplossing heb ik niet, maar ik zit globaal in dezelfde richting te denken.
Ik denk dan ook meer aan A als uitgangspunt. Zo zet je als het ware de default-, of maximale standaard hoogte. (Dus niet te verwarren met max-size, dit is hoe hoog het veld maximaal is als je er niet aan komt.)

Op dat moment heb je dus een standaard veld van een standaard hoogte. En de bezoeker kan het veld groter of kleiner maken. Het enig wat er dan nog moet gebeuren is checken of de inhoud te weinig is om het hele veld te gebruiken en daar actie op ondernemen.

Met een JS oplossing lijkt het me een probleem dat je het pas 'achteraf' kunt doen en dus eerst 'fout' moet laten gaan om het vervolgens te kunnen corrigeren. (Ik ben niet zo'n JS ace, dus wellicht zit ik hier fout), Misschien kan dat op een nette manier door het hele element oorspronkelijk te verbergen en pas na de correctie zichtbaar te maken(?)

Met server side scripting (dus vooraf) kom ik ook niet verder dan tekens tellen en afhankelijk daarvan een hoogte vaststellen. Maar dat lijkt me ook geen aanbevolen manier omdat het niet responsive is. Het veld zou dan op een smartphone net zo hoog worden als op een desktop monitor en dat lijkt me niet de bedoeling.

Wat ik zelf in dat soort gevallen meestal doe, is pagina's opzoeken die een dergelijke feature hebben, en dan met mijn browser inspector 'spieken' hoe ze het gedaan hebben

[Harrie_]

Gooly schreef op zondag 26 november 2017 @ 07:21:
Een oplossing heb ik niet, maar ik zit globaal in dezelfde richting te denken.
Ik denk dan ook meer aan A als uitgangspunt. Zo zet je als het ware de default-, of maximale standaard hoogte. (Dus niet te verwarren met max-size, dit is hoe hoog het veld maximaal is als je er niet aan komt.)

Op dat moment heb je dus een standaard veld van een standaard hoogte. En de bezoeker kan het veld groter of kleiner maken. Het enig wat er dan nog moet gebeuren is checken of de inhoud te weinig is om het hele veld te gebruiken en daar actie op ondernemen.

Klopt precies.

Met een JS oplossing lijkt het me een probleem dat je het pas 'achteraf' kunt doen en dus eerst 'fout' moet laten gaan om het vervolgens te kunnen corrigeren. (Ik ben niet zo'n JS ace, dus wellicht zit ik hier fout), Misschien kan dat op een nette manier door het hele element oorspronkelijk te verbergen en pas na de correctie zichtbaar te maken(?)

Ik ben ook zeker geen JS-ace maar keep in mind dat wanneer je het hele element verbergt en pas na de correctie zichtbaar maakt je waarschijnlijk wel e.e.a. ziet verspringen.

Met server side scripting (dus vooraf) kom ik ook niet verder dan tekens tellen en afhankelijk daarvan een hoogte vaststellen. Maar dat lijkt me ook geen aanbevolen manier omdat het niet responsive is. Het veld zou dan op een smartphone net zo hoog worden als op een desktop monitor en dat lijkt me niet de bedoeling.

Je kunt prima serverside je viewstate bepalen, nee dan is je pagina niet volledig responsive maar kun je afhankelijk van viewstate wel bij het parsen de juiste css-classes meegeven.

Wat ik zelf in dat soort gevallen meestal doe, is pagina's opzoeken die een dergelijke feature hebben, en dan met mijn browser inspector 'spieken' hoe ze het gedaan hebben

Totdat je weer allerlei code confusers tegenkomt of gare aspx-pagina's waarvan de output niet eens meer op html lijkt.

[NickThissen]

Bedankt voor de antwoorden.

JS vind ik geen "goeie" oplossing omdat dit (voor zover ik bekend ben) altijd na het laden van de pagina zal gebeuren en alles dus inderdaad zal gaan verspringen. Bijzonder irritant als er een aantal van deze code boxes op de pagina staan en alles ineens gaat schuiven.

Op de server bepalen hoeveel regels code het zijn is misschien nog wel een goeie optie, nog niet aan gedacht. Responsive valt ook wel mee, het zijn regels code dus ik laat de code horizontaal scrollen ipv wrappen (dat zou niet logisch zijn voor code). Dus ik kan op de server gewoon checken hoeveel regels het zijn en dat relateren aan de line height. Dit ga ik eens proberen.

[Harrie_]

Vergeet niet het beste antwoord te markeren

[Edwin88]

Kan je niet optie 3 nemen, en met JS afvangen wanneer iemand wil resizen en dan de max-height omzetten naar een min-height?