Darstellung Checkbox im Smartphone nur suboptimal

[xyz]

Moin,
in einer vorrangig mit mobilen Geräten zu nutzenden Webseite sind auch Checkboxen enthalten. Diese habe ich über CSS durch Setzung von WIDTH deutlich vergrößert, wird auch im IE entsprechend angezeigt. Leider reagiert der Browser meines Smartphones (Standardbrowser von Samsung Galaxy) nicht darauf und stellt diese nur sehr klein dar, so dass nicht einmal zu erkennen ist, ob sie aktiviert sind oder nicht.

Wie kann man die Darstellung verbessern, ist WIDTH überhaupt der richtige Parameter?

Gruß Tom

[Ole]

Hallo Tom,

ohne zu wissen was du in der Gänze machst ist es schwer zu beurteilen wo genau das Problem liegt.

Auf meinen Testgeräten werden Checkboxen immer ausreichend groß dargestellt. Daher vermute ich, dass dein Problem nicht direkt bei den Checkboxen zu suchen ist.

Es wäre sehr hilfreich, wenn du uns deine Seite zeigen, oder eine auf den relevanten Teil reduzierte Version zum Beispiel bei jsfiddle zur Verfügung stellen würdest.

Gruß
Ole

[xyz]

Hallo in die Runde,

hätte ich auch gleich machen können, hier also ein Link, auch wenn ein Login, es wird nichts gespeichert oder ähnliches, also Tests sind völlig unkritisch.

http://www.easyo.de/login-test.php

Bis dann, Tom

[Felix Riesterer]

Lieber Tom,

http://www.easyo.de/login-test.php

was bitte soll denn </input> genau sein?

Desweiteren ist es grundsätzlich eine gute Idee ausgiebigen Gebrauch vom <label>-Element zu machen. Lass mich Dein <form>-Element einmal etwas modifizieren:

<form name="form1" action="login-test.php" method="post">  
    <h2>Anmelden</h2>  
    <ul>  
        <li>  
            <label for="u">Nutzer</label>  
            <input id="u" type="text" name="username" maxlength="8" />  
        </li>  
        <li>  
            <label for="p">Passwort</label>  
            <input id="p" type="password" name="passwort" maxlength="8" />  
        </li>  
        <li>  
            <label for="reg">erstmalig registrieren ...</label>  
            <input id="reg" type="checkbox" name="reg" onclick="kat_an();" />  
        </li>  
        <li id="kat">  
            <span>... für folgende Kategorien:</span>  
            <ul>  
                <li>  
                    <input id="kat1" type="checkbox" name="kat1" />  
                    <label for="kat1">Kat 1</label>  
                </li>  
                <li>  
                    <input id="kat2" type="checkbox" name="kat2" />  
                    <label for="kat2">Kat 2</label>  
                </li>  
                <li>  
                    <input id="kat3" type="checkbox" name="kat3" />  
                    <label for="kat3">Kat 3</label>  
                </li>  
                <li>  
                    <input id="kat4" type="checkbox" name="kat4" />  
                    <label for="kat4">Kat 4</label>  
                </li>  
            </ul>  
        </li>  
        <li>  
            <input id="ok" type="button" value="  OK  " onclick="return ob_leer();" />  
        </li>  
    </ul>  
</form>

Wie Du siehst, habe ich einige Deiner inline-styles entfernt, da mit den reichlich vergebenen ID über CSS bequem im Stylesheet die Darstellung gesteuert werden kann.

Durch die <label>-Elemente ist nun die "Klickfläche" wesentlich größer, sodass Dein Darstellungsproblem mit den Checkboxen vielleicht auch gelöst ist...?

Liebe Grüße,

Felix Riesterer.

[xyz]

Hallo Felix,
ich habe mich mit dem </input> auch schon gewundert. Ich arbeite mit dem MS VS Express 2012, die IDE zeigt mir doch einige syntaktische Mängel auf, die ich momentan nicht nachvollziehen kann und auch nicht will, zumal die Seite so aufgemacht ist, wie ich sie mir vorstelle.
z. B.

Da wurde auch <Input .... > kritisiert, Änderungsvorschlag war eben </Input>, damit war die IDE zufrieden. Ich dachte mir, mit HTML5 haben die anderen Elemente eben auch ein schließendes Tag erhalten, is doch nicht so???

Sicher brauche ich in meinem Code die inline-Element nicht unbedingt, sind auch nicht aktiv reingekommen, sondern passiv durch Code kopieren. Habe Deine Variante ausprobiert. Abgesehen davon, dass Listen in dem Zusammenhang mir nicht so zusagen, hat diese Variante aber keine Auswirkung auf die Darstellung der Checkbox im Handy, immer noch mini.

Gruß Tom

[Felix Riesterer]

Lieber Tom,

schade, dass Du mein Hauptanliegen überhaupt nicht reflektierst...

Das Benutzen von <label>-Elementen bietet Dir nicht nur mehr "Klickfläche" für Deine Checkboxen (denn der Text im Label ist nun auch anklickbar und ändert den Zustand der zugehörigen Checkbox!), sondern fördert so nebenbei auch noch die Zugänglichkeit der Seite.

Ich arbeite mit dem MS VS Express 2012,

Selber schuld... o_O

die IDE zeigt mir doch einige syntaktische Mängel auf, die ich momentan nicht nachvollziehen kann und auch nicht will,

Aha, das klingt nach "mir ist egal warum etwas (nicht) tut, hauptsache es tut das, was ich mindestens erwarte". Da bist Du hier eigentlich falsch, weil SELFHTML ein anderes Motto hat. Hier will man unbedingt verstehen, warum etwas nicht tut, um dann selbst herauszufinden, wie es angepasst werden muss, damit es tut.

zumal die Seite so aufgemacht ist, wie ich sie mir vorstelle.

Achso, na dann ist ja alles in Butter. Warum meckerst Du dann hier über Deine Seite?

z. B.

Da wurde auch <Input .... > kritisiert, Änderungsvorschlag war eben </Input>, damit war die IDE zufrieden.

Ob eine IDE von MS zufrieden ist, oder nicht, ist kein Maßstab für Qualität oder semantisch/funktionelle Korrektheit. Ein schließendes input-Tag ist bei "leeren" Elementen sinnlos. Was bitte soll denn "Hurz!" in folgendem Beispiel sein?

<input name="user" type="text" value="Usernamen eintragen">Hurz!</input>

Ich dachte mir, mit HTML5 haben die anderen Elemente eben auch ein schließendes Tag erhalten, is doch nicht so???

Wo bitte hantierst Du denn mit HTML5??? Dein Beispiel trägt klar XHTML1.0 als Doctype. Damit ist HTML5 für Dich kein Thema, da Du mit XHTML1 hantierst. Und da ist ein <input /> eben inhaltsleer, weshalb es als selbstschließendes Tag notiert werden muss.

Dass in Deinem Bildbeispiel das fehlende type-Attribut für das <style>-Element gefordert wird, hast Du nicht nur nicht verstanden, sondern leider auch nicht nötig nachzulernen. Dabei wäre es so einfach, in SELFHTML den Sinn und die Verwendung von <style>-Elementen nachzuschlagen - wenn man nur wollte!

Daraus schließe ich, dass Du CSS nicht in einer eigenen Datei auslagerst, weshalb Du auch nicht verstanden hast, warum die inline-Styles von mir kritisiert und ausgefiltert wurden.

Sicher brauche ich in meinem Code die inline-Element nicht unbedingt, sind auch nicht aktiv reingekommen, sondern passiv durch Code kopieren.

Schon wieder so ein Indiz, dass Du eigentlich gar nicht wissen willst, was Du da tust. Extrem schade!

Habe Deine Variante ausprobiert. Abgesehen davon, dass Listen in dem Zusammenhang mir nicht so zusagen, hat diese Variante aber keine Auswirkung auf die Darstellung der Checkbox im Handy, immer noch mini.

Wie gesagt, Du hast nicht verstanden, was ich Dir da angeboten habe. Da Du offensichtlich rein nach dem visuellen Ergebnis im (Handy-)Browser beurteilst, kannst Du auch nicht meine Liste unter CSS-Aspekten würdigen. Aber das überlasse ich Dir. Für mich zeigt Deine Reaktion, dass Du nicht dazulernen willst, da Dich die Sache nicht interessiert. Du willst nur, dass Deine Anwendung "tut", und damit war meine Zeit wohl nicht wirklich sinnvoll für Dich investiert.

Liebe Grüße,

Felix Riesterer.

[dedlfix]

Tach!

Ob eine IDE von MS zufrieden ist, oder nicht, ist kein Maßstab für Qualität oder semantisch/funktionelle Korrektheit. Ein schließendes input-Tag ist bei "leeren" Elementen sinnlos. Was bitte soll denn "Hurz!" in folgendem Beispiel sein?

<input name="user" type="text" value="Usernamen eintragen">Hurz!</input>

Hurz! ist ein Fehler, denn der Inhalt vom Input-Element hat leer zu sein. Ob das leere Element nun als <input></input> oder <input/> notiert ist, ist egal und beides richtig.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix:

nuqneH

Ob das leere Element nun als <input></input> oder <input/> notiert ist, ist egal und beides richtig.

Bei Verarbeitung als XML wäre es das. Bei Verarbeitung als HTML ist ein </input>-Tag ein Fehler.

Qapla'

[Felix Riesterer]

Liebe(r) xyz,

kann es sein, dass die Seite insgesamt eine Breite hat, die Dein Smartphone zum Zoomen zwingt? Da würde ich lieber dort anfangen, anstatt künstlich _ein_ Element zu vergrößern.

Im Übrigen ist es eine Entscheidung der Browsermacher, welche CSS-Eigenschaften sie bei Formularelementen umsetzen, und welche nicht.

Liebe Grüße,

Felix Riesterer.