[gelöst] SmartVisu Handy zu weit rechts

[swsmily]

Hallo,

ich bin von SmartVisu 3.0.1 auf 3.1 umgestiegen und habe meinen Pages-Ordner von 3.0.1 in 3.1 kopiert.
Solange die Darstellungsbreite groß genug ist, wird auch alles perfekt angezeigt. Da das Handy aber zu schmal ist, wird richtigerweise das Menü links ausgeblendet, jedoch bleibt ein freier Rand auf der linken Seite, statt dass die rechte Anzeige auf dem gesamten Bildschirm dargestellt wird. Dadurch fehlen am Handy Elemente die ganz rechts sind.

Ebenso am Notebook im Browser, wenn ich das Fenster immer kleiner ziehe, wird ab einer bestimmten Breite zwar das Linke Menü (z.b. Uhr, Wetter usw) ausgeblendet, aber rechts nicht auf das gesamte Fenster erweitert, so wie es unter 3.0.1 war.

Im Anhang als Beispiel zwei Screenshots. Einmal SmartVisu 3.0.1 und einmal 3.1 vom Handy.

Alle Dateien meiner Page sind identisch. In der Base.css hab ich auch keine Änderungen gefunden, die dieses Verhalten erklären könnten.
Hat jemand eine Idee?



EDIT: Ich habe den Grund gefunden. Ich hatte unter 3.0.1 die base.css angepasst, damit auf Tablets und Laptop der linke Rand kleiner ist als im Standard.
Bei 3.1. hab ich die base.css gelassen wie sie ist, dafür aber unter meiner Page die visu.css um ".base .primary" und ".base .secondary" erweitert und dort die breite angepasst.
Ohne diese beiden Stellen in der visu.css funktioniert die Anzeige richtig. Spaltenbreite anpassen hat dann über die base.css funktioniert. Somit wird nun wieder alles richtig angezeigt.

[wvhn]

Danke für die Analyse und die Lösung.

Das Anpassen der base.css sollte aus meiner Sicht vermieden werden, weil dies bei jedem Update wieder nachgezogen werden muss. Dein  Versuch, die Definitionen in die visu.css auszulagern, ging ja in die gleiche Richtung und sollte auch die Vorzugslösung sein.

Deshalb habe ich versucht, Deine Situation nachzustellen, um zu prüfen, welche Definitionen in der base.css die korrekte Ausführung der visu.css verhindern. Zunächst hatte ich einen ähnlichen Effekt und konnte dies lösen, indem ich zusätzlich folgende Definition für kleinere Displays aus der base.css in die visu.css übernommen habe:

Code: [Auswählen]

@media all and (max-width: 767px) {
  .base .primary {
    width: 100%;
  }
}
Ich vermute, dass die visu.css nicht nur die Definitionen .base .primary und .base .secondary überschreibt, sondern auch noch die Definition für die kleineren Displays, so dass man die wiederherstellen muss.

Kannst Du die Lösung bei Dir mal testen?

Gruß
Wolfram

EDIT: fehlende Klammer ergänzt.
 

[swsmily]

Hallo,

genau aus dem Grund um bei Updates nicht jedesmal die visu.css anzupassen, wollte ich auch in die visu.css auslagern.

Ich habe gerade versucht deinen Code in die visu.css zu übernehem und habe zusätzlich auch .base primary und .base .secondary:

Code: [Auswählen]

@media all and (max-width: 767px) {
  .base .primary {
    width: 100%;
  }
 
.base .primary {
  float: right;
  margin-right: 1%;
  padding-right: 1%;
  width: 70%;
}

.base .secondary {
  float: left;
  text-align: left;
  width: 25%;
}

Doch damit ist der Rand wieder da.

Kommentiere ich primary und secondary wieder aus, sieht die Seite wieder ordentlich aus. Dein Code hat bei mir gar keine Änderungen bewirkt.

[wvhn]

Die Anweisung für kleine Displays muss ans Ende:

Code: [Auswählen]

  .base .primary {
  float: right;
  margin-right: 1%;
  padding-right: 1%;
  width: 70%;
}

.base .secondary {
  float: left;
  text-align: left;
  width: 25%;
}

@media all and (max-width: 767px) {
  .base .primary {
    width: 100%;
  }
}



[swsmily]

Ahh, okay. Ich hatte es oben eingefügt. Gerade getestet und unten eingefügt, damit funktioniert es. Wusste nicht, dass die Reihenfolge da auch noch einen Unterschied macht. (CSS ist für mich ein Buch mit Sieben Siegeln  )


Danke für den Hinweis!