Datensicht mit Edit Link, "Eintrag verstecken"-Button

Hallo,

wie gewünscht ein extra Thema für die zweite Frage zur Datensicht.

Beim Button "Eintrag verstecken" sind bei mir für den Link die Bootstrap-Klassen "btn btn-micro active" mit drin.
Das sorgt leider dafür, dass der Button nicht 14x14 wie der Edit-Link groß ist, sondern durch Padding deutlich größer.
Woran liegt das? Welchen CSS-Selektor könnte ich zur Not verwenden um das rückgängig zu machen? Der Link hat leider keine ID.

NACHTRAG: Thread ist leider im falschen Unterforum gelandet - bezieht sich auf Visforms

Hallo nci,

die kurze Antwort lautet: es liegt an deinem Template.

Der Hintergrund wird in der Dokumentation beschrieben.
Visforms besondere Strategie der passiven Integration:
docs.joomla-4.visforms.vi-solutions.de/d...passiven-integration

Zu der Frage nach einem geeigneten CSS Selektor gibt es ebenfalls in der Dokumentation einen Abschnitt.
HTML und CSS Struktur:
docs.joomla-4.visforms.vi-solutions.de/d...ml-and-css-struture/

Für deinen Fall der Daten-Ansicht im Frontend sind folgende Teile von besonderem Interesse:
Der äußere HTML-Bereich: Anwendungsfall: Gespeicherte Übertragungen:
docs.joomla-4.visforms.vi-solutions.de/d...e-%C3%BCbertragungen
Der innere HTML-Bereich: Ansichten mit dem HTML table-Element:
docs.joomla-4.visforms.vi-solutions.de/d...m-html-table-element

Das td-Element mit dem Icon sieht wie folgt aus:
Daraus lassen sich viele mögliche CSS-Selektoren bauen, die die entscheidende Stelle referenzieren.
Je nachdem, woher das Padding aus deinem Template tatsächlich kommt, musst du eventuell etwa mit der Position des td-Elements innerhalb des tr-Elements arbeiten.

CSS :nth-child() Selector:
www.w3schools.com/cssref/sel_nth-child.php

Dazu musst du die Seite an der betroffenen Stelle in den Entwickler-Tools des Web-Browser anschauen.
Dort kannst du dann genau sehen,
- woher das Padding kommt und
- welche Teile du am besten für den CSS-Selektor verwendest.

Liebe Grüße, Ingmar

Hallo nci,

ich gehe davon aus, dass du ein Bootstrap 5 Template verwendest und diese Einstellung auch in der Formular-Konfiguration auf dem Reiter 'Erweitert' in der Option 'Ui Framework' gewählt hast.

Das Visforms CSS für die Datenansicht im Frontend 'visdata.css' setzt das Padding für
- das <td> Element auf 'padding:0 2px;'
- das <a> Element auf 'padding:0;'.

Alle Änderungen diesbezüglich bringt das gewählte Template mit sich.

Ich gehe davon aus, dass bei deiner Ansicht der Link-Button "Eintrag verstecken" in der zweiten Spalte erscheint.

Du kannst etwa mit den folgenden Selektoren das <td> und das <a> wie folgt treffen.
Hier als Beispiel einfach eine farbliche Veränderung, die deutlich zu sehen ist.


Um das Visforms CSS aus 'visdata.css' zu 'wiederholen' kannst du etwa  folgendes CSS verwenden:


Um das Visforms CSS aus 'visdata.css' gegen dein Template zu 'erzwingen' kannst du etwa folgendes CSS verwenden:


Der CSS-Selektor Teil '.visforms-data-datas' geht aus der genannten Dokumentation hervor.
Er wird für folgenden Anwendungsfall gesetzt:
Gespeicherte Übertragungen: Datensatz-Liste.

Liebe Grüße, Ingmar

Hallo Ingmar,

vielen Dank für die ausführlichen Erklärungen. Damit sollte ich auf jeden Fall weiterkommen.

Eine Frage noch aus Interesse:

• Beim Button "Eintrag verstecken" erscheinen die Klassen "btn btn-micro active" im Link
• Beim Button "Eintrag bearbeiten" erscheinen diese Klassen hingegen nicht (so hatte ich es erwartet)

Wie kommt es dazu das beide Links unterschiedliche Klassen haben, wenn doch beide von Visforms kommen?

Gruß Frank
N-Club International e.V. (NCI)