[SOLVED] Formular für responsive Website?

[kukki]

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 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 , 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());
    });
});
-->

[Old Boy]

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!?

[kukki]

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 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:



Ich muss mich da noch durchwurschteln, so richtig logisch ist das alles noch nicht. Hilfreich war aber JSfiddle

[Oliver Georgi]

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.

[kukki]

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

Nacharbeiten

Gleiches müsste auch für" DIV-FIELD" und für "LABEL o _______" gemacht werden und mit "media queries" entsprechend angesteuert werden.

[Oliver Georgi]

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%;}