[SOLVED] Formular für responsive Website?

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
Post Reply
User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

[SOLVED] Formular für responsive Website?

Post by kukki » Thu 2. Jul 2015, 19:27

Seit einiger Zeit bin ich dabei, OHNE "bootstrap'SE", OHNE Einbindung von user-config ThemeRoller, NUR mit entsprechenden CSS-Steuerung und media queries und dem standard-phpWCMS eine "allgemeine" responsive Website zu erzeugen. Es geht auch ganz gut 8) Auf den Testgeräten funktioniert das absolut zufriedenstellend (Samsung Handy und Android-Touchlett PC [reagiert ziemlich tricky auf nur kleinste Schreib~ und Denkfehler])

Aber an einer Stelle komme ich überhaupt nicht weiter. Wenn man halt mehr zum CP FORMULAR wusste, wäre ich klüger, aber hier scheint sich im Moment eine Mauer aufzutun. Mit dem Themeroller funktionierte das super, aber den will ich ja nicht mehr nutzen, da es Probleme mit dem Einbinden der *.js files im head-Bereich gibt.

Wie kann man das Formular dazu übereden, sich automatisch an die Viewport-Größe anzupassen :?:


Nebenbei - ich habe ein tolles Test-Script gefunden, ich weiß nur nicht mehr woher :shock: , dass die aktuelle Viewporthöhe und ~breite anzeigt:

Einfach in den footer einsetzen und schon klappt mit der Nachbarin:

Code: Select all

<!-- JS:
$(document).ready(function(){
    var MEASUREMENTS_ID = 'measurements'; // abstracted-out for convenience in renaming
    $("body").append('<div id="'+MEASUREMENTS_ID+'"></div>');
    $("#"+MEASUREMENTS_ID).css({
        'position': 'fixed',
        'bottom': '0',
        'right': '0',
        'background-color': 'black',
        'color': 'white',
        'padding': '5px',
        'font-size': '10px',
        'opacity': '0.4'
    });
    getDimensions = function(){
        return $(window).width() + ' (' + $(document).width() + ') x ' + $(window).height() + ' (' + $(document).height() + ')';
    }
    $("#"+MEASUREMENTS_ID).text(getDimensions());
    $(window).on("resize", function(){
        $("#"+MEASUREMENTS_ID).text(getDimensions());
    });
});
-->
Image
Last edited by kukki on Mon 6. Jul 2015, 08:24, edited 2 times in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

Old Boy
Posts: 1110
Joined: Fri 23. Nov 2012, 13:52

Re: Formular für responsive Website?

Post by Old Boy » Thu 2. Jul 2015, 19:58

Geht da nix mit der Verwendung von width: xx% Angaben, vorausgesetzt, der umgebende Container ist schon angepasst, sollten sich so doch die vorhandene Grösse mit width: 100% auch ausnutzen lassen!?

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Formular für responsive Website?

Post by kukki » Thu 2. Jul 2015, 21:48

Bin gerade durch ein 2-stündiges Probieren auf eine Lösungsansatz mit Boardmitteln und CSS gestoßen. Was man hier für Zeit drauf geht :x wenn die Dokumentation dazu keine erschöpfende Auskunft gibt, blöd wenn im Wiki die Links gar nicht mehr stimmen (UWE367) oder man bekommt einen Augen-Katarrh von den kleinen Bildern in der Dok:

Image

Ich muss mich da noch durchwurschteln, so richtig logisch ist das alles noch nicht. Hilfreich war aber JSfiddle :mrgreen:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Formular für responsive Website?

Post by Oliver Georgi » Fri 3. Jul 2015, 06:54

Da jedes Element des Formulars separat per CSS angesteuert werden kann, ist es absolut unproblematisch komplett responsive Formulare aufzubauen. Dazu benötigt man genau 0 JavaScript ode sonstige Hacks. Ob man nun Bootstrap nimmt oder nicht, bleibt einem selbst überlassen. Man sollte nur im Grundsatz verstehen, wie das funktioniert, und das hat wiederum nichts mit phpwcms zu tun, sondern ist Basis HTML/CSS.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
kukki
Posts: 1666
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Formular für responsive Website?

Post by kukki » Mon 6. Jul 2015, 08:23

Geschafft: das Formular läuft jetzt auch wie gewollt als responsives Element. hat ein wenig gedauert.
  • Folgende Schritte sind zu machen:
  • size/ columns auf leer setzen
  • für Inputfelder sinnvolle CSS-Classes vergeben
  • CSS-Classen definieren mit width= "%" und nach eigenem Ermessen anpassen
Image

Nacharbeiten

Gleiches müsste auch für" DIV-FIELD" und für "LABEL o _______" gemacht werden und mit "media queries" entsprechend angesteuert werden. :mrgreen:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Oliver Georgi
Site Admin
Posts: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: [SOLVED] Formular für responsive Website?

Post by Oliver Georgi » Mon 6. Jul 2015, 08:41

size/columns/rows sind HTML Fallback und sollten in jedem Fall ausgefüllt werden.

Hört endlich auf, CamelCase Klassen zu definieren. Was soll eine Klasse wie emailForm? Es genügt z.B. email oder email-form, wenn es denn irgendwie auch noch bildlich sein soll. Auch eine Klasse wie input-form ist inhaltlich doppelt gemoppelt. Dort hinein gehören aktuell fast nur noch Ausnahmen.

Code: Select all

.email input[type=text] {display:block; width:100%;}
.email input.zip {width:25%;}
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

Post Reply