Inhalte gehen übern Rand

[pl]

Hi,

siehe

Es ist ein FOrm, hier die Styles:

cursor:move;
display:none;
width:60%;
padding:0.5em;
border-style:solid;
background:silver;
border-width:0.1em;
position:fixed;top:50%;
right:1em

Was wäre denn zu ändern, dass lange Dateinamen o.a. Inhalte nicht über den Rand hinausgehen?

Bitte mal um Hinweise, danke und Gru?

[Der Martin]

Hallo,

Es ist ein FOrm, hier die Styles:

cursor:move;
display:none;
width:60%;
padding:0.5em;
border-style:solid;
background:silver;
border-width:0.1em;
position:fixed;top:50%;
right:1em

Das mit dem display:none ist'n Witz, oder? Da das Element angezeigt wird, muss zumindest dieser Wert irgendwo noch überschrieben werden. Anyway, wenn ich mir das Bild ansehe, muss da außer dem form-Element noch ein zweiter Container im Spiel sein. Dass der überlange Dateiname oben aus dem Element hinausläuft, ist ja nachvollziehbar - aber die Formularelemente darunter sollten ja wohl innerhalb bleiben. Ergo orientieren die sich in Wirklichkeit an einem anderen Blockelement, dessen Breite durch den langen Dateinamen gedehnt wird.
Für eine bessere Analyse wäre das komplette Markup des fraglichen Ausschnitts nötig, sowie das CSS aller beteiligten Elemente.

Was wäre denn zu ändern, dass lange Dateinamen o.a. Inhalte nicht über den Rand hinausgehen?

Normalerweise ein overflow:hidden - aber dann werden überlange Inhalte am Rand abgeschnitten. Du könntest aber auch den Dateinamen, der ja offenbar sehr lang werden kann, in ein input- oder noch besser ein output-Element fester Breite stecken.

So long,
 Martin

[pl]

Das mit dem display:none ist'n Witz, oder? Da das Element angezeigt wird, muss zumindest dieser Wert irgendwo noch überschrieben werden.

Richtig! Angezeigt wirds erst, wenn eine Datei angeklickt wird ansonsten ist das ja nicht notwendig. Außer dem File-Panel gibts noch ein Dir-Panel mit dem gleichen Problem. Hier das ganze Form:

<form id="fileprops" onmousedown="dragStart(this);" style="cursor:move;display:none;width:60%;padding:0.5em;border-style:solid;background:silver;border-width:0.1em;position:fixed;top:50%;right:1em;">
    <fieldset><legend><strong>Datei: <code id="fileentity"></code> <a id="filedir">Verzeichnis</a>  </strong></legend>
        <input type="hidden" name="infile" id="infile" />
        <input type="hidden" name="curdir" id="curdir" />

        <table class="grid" style="width:100%">
            <tr>
                <th style="text-align:left">Größe /bytes</th>
                <th style="text-align:left">Zuletzt geändert</th>
                <th style="text-align:left">Content-Type</th>
            </tr>
            <tr>
                <td id="filesize"></td>
                <td id="filemtime"></td>
                <td id="filemtype"></td>
            </tr>
        <table>

        <fieldset><legend><strong>Dateiberechtigungen:</strong></legend>

            <table class="grid" style="width:100%">
                <tr>
                    <th>Owner</th>
                    <th>Group</th>
                    <th>Other</th>
                </tr>
                <tr>
                    <td><input name="owner" value="4" type="checkbox" id="owner_read"> Lesen</td>
                    <td><input name="group" value="4" type="checkbox" id="group_read"> Lesen</td>
                    <td><input name="other" value="4" type="checkbox" id="other_read"> Lesen</td>
                </tr>
                <tr>
                    <td><input name="owner" value="2" type="checkbox" id="owner_write"> Schreiben</td>
                    <td><input name="group" value="2" type="checkbox" id="group_write"> Schreiben</td>
                    <td><input name="other" value="2" type="checkbox" id="other_write"> Schreiben</td>
                </tr>
                <tr>
                    <td><input name="owner" value="1" type="checkbox" id="owner_execute"> Ausführen</td>
                    <td><input name="group" value="1" type="checkbox" id="group_execute"> Ausführen</td>
                    <td><input name="other" value="1" type="checkbox" id="other_execute"> Ausführen</td>
                </tr>
                
                <tr>
                    <td colspan="3" style="text-align:center">
                        <button onclick="fileapply(1)" type="button" style="width:25%;padding:0.2em">Chmod File</button>
                        <button onclick="speichernunter()" type="button" style="width:25%;padding:0.2em">Save As ...</button>
                        <button onclick="deletefile(1)" type="button" style="width:25%;padding:0.2em;color:red">Datei Löschen</button>
                    </td>
                </tr>
            </table>

        </fieldset>



        <button style="width:100%;padding:0.2em" type="button" onclick="$('#fileprops').css('display','none')">Panel Schließen</button>
    </fieldset>
</form>

word-wrap ist wirkungslos, weil Verzeichnis/Dateinamen keine Leerzeichen haben.

[Der Martin]

Hallo,

Das mit dem display:none ist'n Witz, oder? Da das Element angezeigt wird, muss zumindest dieser Wert irgendwo noch überschrieben werden.

Richtig! Angezeigt wirds erst, wenn eine Datei angeklickt wird ansonsten ist das ja nicht notwendig. Außer dem File-Panel gibts noch ein Dir-Panel mit dem gleichen Problem.

vermutlich weil es nach dem gleichen Muster aufgebaut ist.

Hier das ganze Form:

<form id="fileprops" onmousedown="dragStart(this);" style="cursor:move;display:none;width:60%;padding:0.5em;border-style:solid;background:silver;border-width:0.1em;position:fixed;top:50%;right:1em;">
    <fieldset><legend><strong>Datei: <code id="fileentity"></code> <a id="filedir">Verzeichnis</a>  </strong></legend>
        <input type="hidden" name="infile" id="infile" />
        <input type="hidden" name="curdir" id="curdir" />

        <table class="grid" style="width:100%">

Danke, reicht schon. Da ha'm wir's doch schon: Das fieldset hat keine Breitenangabe, also dehnt es sich so weit aus, wie es sein Inhalt erfordert. Das legend-Element mit dem überbreiten Inhalt bestimmt also die Breite seines übergeordneten fieldset. Naja, und die Tabelle nimmt dann 100% dieser Breite ein.

Abhilfe: Die fieldsets auch mit 100% Breite angeben. Dann läuft ein legend-Element mit überlangem Dateinamen zwar immer noch aus der Box raus, aber das restliche Formular passt.

word-wrap ist wirkungslos, weil Verzeichnis/Dateinamen keine Leerzeichen haben.

Lies nochmal nach: break-word: erlaubt Umbruch innerhalb des Wortes
Ob das in allen relevanten Browsern (bzw. deren evtl. nicht mehr ganz aktuellen Versionen) geht, kann ich aber nicht sagen.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

word-wrap ist wirkungslos, weil Verzeichnis/Dateinamen keine Leerzeichen haben.

Lies nochmal nach: break-word: erlaubt Umbruch innerhalb des Wortes
Ob das in allen relevanten Browsern (bzw. deren evtl. nicht mehr ganz aktuellen Versionen) geht, kann ich aber nicht sagen.

Can I use can.

LLAP 🖖

[Gunnar Bittersmann]

@@pl

<form id="fileprops" onmousedown="dragStart(this);" style="cursor:move;display:none;width:60%;padding:0.5em;border-style:solid;background:silver;border-width:0.1em;position:fixed;top:50%;right:1em;">

Style-Angaben gehören ins Stylesheet, nicht ins HTML.

Eventhandler gehören ins JavaScript, nicht ins HTML.

    <fieldset><legend><strong>Datei: <code id="fileentity"></code> <a id="filedir">Verzeichnis</a>  </strong></legend>

Das strong-Element ist fehl am Platz; Styling (Fettschrift) per CSS.

Das a-Element ist fehl am Platz; die ID kannst du sicher dem fieldset-Element geben.

        <table class="grid" style="width:100%">
            <tr>
                <th style="text-align:left">Größe /bytes</th>
                <th style="text-align:left">Zuletzt geändert</th>
                <th style="text-align:left">Content-Type</th>

S.o.

        <fieldset><legend><strong>Dateiberechtigungen:</strong></legend>

S.o.

                    <td><input name="owner" value="4" type="checkbox" id="owner_read"> Lesen</td>
                    <td><input name="group" value="4" type="checkbox" id="group_read"> Lesen</td>
                    <td><input name="other" value="4" type="checkbox" id="other_read"> Lesen</td>
                </tr>
                <tr>
                    <td><input name="owner" value="2" type="checkbox" id="owner_write"> Schreiben</td>
                    <td><input name="group" value="2" type="checkbox" id="group_write"> Schreiben</td>
                    <td><input name="other" value="2" type="checkbox" id="other_write"> Schreiben</td>
                </tr>
                <tr>
                    <td><input name="owner" value="1" type="checkbox" id="owner_execute"> Ausführen</td>
                    <td><input name="group" value="1" type="checkbox" id="group_execute"> Ausführen</td>
                    <td><input name="other" value="1" type="checkbox" id="other_execute"> Ausführen</td>
                </tr>

Die Checkboxen haben allesamt keine Beschriftung. Sollten sie aber haben: label.

<td>
  <input name="owner" value="4" type="checkbox" id="owner_read">
  <label for="owner_read">Lesen</label>
</td>

etc.

                    <td colspan="3" style="text-align:center">

Es müffelt nach Layout-Tabelle.

LLAP 🖖

[Rolf b]

word-wrap ist wirkungslos, weil Verzeichnis/Dateinamen keine Leerzeichen haben.

Richtig für CP/M, MS-DOS, Windows bis 3.11 und Altlastbetriebssysteme wie VMS oder z/OS.

Falsch für Windows ab Win95 und Unix (damit auch Mac). Hier ist richtig, dass Leerzeichen problematisch sind, weil es Programme gibt, die die zitierte Aussage als universell wahr voraussetzen. Richtig ist auch, dass Leerzeichen am Rand des Namens eines Pfad-Elementes unter Windows ein Problem sind, weil es sie wegschneidet.

(Quelle)

Rolf

[Tagwächter]

Was wäre denn zu ändern, dass lange Dateinamen o.a. Inhalte nicht über den Rand hinausgehen?

• overflow-wrap

[Rolf b]

Auch zum Thema gehörig: white-space:normal und overflow:hidden. Mit overflow-wrap (neuer Name für word-wrap) steuerst Du, ob ein Umbruch im Wort akzeptabel ist oder nicht.

Du kannst auch text-overflow:ellipsis verwenden, um zu lange Inhalte durch "..." abzuschneiden (was overflow:hidden voraussetzt). Du solltest den vollen Inhalt dann aber als Tooltip vorsehen. Z.B. mit dem title-Attribut (was aber nicht notwendigerweise als Tooltip dargestellt wird), oder handgemacht per :hover Style.

Schau Dir die Optionen der genannten CSS Eigenschaften genauer an, falls Du mit diesen Einstellungen nicht gut genug fährst.

Rolf

[pl]

Ach ich Depp: <code> verhindert den Umruch.

und jetzt ab, ins Reine schreiben das geile Teil ;)

PS: Der Andere Dateimanager ist ohne Ajax und macht Fenster auf. Hat alles seine VorUndNachTeile.