WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 02.09.2017 14:00:28

jps77
Member

mpform responsiv

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

#2 02.09.2017 14:18:07

florian
Administrator

Re: mpform responsiv

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

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

Last edited by florian (02.09.2017 14:37:40)

Offline

Liked by:

jps77, mrbaseman, andreas10

#3 02.09.2017 21:26:22

jps77
Member

Re: mpform responsiv

Vielen Dank Florian,

jetzt hat das ganze auch Mobil ein Gesicht  thumb_up

Offline

Liked by:

florian, andreas10

#5 14.10.2019 17:11:05

Slugger
Member

Re: mpform responsiv

Sehr schön  smile
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

Last edited by Slugger (14.10.2019 17:31:13)

Offline

#6 22.05.2020 16:03:45

her-ha
Member

Re: mpform responsiv

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

#7 22.05.2020 20:49:49

bernd
Developer

Re: mpform responsiv

Fragstan bringt von Haus aus kein Grid-System mit.
Die Anleitung von Florian aus #2 funktioniert jedoch einwandfrei mit Fragstan.


2 x ROT13 hält besser ...

Online

#8 22.05.2020 21:41:54

her-ha
Member

Re: mpform responsiv

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

#9 22.05.2020 21:53:40

bernd
Developer

Re: mpform responsiv

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.


2 x ROT13 hält besser ...

Online

#10 22.05.2020 23:21:51

her-ha
Member

Re: mpform responsiv

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

#11 22.05.2020 23:24:27

her-ha
Member

Re: mpform responsiv

So sollte es eigentlich aussehen. Siehe Bild

Offline

#12 23.05.2020 07:16:38

florian
Administrator

Re: mpform responsiv

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.

Offline

#13 23.05.2020 12:47:03

her-ha
Member

Re: mpform responsiv

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

Board footer

Powered by FluxBB

up