Buch Websites erstellen mit Contao 3: Mobile Seiten und Formular für Kommentare

Hallo,

ich habe nach dem Buch "Websites erstellen mit Contao 3" eine Seite mit mobilem Layout erstellt. Damit die Inhaltselemente und Formularfelder bei mobilen Seiten nicht abgeschnitten werden, habe ich wie im Buch erklärt, die folgenden CSS-Regeln für das mobile Layout erstellt:

Code:

---

/* Mobile Seiten - abgeschnittene Inhalte vermeiden */

#container .block {
    overflow:auto;
}

div[class^="ce_"],
textarea,
iframe,
input,
select {
    max-width:100%;
}

---

Diese CSS-Regeln greifen bei allen Inhaltselementen und Formularen der Seite mit Ausnahme des Formulars zur Eingabe der Kommentare. Das Texteingabefeld wird im mobilen Layout immer noch rechts abgeschnitten.

Warum greifen die CSS-Regeln nicht beim Kommentare-Formular? Das Ganze müste doch über "textarea" abgedeckt sein?

Bei Bedarf kann die URL der Seite per PN mitgeteilt werden.

Danke für die Hilfe.

Schmidty

Schick' mal 'ne PN an Peter Müller - der ist hier im Forum aktiv und zu finden. Er wird Dir die richtige Antwort geben können.

Kann man sich das irgendwo anschauen? Meine Kristallkugel ist gerade kaputt ;)

[PN] > nur bei den Komentaren wird in der mobilen Version die Textarea abgeschnitten.

Unter welchem Betriebssystem und in welchem Browser werden die Formulare denn abgeschnitten?
Auf meinem S2-Galaxy stimmt alles. Sowohl in Chrome als auch im Android-Browser. Auch bei den als kaputt gekennzeichneten Seiten.

Die "abgeschnittenen" Formulare scheinen eine andere HTML-Struktur zu haben als die funktionierenden. Um die <textarea> ist ein <div class="widget"> drumherum. Vielleicht kann man dem auch noch ein max-width geben.

Der Kalender passt schlicht und einfach nicht im Hochformat, kann aber bei mir überall mit dem Finger hin und her geschoben werden.

Hallo,

die Darstellung auf dem iPhone 4S, iOS 6.1.3 mit Safari macht Probleme (siehe Screenshot).

Max-Width:100% für .widget brachte keine Änderung:

Code:

---

div[class^="ce_"],
textarea,
iframe,
input,
select,
.widget {
    max-width:100%;
}

---

Ich konnte die Seite bisher nur auf dem iPhone anschauen.
Das Formular der Kommentare ist Original von Contao, ich habe daran nichts verändert.
Dass der Kalender im Hochformat nicht passt ist mir klar, der scrollt ja auch, genauso wie die Tabellen, das ist aber OK. Nur die Textarea des Kommentarfelds wird abgeschnitten, man kann den Contentbereich (Kommentare und Kommentar-Formular) aber waagrecht scrollen (ca. 5 mm), Header und Fußzeile bleiben stehen.

Wenn das nur bei iOS so ist, ist das OK, bei Android wird es ja richtig angezeigt.

Viele Grüße

Schmidty

Ich habe mir das gerade mal auf dem iOS-Simulator angeschaut und stimmt, der Safari schneidet das rechts außen ab. Nicht hübsch, aber benutzbar.

Falls du noch eine Lösung finden solltest, bitte posten ;-)

Hallo,

ich denke, das Ganze ist funktionell OK :), ein Schönheitsfehler eben :(. Scheint ein iOS-Problem zu sein, auch Chrome und Mercury für iOS haben das Problem.

Nach einer Lösung suche ich jetzt nicht weiter - villeicht stolpere ich ja einmal über das Problem ;). Natürlich wird es dann hier gepostet.

Zitat:

---

Zitat von pmmueller

Ich habe mir das gerade mal auf dem iOS-Simulator angeschaut und stimmt, der Safari schneidet das rechts außen ab.

---

Wo gibt es den iOS-Simulator? Gibt es so etwas auch für Android, wenn ja wo?

Danke für die Hilfe.

Schmidty :)

ios-Simulator

Den iOS-Simulator gibt es nur für OS X ab 10.7.4 und er ist Teil der Programmierumgebung XCode, die du aus dem Appstore heraus installieren kannst (ca. 1,6Gb).

Um den iOS-Simuator zu nutzen, zunächst Xcode starten. Danach gibt es zwei Möglichkeiten:
- Im Untermenü XCODE > OPEN DEVELOPER TOOL den Befehl iOS SIMULATOR wählen
- Rechtsklick auf das XCODE Symbol im Dock und wieder im Untermenü OPEN DEVELOPER TOOL den Befehl IOS SIMULATOR wählen.
Nach dem ersten Start das Symbol einfach im Dock behalten und beim nächsten Mal direkt aufrufen, ohne vorher Xcode zu starten.

===
Android Emulator

Der Android-Emulator ist Teil des Android SDK und in erster Linie für Programmierer gedacht, die Apps für Android entwickeln möchten:
- »Get the Android SDK« http://developer.android.com/sdk/

Den Download gibt es in zwei Varianten. Standardmäßig wird ADT vorgeschlagen, die kompletten Android Developer Tools inklusive SDK, Eclipse und vielem mehr. Auf der Download-Seite kann man auch nur das SDK herunterladen. Für den Einstieg ist vielleicht das Handbuch noch hilfreich:
- »Using the Android Emulator« developer.android.com/tools/devices/emulator.html

===
Emulator vs. Simulator

Die beiden Begriffe werden im Web wild durcheinander benutzt, aber folgender Unterschied hat sich herauskristallisiert:
- Ein Emulator stellt die Software- und die Hardware-Umgebung eines Gerätes nach.
- Ein Simulator beschränkt sich auf die Software-Umgebung.
Bei der Programmierung von nativen Apps ist der Unterschied zwischen Emulator und Simulator vielleicht signifikant, beim Testen von einfachen Interaktionen auf Webseiten nicht. Beides ist auf jeden Fall besser als einfach nur ein kleiner Viewport.

===

Das ist übrigens aus dem Manuskript, an dem ich gerade schreibe.