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-

 

[colaholiker]

... deaktiviere ich im CSS- Block '.el-txt-dia {display: none;}' werden die Textfelder untereinander gelegt, und werden auch nur dargestellt wenn sie Text enthalten.
Das ist nicht logisch... aber gut für mich.

Jetzt geht es an die anderen Ellemente.

 

[Sclero2004]

Guten Abend,

Mit Versuchen in CSS hatte ich die <div> garnicht untereinander bekommen.

Das wundert mich ein wenig weil normaler Weise div-Container ohne weiteres Zutun untereinander angeordnet werden. Es sei denn, anderes CSS schreibt etwas anderes vor.
Aber unabhängig davon kannst Du mit Flexlayout die Elemente in einem Container sehr einfach und zuverlässig untereinander anordnen:

#dein-container {
    display: flex;
    flex-direction: column;
}

 

[colaholiker]

Hi Sclero2004,

weil normaler Weise div-Container ohne weiteres Zutun untereinander angeordnet werden.

Hab ich ja gemerkt, als ich 'display: none' entfernt hatte (s.#2).
Deshalb sind die Textcontainer erstmal garnicht formatiert. Ändere ich aber morgen wegen Font usw. noch.

Inzwischen hab ich die Buttons in einen zusätzlichen, gemeinsamen Container getan. Ob das so bleibt wird sich auch noch zeigen.
"flex-direction" lädt zum testen ein (umschalten column/row).

Vormittags hab ich mehr Programmierpower, daher...

 

[colaholiker]

Guten Morgen,

Mit dem Stylen bin ich noch nicht fertig. Aber momentan baue ich meinen Code auf eine einzige Dialogbox um, daher leider eine offtopic-Frage zu Javascript:

<button class='el-dia' id='confirm-action' data-action='/nFolder'>ok</button>

Diesen Button in der Dialogbox würde ich gern mit verschiedenen 'data-action'- Werten versehen um damit seinen Zweck in verschiedenen Anwendungen zu selektieren.

document.getElementById('confirm-action').dataset.action = 'new-action';

funktioniert nicht.

-ist die Syntax falsch oder geht es so garnicht?
- danke-

 

[Sclero2004]

Ich kann da keinen Fehler erkennen und auch wenn ich es teste, funktioniert es:

    <button class='el-dia' id='confirm-action' data-action='/nFolder'>ok</button>
    <script>
        document.getElementById('confirm-action').dataset.action = 'new-action';
        console.log(document.getElementById('confirm-action').dataset.action);
    </script>

Gibt "new-action" aus.
Was heißt denn genau, dass es nicht funktioniert?

 

[colaholiker]

Tatsache, geht auch bei mir. War wohl zu spät gestern Abend...
Dann kann ich meinen Workaround wieder zurückbauen :-)

 

[colaholiker]

Guten morgen,
ab jetzt habe ich wieder themenkonforme Fragen, erstmal zwei:

In dieses Element (liegt in der Dialogbox)

[Javascript]
<input  class='el-dia' type='text' id='newName' name='newName' size= '30' value= 'neuerName'/>

gebe ich z.B. einen vorbereiteten Standardtext ein:

[Javascript]
let
ba= document.getElementById('newName'),
ba.value = 'neuer_Ordnername';

Der Focus (Cursor) befindet sich dann am Ende des Textes.

- Ist es möglich, den Text statt dessen markiert (also blau hinterlegt) zu bekommen?
Der Cursor verschwindet, wenn ich das per Maus mache, aber ich kann den Text sofort überschreiben. Das ist mein Ziel.

nächste Frage:

[Javascript]
ta.textContent = ''; tb.textContent = '';
tc.textContent = ''; td.textContent = '';
ba.style.display = 'none'; bb.style.display = 'none';
bc.style.display = 'none'; ba.value = '';
[usw.]

Ich muß die ganze Dialogbox in "Grundstellung" bringen, nachdem ich per 'switch' für jeden Fall Elemente eingestellt hatte.

Von Aaron hab ich ja gelernt, daß css schon vieles erledigen kann.

geht sowas:

[css]
#combi-dialog [closed] {
     #el-text-dia {textContent = ''};
     #dia-btns {display: none};
     .area-txt {display: none};
     ...
}

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.

In meinem Fantasiecode fallen mir zwei Punkte auf:
1. geht es grundsätzlich mit [close] oder [closed] ? Eventuell [onload, closed] ?

2. kann man andere Elemente in den {}-Klammern stylen oder nur in diesem Fall "#combi-dialog"- Eigenschaften?
-danke-

 

[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.

 

[Sclero2004]

Zu der zweiten Frage: Auf diese Weise kannst Du nur CSS-Eigenschaften ändern und ich sehe in deinem Code zwei Probleme:
1. Du hast hier ein Leerzeichen drin: #combi-dialog [closed]. Das bewirkt, dass ein Nachfahren-Element von #combi-dialog mit dem Attribut closed angesprochen wird:

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Kombinator#Nachfahrenselektor

Du willst jedoch das Element selber, daher musst Du das Leerzeichen weg lassen.
Inhalte kannst Du mit CSS jedoch nicht ändern, das geht nur in den Pseudoelementen ::before und ::after
2. Das dialog-Element hat für die Anzeige ob es offen ist, nur das Attribut "open", das musst Du verwenden für die Prüfung:
#combi-dialog[open] Dialog ist offen
#combi-dialog:not([open]) Dialog ist geschlossen

 

[colaholiker]

Einmal Tante google gefragt und siehe da

Danke MSI (was ist Google? ;-)
Das Linkbeispiel markiert den Text erst, wenn in das Feld geklickt wird. Das ist fast was ich wollte.
Meine Tests haben dann was ganz Einfaches ergeben:

    ba.value = 'neuer_Ordnername';
    ba.style.backgroundColor = '#dcd389';
    ba.select();

(ba ist das Input-Element)
So ist der Text schon ohne jedes Zutun markiert.

 

[colaholiker]

1. Du hast hier ein Leerzeichen drin: #combi-dialog [closed].

Kein Problem, das war ja nur ein Fantasiecode (um mein Vorhaben deutlicher zu machen).

Ja, es geht mir darum, die Elemente in der Dialogbox zu stylen (.style.display = ...) bzw. Eigenschaften zu entfernen (z.B. Farbe).

Der Text in <div>- Containern ist natürlich kein Styling, das ist mir klar. Es ist nur so, daß die <div> Elemente nicht angezeigt werden wenn kein textContent drin ist.
Wenn man das mit stylen hinbekommt wäre das auch ein Weg.

Ich wollte hauptsächlich wissen, ob ich im Dialogbox-Element deren innere Elemente einfügen kann (per Klasse oder ID) und die sich dort stylen lassen.

#combi-dialog[open] Dialog ist offen
#combi-dialog:not([open]) Dialog ist geschlossen

Das ist doch schon eine wichtige Info. Wirkt denn not([open]) schon beim Seitenstart?

Den Link sehe ich mir morgen an, muß heute erst noch Codefehler suchen...

 

[Sclero2004]

daß die <div> Elemente nicht angezeigt werden wenn kein textContent drin ist.

Das wird mit CSS nicht gehen, man kann sich nicht auf Inhalte von Nachfahrenelementen beziehen.

Wirkt denn not([open]) schon beim Seitenstart?

Ja.

 

[colaholiker]

Das wird mit CSS nicht gehen, man kann sich nicht auf Inhalte von Nachfahrenelementen beziehen.

Mißverständnis! In meinem Satz war von css keine Rede.
Ich meinte: ganz ohne css werden "leere" <div> nicht angezeigt.
Also habe ich bisher mit Javascript "a.textContent = ''; " benutzt.

Aber ich werf ja nichts weg!
Als es noch viele Dialogboxen gab (Version 19), haben wir beide

<div id='action-delete-dialog' style='display:none;'>delete</div>

gebaut.
Und das ist ja schon die Antwort für CSS, oder?

Den Text muß ich dann eigentlich nicht mehr löschen, weil das <div> Element ja immer einen aktuellen Inhalt zugewiesen bekommt, ehe es gezeigt wird.

ich wollte hauptsächlich wissen, ob ich im Dialogbox-Element deren innere Elemente einfügen kann (per Klasse oder ID) und die sich dort stylen lassen.

Das teste ich aber alles erst ab morgen.

[remember]: Wir Zwei hatten ja mal am File- Upload gearbeitet. Button "Upload" --> Form zur Eingabe erscheint.
Vor ein paar Tagen gemerkt: das läßt sich 'zigmal nacheinander machen = doof.

Diesen Button hatte ich nach Klick disabled und in Version19 ging das auch.
Jetzt nicht mehr. Ist mein Abend-Job...