NavButttons in 3.2.05-i

Question

Guten Tag liebe Leute,

wir haben die lokale Hochschullizenz auf Version 3.2.05-i aktualisiert und sind auf ein Problem gestoßen.

Wir haben eine Navigationsleiste nach dem Vorbild erstellt. Wenn wir jetzt allerdings die Navigationsleiste betrachten weicht diese, was vorher nicht der Fall war, von der Vorlage ab, siehe Bild unten:

Die Vorlage benutzt folgenden Code und erzeugt obenstehendes Bild:

  div.NavButtons button {
  border: 2px solid %color.4%;
  border-radius: 5px;
  padding: 7px 6px;
  margin-bottom: 8px;
  flex-grow: 1;
  margin-right: 8px;
}
div.NavButtons button.currentPage {
  background-color: %color.4%;
  color: white;
}

Wir konnten nach einigem Probieren folgende Lösung finden: Setzen von zwei CurrentPages, die den Buttom umschließen:

div.NavB button.currentPage {
  background-color: %color.4%;
  color: white;
}
div.NavB button{
  border: 2px solid %color.4%;
  border-radius: 5px;
  padding: 7px 6px;
  margin-bottom: 8px;
  flex-grow: 1;
  margin-right: 8px;
 cursor: pointer;
}
div.NavB button.currentPage {
  background-color: %color.4%;
  color: white;
 cursor: auto;
}

Code erzeugt folgendes Bild:

Jetzt zu der Frage: Gab es Änderungen beim Versionswechsel bzgl. dieser Funktionalität, oder haben wir bei der Aktualisierung evtl etwas kaputt gemacht. Wie gesagt durch den Fix konnten wir zweites Bild erzeugen.

Liebe Gruesse

Answer 1

Die doppelte Definition der CSS-Formatierung hat eigentlich nur zur Folge, dass die untere Definition im Konfliktfall die obere "überschreibt". Aber Hintergrund-Farbe (background-color) und Textfarbe sind ja eigentlich gar nicht das Problem. Die Darstellung weicht ja wegen dem padding und dem border-radius ab.

Ich glaube deshalb nicht, dass die Doppelung der Definition diesen Effekt hat. Und mir fällt spontan auch keine Änderung aus dem Update ein, welche für die geänderte Darstellung verantwortlich sein könnte.

Wenn Sie möchten, stellen Sie nochmal den vorigen CSS-Code wieder her (wo es nicht klappt) und posten Sie einen Pretest-Link direkt zu der Seite "Evaluation". Dann kann ich mir fix ansehen, weshalb die inaktiven Knöpfe dort nicht formatiert wurden.

Ich vermute, die Abweichung div.NavButtons im oberen Code und div.NavB im unteren Code war lediglich dem Kopieren hier in den Support geschuldet, und es wurden im Fragebogen jeweils die richtigen Klassennamen verwendet.

Comments

Moin,

vielen Dank für die schnelle Antwort. Aufgrund der Struktur der Navigationsleiste musste ich Daten für den Test generieren, der Zugriff ist also auf jede Seite möglich, auch wenn die PDF-Generierung nicht funktioniert:

https://match.hs-albsig.de/Eignung/?act=fAzC8eIKIcBQe1COCP0XdS9W

Soweit ich das sehe, hat die Variante von currentPage nachgestellt zur Folge, dass die Eigenschaften von button nicht "vererbt werden". Wenn currentPage vorgestellt wurde erhält der button seine Eigenschaften, allerdings wird dann currentPage nicht mehr definiert.

Davon abgesehen:
Und zwar kann ich mittels Quellcode untersuchung Links zu anderen Fragebögen auch direkt einsehen, gibt es eine Möglichkeit die schwieriger lesbar zu machen (Siehe bspw. den Link zum Pretest) ?

---

Die korrekte Formatierung der unteren Buttons kommt nicht vom CSS-Code, den Sie oben beschreiben, sondern von folgendem:

a.button-like {
  border: 2px solid #00336A;
  ...

Die Anweisungen für

   div.NavB button {

werden deshalb nicht angewendet, weil das CSS nicht korrekt ist. Der W3C CSS-Validator sagt folgendes:

Einlese-Fehler:
// Navigation zwischen Seiten /* div.NavB button.currentPage { color: white; background-color: #00336A; } */ div.NavB button{ border: 2px solid #00336A; border-radius: 5px; padding: 7px 6px; margin-bottom: 8px; flex-grow: 1; margin-right: 8px; cursor: pointer; background-color: #F2F2F2; font-family: "Source Sans Pro Light", sans-serif ; text-decoration:none; text-align: center; }

Ja, man muss zweimal hinsehen ... das Problem ist, dass es in CSS keinen Kommentar mittels // gibt. Bitte ersetzen Sie

// Navigation zwischen Seiten

durch

/* Navigation zwischen Seiten */

> Und zwar kann ich mittels Quellcode untersuchung Links zu anderen Fragebögen auch direkt einsehen

Ich schlage vor, wir klären das in einer neuen Frage. Da müssen Sie mir aber zunächst erklären, *warum* Sie diese Links zu anderen Fragebögen anbieten.

---

Moin,

ah, wieder was gelernt. Danke habs behoben und es zeigt sich kein Problem mehr.