XH-Shop Checkbox größer machen

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
albert
Posts: 526
Joined: Sun Mar 07, 2010 8:01 pm
Location: Germany
Contact:

XH-Shop Checkbox größer machen

Post by albert » Mon Sep 10, 2018 8:22 am

Hallo,
gestern habe ich zum 1. mal bemerkt, dass es zumindest auf meinem smartphone schwierig ist, die Checkbox anzuklicken.
Kann man die nicht größer machen?

Mein kläglicher Versuch, in dem code

Code: Select all

<p><input type="checkbox" name="cos_confirmed" required <?php if($_SESSION['xhsCustomer']->cos_confirmed =='on') {echo 'checked="checked"';} ?>> <?php echo $this->cosHint();?></p>
mit <p style usw.> eine größere Schrift zu machen, ändert leider nur die Schrift, nicht die Checkbox.
Kann mir Jemand helfen?

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: XH-Shop Checkbox größer machen

Post by frase » Mon Sep 10, 2018 8:49 am

albert wrote:
Mon Sep 10, 2018 8:22 am
gestern habe ich zum 1. mal bemerkt, dass es zumindest auf meinem smartphone schwierig ist, die Checkbox anzuklicken.
Kann man die nicht größer machen?
Das wäre ausgesprochen schwierig.
Diese Elemente (Checkbox und Radiobutton) werden vom jeweiigen Browser generiert.
Es gibt zwar verschiedene Workarounds um eigene zu gestalten, das ist allerdings sehr aufwendig - und hat den Nachteil, dass es nicht zu jedem Template passte.

In deinem Fall wäre die einzige (schnelle) Möglichkeit, zwischen Checkbox und Text einen Abstand einzufügen.
Viel nützen wird das aber nicht :(

Code: Select all

.xhsMain input[type="checkbox"], section.xhsScreen input[type="radio"] {
    padding: 0 !important;
    margin: 0 .5em 0 0; /*das wäre der Abstand*/
}

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: XH-Shop Checkbox größer machen

Post by lck » Mon Sep 10, 2018 9:18 am

frase wrote:
Mon Sep 10, 2018 8:49 am
In deinem Fall wäre die einzige (schnelle) Möglichkeit, zwischen Checkbox und Text einen Abstand einzufügen.
Viel nützen wird das aber nicht
Man könnte noch folgendes einfügen, das sollte in allen Browsern funktionieren. Eventuell auch nur für mobile Geräte größer machen, also bei einem kleinem Viewport z.B. per @media only screen ...

Code: Select all

-webkit-transform: scale(3);
 transform: scale(3);
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

albert
Posts: 526
Joined: Sun Mar 07, 2010 8:01 pm
Location: Germany
Contact:

Re: XH-Shop Checkbox größer machen

Post by albert » Mon Sep 10, 2018 9:26 am

danke frase für die hilf.
Habs gemacht und sieht wie ich finde besser aus. Aber die Klickbarkeit wird bei meinem Smartphone eigentlich gar nicht besser. Es bleibt Glücksache, und manchmal klappts erst nach 10 mal oder so. Eigentlich ganz schön frustrierend. Vielleicht liegt das an meinem phone, oder habe ich zu viel Hornhaut auf den Fingern? KA
Aber da ich Bestellungen erhalte wird es wohl bei anderen klappen... werds jetzt einfach so lassen!

@ ick: wird mit scale nicht der ganze Bildschirminhalt vergrößert?

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: XH-Shop Checkbox größer machen

Post by frase » Mon Sep 10, 2018 9:33 am

lck wrote:
Mon Sep 10, 2018 9:18 am
Man könnte noch folgendes einfügen, das sollte in allen Browsern funktionieren.
Na ja, "3" ist vielleicht etwas zu groß.
Aber der Vorschlag ist gut.
Das Stylesheet also in etwa so:

Code: Select all

.xhsMain input[type="checkbox"], section.xhsScreen input[type="radio"] {
    padding: 0 !important;
    margin: 0 .5em 0 0; /*das wäre der Abstand*/
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: XH-Shop Checkbox größer machen

Post by cmb » Mon Sep 10, 2018 9:34 am

albert wrote:
Mon Sep 10, 2018 9:26 am
wird mit scale nicht der ganze Bildschirminhalt vergrößert?
Kommt darauf an, auf welchen Selektor diese Regeln angewendet werden. Hier also etwa:

Code: Select all

.xhsMain input[type="checkbox"], section.xhsScreen input[type="radio"] {
-webkit-transform: scale(3);
 transform: scale(3);
}
Allerdings sollte eigentlich immer auch das Label, das zur Checkbox gehört, klickbar sein; ist das hier nicht so?
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: XH-Shop Checkbox größer machen

Post by frase » Mon Sep 10, 2018 9:38 am

cmb wrote:
Mon Sep 10, 2018 9:34 am
Allerdings sollte eigentlich immer auch das Label, das zur Checkbox gehört, klickbar sein; ist das hier nicht so?
An dieser Stelle gibt es kein Label.

albert
Posts: 526
Joined: Sun Mar 07, 2010 8:01 pm
Location: Germany
Contact:

Re: XH-Shop Checkbox größer machen

Post by albert » Mon Sep 10, 2018 9:50 am

na dat is en ding

Code: Select all

@media screen and (max-width: 480px) {
.xhsMain input[type="checkbox"]{
-webkit-transform: scale(1.5);
 transform: scale(1.5);
}
}
das ist wohl ganz prima

PS: das das Label, das zur Checkbox gehört, ist zwar tatsächlich klickbar, aber das klappte auf meinem phone genauso wenig

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: XH-Shop Checkbox größer machen

Post by frase » Mon Sep 10, 2018 9:59 am

albert wrote:
Mon Sep 10, 2018 9:50 am
PS: das das Label, das zur Checkbox gehört, ist zwar tatsächlich klickbar, aber das klappte auf meinem phone genauso wenig
Ah, du meinst "Ich bin einverstanden, meine E-Mail-Adresse an den Paketdienst weitergzugeben."
Da gibt es ein Label.
Bei "Ich habe die AGB und den in ihnen enthaltenen Hinweis auf mein Widerrufsrecht gelesen und bin einverstanden." gibt es keins.

albert
Posts: 526
Joined: Sun Mar 07, 2010 8:01 pm
Location: Germany
Contact:

Re: XH-Shop Checkbox größer machen

Post by albert » Mon Sep 10, 2018 10:23 am

frase wrote:
Mon Sep 10, 2018 9:59 am
Bei "Ich habe die AGB und den in ihnen enthaltenen Hinweis auf mein Widerrufsrecht gelesen und bin einverstanden." gibt es keins.
AHA
Hab mich schon gewundert, warum nur diese Checkbox Probleme macht. Kann man da kein label einbauen?

Post Reply