Monatsrückblick Januar/Februar 2026 ist online!

[Uwe Waizmann]

Hallo Zusammen,
ich habe mein erstes Projekt in vis 2 erstellt.
Klassische Seite mit Header (oben) Menu (rechts) und content (mitte) .
Seite ist für ein Tablet und der content Bereich soll scrollbar sein.
Ich habe das alles auf der home Seite mit dem Widget basic view in widget8 zusammen gebaut. Header und Menu haben feste Maße bekommen. Der Content ist aber länger und soll deshalb scrollbar sein. Ich bekomme das einfach nicht hin.
Kann mir jemand auf die Sprünge helfen?

Viele Grüße Uwe

[OliverIO]

@Uwe-Waizmann

und was hast du schon alles probiert?

[Uwe Waizmann]

im css eine Klasse erstellt
.scrollContent {
overflow-y: auto;
overflow-x: hidden;

Die scrollContent dann beim Widget für den Content bei Widget generell Allgemein bei css Klasse eingetragen

[OliverIO]

@Uwe-Waizmann

kannst du bitte deinen fall mal so minimal wie möglich in einem extra projekt nachbauen und das projekt exportieren, so das man das ausprobieren kann.
gerne auch schriftlich mit dokumentieren, was man zusätzlich noch anlegen muss. ich denke aber so ein minimalbeispiel kommt auch ohne datenpunkte aus.

es gibt zwar die ganzen css einstellungen, du hast sogar zusätzlich eine eigene css klasse definiert.
vis2 verwendet react komponenten die oft in sich auch nochmal verschachtelt sind. daher muss man die css klassen oft noch spezifizieren, so das sie das richtige html element treffen.

wenn du dich mit den web developer tools auskennst, kannst du auch gerne selber schauen. Zusätzlich kann auch die dokumentation hier https://mui.com/material-ui/getting-started/ helfen. ist aber nicht immer ganz so einfach.

[Uwe Waizmann]

habe es mal exportiert. Ich bekomme es eunfach nicht hin, dass die Contentseiten im content widget angezeigt werden
2026-03-03-homeEinfach.zip

[OliverIO]

@Uwe-Waizmann
Es scrollt doch. oder habe ich irgendeine Erläuterung verpasst?
3e4774c3-0895-499b-b11c-d48e38433d7b-20260317-1435-03.7508501.mp4
wo finde ich nun deine Anweisung mit dem overflow?

Das ist auch nicht ganz richtig:

Der CSS Reiter muss gültiges CSS enthalten wie wenn es in einem html style -Element (nicht style attribut) geschrieben wäre. Hier fehlt der css selektor, also die Anweisung anhand der browser weiß welche Elemente wirklich von der Änderung betroffen ist
https://wiki.selfhtml.org/wiki/Einstieg_in_CSS/Stylesheets_einbinden#zentral_in_einem_style-Element

Die folgende Anweisung ist wahrscheinlich relativ radikal,da es wirklich sich auf alle Elemente innerhalb dem body Element auswirkt. Da wirst du genauer sepzifizieren, wo die Formatierung treffen soll

body {
  background: rgba(20,20,24,0.95);
  border-left: 1px solid rgba(255,255,255,0.08);
}

[Uwe Waizmann]

Hey Danke für den Hinweis. Es werden der Header und das Menu nicht angezeigt und die sollten statisch sein das nur der Contentbereich soll scrollt. Der overflow habe ich im basic view in widget8 im content bereich

[OliverIO]

@Uwe-Waizmann

klappt auch
8b0bbdaa-017d-4822-b64f-a0b3e2f40e6d-20260317-1549-24.8076790.mp4

dein problem ist wahrscheinlich, das du im view main
bei default kein kreuz gemacht hast und sich daher nicht die richtige view in
der runtime öffnet.
man muss auch bei den anderen views prüfen das default dort NICHT gesetzt ist.

[Uwe Waizmann]

oh mein Gott, so einfach.:-) Vielen hjerzlichn Dank.
Jetzt habe ich nur noch das Problem wie ich die Contentseiten aufrufe.
Aktuell nehme ich ein Standart html. welches Widget wäre das richtige mit welchen Einstellung.
Aktuell öffne ich die Contentseite immer komplett ohne Header und Menu

[OliverIO]

@Uwe-Waizmann

du müsstest im view main
im widget content
im attribut contains_view mit einem binding arbeiten.
bspw so

{id:local_mainview;id?id:"home_content"}

der Vorsatz local_ bedeutet das der datenpunkt nur im browser existiert.
das restliche sorgt dafür, das wenn der datenpunkt noch nicht belegt ist, der view home_content angezeigt wird.

jetzt brauch man nur noch einen knopf, der den jeweilig gewünschten view namen in diesen datenpunkt schreibt. da kenne ichn gerade keinen. evtl weiß noch jemand anderes da was.
die normalen nav buttons schalten einfach die komplette view um, du willst ja immer nur auf main bleiben und nur in content den jeweilige view umschalten

[OliverIO]

@Uwe-Waizmann

Ich habe dir noch die Lösung für deine Navigationsbuttons:

• Die vorhandenen Menü widgets musst du löschen.
• Ein neues html widget einfügen mit folgendem Inhalt
• welcher view dann ausgelöst werden soll musst du in der Zeile mit onclick eintragen.
• Die Beschriftung ist glaube ich klar, dort wo hier im beispiel "Home" steht.

<div 
  onclick="vis.setValue('local_mainview','home_content')" 
  style=" width:100%; height:100%; background:linear-gradient(180deg, rgba(45,45,52,0.95) 0%, rgba(30,30,36,0.95) 100%); border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:Arial; font-size:15px; font-weight:bold; color:#ffffff; cursor:pointer; "
>
    Home
</div>

Wenn du den Button klickst, schreibt der Befehl den view Namen in den lokalen Datenpunkt. Das Binding im content widget sorgt dann dafür das der view gewechselt wird.

[Uwe Waizmann]

Super, vielen Dank es klappt wunderbar