Wechsel zw. Default-Layout und Standard-Bootstrap?

Ist es möglich, zwischen zwei Layouts in Abhängigkeit der Bildschirmgröße zu wechseln? Ich versuche in der Desktop-Ansicht das Standard-Layout und ab einer gewissen Unterschreitung der Bildschirmgröße das Bootstrap-Layout zu verwenden, denn in der mobilen Ansicht ist links einfach zu wenig Platz für die Feldbezeichnungen. Die sollten besser über dem Feld stehen.

Mit einem einfachen Klassenwechsel des Formulars klappt es leider nicht (z.B. Klasse form-horizontal rausnehmen). Hat jemand eine Lösung, wie man also in Abhängigkeit der Bildschirmgröße die Layouts switchen kann?

Viele Grüße und Danke im Voraus für hilfreiche Tips!!!

Johannes

Hallo Johannes,

nein das ist leider nicht möglich. Sinn der Bootstrap Layouts ist es doch gerade, dass man sie auf allen Bildschrimen gut verwenden kann, weil sie sich responsiv verhalten.

Warum kannst du denn nicht überall das Bootstrap Layout verwenden? (Ich würde es mit dem horizontalen Bootstrap Layout versuchen).

Gruß,
Aicha

Hallo Aicha,

vielen Dank für die schnelle Antwort.

Bei einem breiten Bildschirm ist das Default-Layout passend, siehe hier:

In der mobilen Ansicht jedoch sind die Feldbzeichnungen neben den Feldern, was nicht gut aussieht, siehe hier:

Das Bootstrap-Layout liefert hier in der mobilen Ansicht eine sehr gute Lösung, siehe hier:

Jedoch zu schmal bei einem breiteren Bildschirm, siehe hier:

Perfekt wäre also eine Kombination aus beiden: Bootstrap in der mobilen Ansicht und etwas breitere Felder mit den Feldbezeichnungen neben den Feldern in der Desktop-Ansicht. Wie kann ich das auf einfachem Wege umsetzen? Oder denke ich da zu kompliziert?

Viele Grüße
Johannes

Hallo Johannes,

ja, das Visforms (Default) Layout ist nicht responsiv.
Das Horizontale Bootstrap Layout sollte auf breiten Bildschirmen das Label vor dem Eingabefeld zeigen und auf schmalen darüber. Wenn das nicht so ist, dass liegt das am CSS deines Templates.
Evlt. kannst du die Option "Boostrap CSS für Formulare laden" aktivieren, aber wenn du ein Bootstrap Template hat, das das horizontale Layout nicht anders implementiert, dann wird das vermutlich leider auch nichts nutzen.

Gruß,
Aicha

Hallo Aicha,

Danke nochmals für die Antwort. Die Option "Bootstrap CSS für Formulare" hat tatsächlich was gebracht (Feldbezeichnung links neben Feldern). Möglicherweise streikt da wirklich mein Template.

Die recht kurzen Felder habe ich nun in der Desktop-Ansicht per CSS länger gemacht, auf 350px feste Breite. Ab einer gewissen Bildschirmbreite fliegt diese Anweisung raus und die Felder nehmen dann die passende Smartphonebreite an. Das ist ein kleiner überschaubarer Workaround, der funktioniert.

Großes Lob an diese Komponente. Habe mich heute eingehender damit beschäftigt. Da steckt Know-How und sicherlich etliches an Entwicklungszeit dahinter. Vor allem die ganzen Zusammenhänge und Bedinungen, die ganze Angelegenheit ist nicht trivial...