WBCE CMS – Way Better Content Editing.
Du bist nicht angemeldet.
Seiten: 1
Hallo, ist es möglich ein Formular mit mpform responsive zu machen?
Auf einem Mobilen Gerät (speziell Smartphones) sieht das Formular grauenhaft aus.
vielen Dank
Offline
Ja.
Stelle sicher, dass im Template im Head der Meta-Tag
<meta name="viewport" content="width=device-width,initial-scale=1">
hinterlegt ist.
Lade Dir Gridism herunter (https://github.com/cobyism/gridism)
und kopiere gridism.css nach /modules/mpform.
Öffne per AFE oder FTP+Texteditor die Datei mpform/modules/frontend.css und füge dort ein
@import url("gridism.css");
Hinterlege im Backend bei den betr. mpform-Abschnitten unter Allgemeine Optionen > Layout - Feld-Schleife den Code
<div class="grid no-gutters">
<div class="unit one-third {CLASSES}">{TITLE}{REQUIRED}:</div>
<div class="unit two-thirds">{FIELD}{ERRORTEXT}</div>
</div>
und für die Fußzeile
<input type="submit" name="submit" class="mpform_submit" value="Absenden" />
Das Ergebnis ist dann in etwa so:
smartphone:
Desktop:
Das ist natürlich nur eine mögliche Herangehensweise. Wenn Du bereits ein Template verwendest, das ein Grid zur Verfügung stellt, kann auf Gridism verzichtet werden und der Code im Feld Layout Feld-Schleife muss dann entsprechend angepasst werden (z.B. fg3 / fg9 für fitgrid, s12 m-3 / s-12 m-9 für Responsee o.ä.)
Es sind ggf. außerdem noch weitere Anpassungen an der frontend.css erforderlich, von Haus aus sieht mpform mit diesen grau unterlegten Feldern ja eher garstig aus.
Beitrag geändert von florian (02.09.2017 13:37:40)
Code allein macht nicht glücklich. Jetzt spenden!
Offline
jps77, mrbaseman, andreas10
Vielen Dank Florian,
jetzt hat das ganze auch Mobil ein Gesicht
Offline
florian, andreas10
Schön!
Wenn Du magst Link => Rubrik "Läuft bei uns"
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Sehr schön
Habe das Mal eingebaut.
Habe aber noch ein paar Schönheitsfehler.
Wie kann man das beheben?
http://rhein-main-spitze.com/pages/ticketsystem.php
Nachtrag:
Habe hier noch ein Hinweis gefunden, dem gehe ich Mal nach.
https://forum.wbce.org/viewtopic.php?pid=10552#p10552
Beitrag geändert von Slugger (14.10.2019 16:31:13)
Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.5.4 • BE: 2.1.0 • PHP: 8.1.16 * 1. Projekt: FE: Simple responsive • BE: Argos * 2. Projekt: FE: hortal • BE: Argos * 3. Projekt: FE: WBCEZon • BE: Argos * 4. Projekt: FE: WBCETik • BE: Argos
Status Projekt 1-4: OK
Online
Hallo,
ich möchte ebenfalls mpform responsive machen. Habe das mal mit "gridism.css" ausprobiert. Das haut mir jedoch alles durcheiander,
Ich verwende als Template fragstan und soweit ich weiß, stellt dies ein Grid zur Verfügung. Mir ist jedoch nicht ganz klar, wie ich dann den Code im Feld Layout Feld-Schleife anpassen muß.
Im voraus bedanke ich für eure Unterstützung
Gruß her-ha
Offline
Fragstan bringt von Haus aus kein Grid-System mit.
Die Anleitung von Florian aus #2 funktioniert jedoch einwandfrei mit Fragstan.
... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...
Offline
Danke Bernd für Deine Mitteilung,
ich bin davon ausgegangen, dass Fragstan evtl. grid-system verwendet, da in der Original " index.php" folgendes in Zeile 7-8 steht:
<?php
if(!defined('WB_URL')) {
header('Location: ../index.php');
exit(0);
}
$usegrid = 4;
$usegrid = 3;
Ich werde es jedoch nochmals probieren wie von Florian angegeben und auch ins Template von Fragastan das Meta-Tag einfügen. Vielleicht habe ich da was verkehrt gemacht.
Gruß her-ha
Offline
Diese "usegrid" Geschichte im Fragstan dient wohl einer groben Aufteilung im Template.
Das ist jedoch kein Gridsystem im eigentlichen Sinne das dir bei deiner Aufgabenstellung weiterhilft.
Der Meta-Tag ist schon drin, so Zeile 46 rum.
... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...
Offline
Ich habe das Formular so eingerichtet, wie Florian geschrieben hat.
Soweit hat es funktioniert, nur mit den Überschriften und der Textarea hat es nicht geklappt. (Siehe Bild)
Die Überschriften sind alle an der falschen Stelle.
Offline
So sollte es eigentlich aussehen. Siehe Bild
Offline
Bei den Überschriften im Feld "Template" das hier hinterlegen:
<div class="grid no-gutters">
<div class="unit whole"><h3>{TITLE}{FIELD}</h3>
</div></div>
Bei der textarea weiß ich jetzt so auf Anhieb nicht, weshalb die nicht responsiv ist. Eventuell ist irgendwo anders dafür eine fixe Breite hinterlegt, Mal mit der Maus darauf zeigen, dann mit rechte Maustaste anklicken, Element untersuchen wählen und schauen, welche Styles darauf angewendet werden.
Code allein macht nicht glücklich. Jetzt spenden!
Offline
Danke Florian,
werde es ausprobieren. Habe aber auch schon eine andere Lösung gefunden. Werde dies in einem weiteren Beitrag erklären.
Was die "textarea" betrifft, habe ich eine Lösung gefunden. Und zwar habe ich in der "frontend.css" etwa bei Zeile 124 nach:
.mpform_field {
width:100%;
background-color:#ffffff;
padding:6px;
}
noch folgendes dazu eingefügt:
.mpform_textarea{
width:100%;
background-color:#ffffff;
padding:6px;
}
Funktioniert bei mir ohne Probleme.
Gruß her-ha
Offline
Seiten: 1