[JS] Div inhoud niet op volgende regel zetten

[Tanuki]

Is het mogelijk om de inhoud van een div nooit op een volgende regel te laten beginnen (tenzij er een <br /> staat, natuurlijk)?

Ik heb bijv. een div met 4 divs erin en soms zijn die 4 divs (incl. marges) groter dan de breedte van die div, dan zou de laatste div op de volgende regel beginnen, maar ik wil ze toch langs elkaar hebben (en een scrollbalk zien).

Is dit mogelijk?

[joggie]

Met css waarschijnlijk wel...

code:

div {
overflow : scroll;
}

Tip: zoek zelf eens op de site van w3schools (http://www.w3schools.com)

[Tanuki]

joggie schreef op donderdag 28 september 2006 @ 12:08:
Met css waarschijnlijk wel...

code:

div {
overflow : scroll;
}

Tip: zoek zelf eens op de site van w3schools (http://www.w3schools.com)

En dat werkt niet.. Dan laat ie altijd een scrollbalk zien, ookal is de inhoud van die div niet groter dan de breedte van de div.

Ook met overflow: auto; doet ie het niet, hij gaat dan toch nog naar de volgende regel.

Ook met <nobr> doet ie het niet, hij gaat dan alsnog naar de volgende regel.

[Erkens]

Cascading Stylesheet:

overflow: auto;
white-space: nowrap;

[OkkE]

white-space: nowrap; misschien?

[joggie]

Erkens schreef op donderdag 28 september 2006 @ 12:16:

Cascading Stylesheet:

overflow: auto;
white-space: nowrap;

Die zal waarschijnlijk wel werken in jou geval inderdaad...

als je met <nobr> werkt, dan maak je de tekst op met html, en de bedoeling is juist dat je het met css dat, maar dit terzijde.

[Tanuki]

joggie schreef op donderdag 28 september 2006 @ 12:22:
[...]


Die zal waarschijnlijk wel werken in jou geval inderdaad...

als je met <nobr> werkt, dan maak je de tekst op met html, en de bedoeling is juist dat je het met css dat, maar dit terzijde.

Cascading Stylesheet:

div#pdf
{
    background-color: #FFFFFF;
    text-align: left;
    border: 1px solid #000000;
    width: 100px;
    height: 300px;
    line-height: 1px;
    font-size: 1px;
    overflow: auto;
    white-space: nowrap;
}

Dit heb ik nu. En nog steeds komt alles gewoon op de volgende regel in plaats van erachter + een scrollbalk.

Wat doe ik nou fout?

Ik heb overigens een XHTML 1.1 doctype, zou dat veel uitmaken?

[djluc]

Post eens een linkje naar je testpagina a.u.b.

[joggie]

je gaat in een div, diverse div's naast elkaar zetten toch? lukt het je wel om bijvoorbeeld 2 div's naast elkaar te zetten, zonder dat deze op een volgende regel komt?

*edit

zoja hoe heb je dit dan voor elkaar gekregen?

[ Voor 14% gewijzigd door joggie op 28-09-2006 12:38 ]

[Tanuki]

joggie schreef op donderdag 28 september 2006 @ 12:37:
je gaat in een div, diverse div's naast elkaar zetten toch? lukt het je wel om bijvoorbeeld 2 div's naast elkaar te zetten, zonder dat deze op een volgende regel komt?

*edit

zoja hoe heb je dit dan voor elkaar gekregen?

Ja, dat lukt wel.


Hieronder een code die het probleem meer dan duidelijk laat zien (getest onder Fx 1.5 en IE 6):

HTML:

<style>
div#pdf
{
    background-color: #FFFFFF;
    text-align: left;
    border: 1px solid #000000;
    width: 100px;
    height: 300px;
    line-height: 1px;
    font-size: 1px;
    overflow: auto;
    white-space: nowrap;
}
div#pdf div.label
{
    margin: 0px;
    border: 1px solid #000000;
    line-height: 1px;
    font-size: 1px;
    float: left; 
}
div#pdf div.spacer
{
    margin: 0px;
    line-height: 1px;
    font-size: 1px;
}
div#pdf br
{
    line-height: 1px;
    font-size: 1px;
    clear: left;
}
</style>

<div id="pdf">
    <div class="label" style="height: 10px; width: 10px;"></div><br />
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div><br />
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div><br />
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div><br />
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div>
    <div class="label" style="height: 10px; width: 10px;"></div><br />
</div>

[Erkens]

als je float gebruikt dan haal je het element uit de "flow" waardoor de container die je gebruikt geen effect meer heeft.

[joggie]

waarom wil je trouwens zoveel div's in een div nesten? kun je niet beter bijvoorbeeld een <p> element gebruiken?

[Tanuki]

joggie schreef op donderdag 28 september 2006 @ 13:08:
waarom wil je trouwens zoveel div's in een div nesten? kun je niet beter bijvoorbeeld een <p> element gebruiken?

Omdat ik een voorbeeld genereer van een PDF. Op die PDF staan etiketten, X etiketten horizontaal, X etiketten verticaal.

[djluc]

Tabel? Werkt dat niet handiger en zekerder dan een met CSS opgemaakte PDF?

[Tanuki]

djluc schreef op donderdag 28 september 2006 @ 13:59:
Tabel? Werkt dat niet handiger en zekerder dan een met CSS opgemaakte PDF?

Ik maak geen PDF met CSS. Ik laat in een div een voorbeeld zien (aan de hand van de instellingen die je invoert in het formulier) van hoe de PDF eruit zou komen te zien.

[Savantas]

Als je nu hiervoor <span> gebruikt? Op zich kan ik me voorstellen dat je soms een div uit de flow wil halen, maar een div is per definitie bedeold als blok-element. Daarom is er een non-block-element als span. Via CSS kan je zorgen dat deze specifieke spans een vaste etiket-breedte en -hoogte krijgen.
Probeer anders eens inline-block, dan blijft het een block, maar loopt het netjes mee in de flow.
Al vraag ik me af of in dit geval het inderdaad niet handiger is om inderdaad een tabel te gebruiken. Is een stickervel te beschouwen als tabulaire data?

En waarom heb je overal class="label" style="height: 10px; width: 10px;"?
Als je nu de width en height gewoon in je label-declaratie stopt...
Verder kan je dacht ik nooit divjes binnen een andere div eruit laten lopen....

Cascading Stylesheet:

div#pdf
{
    background-color: #FFFFFF;
    text-align: left;
    border: 1px solid #00CED1;
    width: 400px;
    height: 300px;
    overflow: auto;
    white-space: nowrap;
}
div.label
{
    margin: 0px;
    border: 1px solid #000000;
    height: 10px; 
     width: 10px;
     float: left;
}

HTML:

<div id="pdf">
    <div class="label"></div><br />
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div><br />
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div><br />
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div><br />
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div><br />
</div>

Is dit een beetje je bedoeling (met de etiketten dan)? Zodra je de omliggende div#pdf smaller maakt, breekt hij de boel eerder af.

[ Voor 102% gewijzigd door Savantas op 28-09-2006 14:27 ]

[OkkE]

Als 't een grid is, van steeds blokjes van 10x10 pixels (ongeacht of het dan div's of span's zijn), dan kun je toch je #pdf een vaste width meegeven?

[Tanuki]

De divs moeten, ongeacht hoe breed ze in totaal zijn, gewoon door blijven lopen naar rechts. Er mag nooit een nieuwe regel worden begonnen als een div niet meer in de breedte past (dan moet er gewoon een horizontale scrollbalk komen).

En dat is mijn probleem, de divs komen nu gewoon op de volgende regel, maar dat mag alleen gebeuren bij een <br />. Ik ga in ieder geval even kijken of het met spans wel werkt, ik kan me wel vinden in wat je daar over zei.

[OkkE]

Laatmaar, wat ik hier onder zeg heeft ook geen nut -- volgens mij ben ik niet helemaal wakker..

Is het een optie op niet een <br /> neer te zetten, maar in plaats daar van, alle div's die op één regel moeten komen, in een nieuwe div te zetten; zo dus:

HTML:

<div id="pdf">
    <div class="row">
        <div class="label"></div>
        <div class="label"></div>
        <!-- etc. -->
    </div>
    <div class="row">
        <div class="label"></div>
        <div class="label"></div>
        <!-- etc. -->
    </div>
    <div class="row">
        <div class="label"></div>
        <div class="label"></div>
        <!-- etc. -->
    </div>
</div>

[ Voor 9% gewijzigd door OkkE op 28-09-2006 15:02 ]

[Savantas]

Zolang je ze in een div plaatst en die te smal maakt kan je dat ook vergeten... Div is een block-container, alles erin zit ook daadwerkelijk erin...
Wil je perse dat stickers van het papier aflopen? Dan zou je het fauw-colums foefje moeten gebruiken. Dus gewoon een achtergrond (of aparte div met lagere z-index) waaroverheen je de andere sticker-divs (of spans dus) plaatst.

[moozzuzz]

* moozzuzz mompelt *display: inline;* oid voor de labels

De float: left moet er sowieso uit, want de browser zet dan de div er enkel als er nog links plaats is voor een div (en als er dus geen plek meer is, zet ie em op de volgende lijn).

</span>&nbsp;<span class="label"> lijkt me overigens de beste oplossing.

[ Voor 10% gewijzigd door moozzuzz op 28-09-2006 14:56 ]

[OkkE]

Helaas kan je een inline-element zelf geen width en/of height mee geven...
Dit werkt in Firefox, maar uiteraard niet in Explorer.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Cache-Control" content="NO-CACHE">
    <meta name="Author" content="OkkE">
    <meta name="Copyright" content="(C) 2006 OkkE">
    <title>Untitled</title>
</head>
<body>

<style>
#pdf { border: 1px solid red; width: 300px; height: 300px; overflow: auto; 
    white-space: nowrap; }
#pdf .cell { margin: 0; border: 1px solid blue; width: 100px; height: 100px;
    display: table-cell; }
#pdf .cell p { width: 100px; height: 100px; margin: 0; padding: 0; }
</style>

<div id="pdf">
    <div class="row">
        <div class="cell"><p></p></div>
        <div class="cell"><p></p></div>
        <div class="cell"><p></p></div>
        <div class="cell"><p></p></div>
    </div>
    <div class="row">
        <div class="cell"><p></p></div>
        <div class="cell"><p></p></div>
        <div class="cell"><p></p></div>
        <div class="cell"><p></p></div>
    </div>
</div>

</body>
</html>

[Savantas]

OkkE schreef op donderdag 28 september 2006 @ 15:07:
Helaas kan je een inline-element zelf geen width en/of height mee geven...

Werkt bij mij anders wel hoor, <div class=label> door <span class=label> vervangen. Geeft wel ander effect (br komt net niet tot volgende regel...)
Wel ander effect in IE, in FF gaat het ongeacht div of span prima.

[ Voor 27% gewijzigd door Savantas op 28-09-2006 15:21 ]

[OkkE]

Savantas schreef op donderdag 28 september 2006 @ 15:14:
[...]


Werkt bij mij anders wel hoor, <div class=label> door <span class=label> vervangen. Geeft wel ander effect (br komt net niet tot volgende regel...), maar alle vakjes hebben nog steeds ingestelde br/hg van 10px...

In dit voorbeeld blijft de span (met groene border) toch echt maar zo groot als 't woord, en niet 200x200 pixels, zoals in de CSS staat.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Cache-Control" content="NO-CACHE">
    <meta name="Author" content="OkkE">
    <meta name="Copyright" content="(C) 2006 OkkE">
    <title>Untitled</title>
</head>
<body>

<style>
span { width: 200px; height: 200px; border: 1px solid green; }
</style>

<span>Test.</span>

</body>
</html>

[Savantas]

Hmm, in mijn voorbeeld (maar dan met span ipv div) werkt het wel... hier met .label width 20px:


De boel een beetje naar links laten drijven... Als je dat aanpast werkt t ineens wel...
Eingelijk maf, ik dacht dat het aan de strict/loose zou liggen...

[ Voor 53% gewijzigd door Savantas op 28-09-2006 15:35 ]

[Tanuki]

Savantas schreef op donderdag 28 september 2006 @ 14:53:
Zolang je ze in een div plaatst en die te smal maakt kan je dat ook vergeten... Div is een block-container, alles erin zit ook daadwerkelijk erin...
Wil je perse dat stickers van het papier aflopen? Dan zou je het fauw-colums foefje moeten gebruiken. Dus gewoon een achtergrond (of aparte div met lagere z-index) waaroverheen je de andere sticker-divs (of spans dus) plaatst.

Ik zal mijn probleem beter uitleggen.

Ik heb een formulier, daar voer je de volgende waarden in:
- Oriëntatie (portrait of landscape)
- Topmargin
- Leftmargin
- Breedte etiket
- Hoogte etiket
- Horizontale afstand tussen etiketten
- Verticale afstand tussen etiketten
- Aantal etiketten horizontaal
- Aantal etiketten verticaal

Tijdens het invullen van het formulier wordt d.m.v. onchange op de veldjes een voorbeeld gegenereerd in die div.

Het formulier heeft een onsubmit actie die kijkt of er een scrollbalk aanwezig is in de div.

JavaScript:

function pdf_check_size()
{
    // Controleer of er een scrollbalk aanwezig is in de DIV
    if ((document.getElementById('pdf').scrollHeight > document.getElementById('pdf').clientHeight) || (document.getElementById('pdf').scrollWidth > document.getElementById('pdf').clientWidth) && confirm('Het script heeft gedetecteerd dat uw formaat waarschijnlijk buiten de marges zal vallen.\nDit kan mogelijk een "false positive" zijn.\nWilt u toch doorgaan?'))
    {
        return true;
    }
    else
    {
        return false;
    }
}

Maar als er teveel etiketten horizontaal zijn, of als de etiketten of ruimte ertussen te breed zijn, komen de etiketten die dus eigenlijk buiten de marge vallen op de volgende regel. Zo zie je nog niet dat er iets fout is (en zo ziet de functie het ook niet).

Daarom wil ik dus een scrollbalk te zien krijgen.


EDIT: De hele functie e.d. werkt dus wel, het enige wat er nog niet werkt is dat de divs in de PDF-div op de volgende regel komen als ze in totaal (incl. horizontale spacing en leftmargin) te breed zijn voor de pagina.

EDIT 2: Ik kan div.label (of span.label) dus ook geen vaste hoogte/breedte geven, deze komen uit het formulier. Er is een JavaScript functie die m.b.v. de gegevens uit het formulier eerst de PDF-div leeggooit en vervolgens een voorbeeld genereert (en m.b.v. style="height: ..px; width: ..px;" dus een hoogte en breedte geeft aan het etiket).

[ Voor 13% gewijzigd door Tanuki op 28-09-2006 16:08 ]

[OkkE]

1. Ik zou alles met javascript (of server-side) uitrekenen om te zien of het past. Je kunt namelijk nooit garanderen dat het er in elke browser, op elke pc, met elk OS 't zelfde uit ziet. Dus om dan de weergave te gebruiken, wanneer uitrekenen veiliger is, zou ik nooit doen.

2. Om aan te geven dat er iets fout zit, zou ik een js-alert laten zien als 't fout zit. Daarnaast, lijkt het me mooier om de #pdf een vaste width te geven, en als de labels er niet in passen, dit zichtbaar te maken, door ze er juist buiten te laten vallen:

[user109731]

Ik zou dan de pdf-div relatief positioneren, met daarin een absoluut gepositioneerde div met de labels. Van de absolute neergezette div moet je dan wel de width instellen, maar die kun je snel berekenen (aantal labels in de breedte * (breedte + afstand)) en instellen. Door op de buitenste div overflow:auto te zetten zou je dan scrollbalken moeten krijgen.

Ik zou het zelf trouwens ook op Okke's manier doen: overflowen is voor de gebruiker duidelijker dan een scrollbar. Ik zou alleen geen alert gebruiken maar gewoon een rode waarschuwingsdiv zichtbaar maken zodra er overflow is.

[Tanuki]

OkkE schreef op donderdag 28 september 2006 @ 16:16:
1. Ik zou alles met javascript (of server-side) uitrekenen om te zien of het past. Je kunt namelijk nooit garanderen dat het er in elke browser, op elke pc, met elk OS 't zelfde uit ziet. Dus om dan de weergave te gebruiken, wanneer uitrekenen veiliger is, zou ik nooit doen.

2. Om aan te geven dat er iets fout zit, zou ik een js-alert laten zien als 't fout zit. Daarnaast, lijkt het me mooier om de #pdf een vaste width te geven, en als de labels er niet in passen, dit zichtbaar te maken, door ze er juist buiten te laten vallen:

[afbeelding]

Dat eerste is misschien slimmer ja. Ga ik denk ik ook doen. Maar het is ook de bedoeling dat degene die de etiketten "invoert" direct kan zien hoe het resultaat eruit zal zien.

#pdf hééft een vaste breedte, daarom snap ik niet waarom, i.c.m. overflow: auto, de geneste divs tòch op de volgende regel beginnen.

[OkkE]

Omdat het losse elementen zijn, die ge-float worden, denk ik. Als #pdf een vaste breedte heeft, en het is geen probleem om de <br /> te vervangen door een <div> met een class="row", die je om de etiketten (die op één regel moeten komen) zet, dan kan je die ook een vaste breedte geven, en zou 't probleem opgelost kunnen worden; je kunt dan de div.row ook een breedte geven (die je moet berekenen, maar zo breedt als nodig is) en ze blijven dan wel op één regel.

Toch blijf ik er bij, dat het imo duidelijker zou zijn, om zoals ik poste, niet met een scrollbar te werken maar de etiketten er buiten te laten vallen (dmv.: position: absolute;).

[ Voor 14% gewijzigd door OkkE op 29-09-2006 10:09 ]