Datensicht mit Edit Link, "Eintrag verstecken"-Button

nci
Topic Author
Offline

9 months 2 weeks ago - 9 months 2 weeks ago #9593 by nci

Datensicht mit Edit Link, "Eintrag verstecken"-Button was created by nci

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

Last edit: 9 months 2 weeks ago by nci. Reason: Nachtrag zum Thema eingefügt

Administrator IV
Offline

9 months 2 weeks ago #9602 by Administrator IV

Replied by Administrator IV on topic Datensicht mit Edit Link, "Eintrag verstecken"-Button

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:

Code:

<td>
<a class="btn btn-micro active visToolTip" ...>
<span class="visicon-unpublish"></span>
</a>
</td>

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

I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-)

Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-)

Administrator IV
Offline

9 months 2 weeks ago - 9 months 2 weeks ago #9604 by Administrator IV

Replied by Administrator IV on topic Datensicht mit Edit Link, "Eintrag verstecken"-Button

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.

Code:

.visforms-data-datas tr td:nth-child(2) {
background-color: aqua;
padding: 4px;
}

.visforms-data-datas a.btn.btn-micro {
border: solid;
padding: 4px;
}

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

Code:

.visforms-data-datas tr td:nth-child(2) {
padding: 0 2px;
}

.visforms-data-datas a.btn.btn-micro {
padding: 0;
}

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

Code:

.visforms-data-datas tr td:nth-child(2) {
padding: 0 2px !important;
}

.visforms-data-datas a.btn.btn-micro {
padding: 0 !important;
}

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

Last edit: 9 months 2 weeks ago by Administrator IV.

nci
Topic Author
Offline

9 months 2 weeks ago #9605 by nci

Replied by nci on topic Datensicht mit Edit Link, "Eintrag verstecken"-Button

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)

Moderators: Administrator AV, Administrator IV

Joomla 5 Notice

Forum

Datensicht mit Edit Link, "Eintrag verstecken"-Button

Visforms Subscription

Visforms Extensions