Frage Dialogbox stylen: Elemente untereinander

[colaholiker]

Eigentlich einfach, aber...

        <dialog id='combi-dialog'>
            <div class='el-txt-dia' id='row1-dialog'></div>
            <div class='el-txt-dia' id='row2-dialog'></div>
            <div class='el-txt-dia' id='row3-dialog'></div>
            <div class='el-txt-dia' id='row4-dialog'></div>
           
            <button class='el-dia' id='confirm-action1' data-action='delete'>ja</button><br>

            <input  class='el-dia' type='text' id='fname' name='fname' size= '30' value= 'neuerName'/><br>
            <button class='el-dia' id='confirm-action' data-action='rename'>ok</button><br>
           
            <img  class='el-dia' id='view-img' alt='nicht darstellbar ' />
            <textarea class='el-dia' id='view-txt' rows='30' cols='90'></textarea>
            <br>
            <button class='dia' id='close-dialog'>schließen</button>
        </dialog>

ich hatte die Idee, "Eine für Alles", weil jetzt die 4. und 5. Dialogbox in den Code gekommen wären:-(

Also habe ich mir diese universelle Dialogbox ausgedacht und im CSS die Klassen 'el-txt-dia' (Textfelder) und 'el-dia' (andere Elemente) unsichtbar geschaltet (bei den Textfeldern evtl. unnötig: wenn nichts drinsteht werden sie wohl eh nicht angezeigt).

Die Textfelder sind erstmal das Problem.
Setze ich <br> ein, nach den <div> Containern, sind auch die <br> der nicht sichtbaren Container aktiv.
Mit Versuchen in CSS hatte ich die <div> garnicht untereinander bekommen.

Am besten wäre es, bei Eingabe des Textes etwa sowas zu tun:

document.getElementById('row1-dialog').textContent = 'Einen neuen Ordner erstellen\n';

- also '\n'. Undzwar als "Umbruch" für den <div> Container. Bedeutet, daß ich gerne die Wahl 'neue Zeile" oder 'gleiche Zeile' an dieser Stelle im Javascript hätte.

Falls so etwas nicht geht oder viel Code benötigt wäre es auch ok, im CSS-Bereich die Textfelder untereinander, und die Buttons nebeneinander zu bekommen. Dazu habe ich die 2 Klassen vergeben.
Wichtig ist, daß ausgeblendete Elemente "nichts" im Styling bewirken.
Wie geht man hier vor?
-TIA-

 

[msi]

Ist es möglich, den Text statt dessen markiert (also blau hinterlegt) zu bekommen?

Einmal Tante google gefragt und siehe da: https://www.w3docs.com/snippets/jav...text-input-when-clicked-using-javascript.html

Ich möchte erreichen, daß nach schließen der Dialogbox (und natürlich beim Start der Webseite) die Elemente in der Dialogbox in "Grundstellung" gelangen ohne das in Javascript zu tun.

Per CSS wird das wohl nicht gehen.