Page 1 of 2
XH-Shop Checkbox größer machen
Posted: Mon Sep 10, 2018 8:22 am
by albert
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?
Re: XH-Shop Checkbox größer machen
Posted: Mon Sep 10, 2018 8:49 am
by frase
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*/
}
Re: XH-Shop Checkbox größer machen
Posted: Mon Sep 10, 2018 9:18 am
by lck
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);
Re: XH-Shop Checkbox größer machen
Posted: Mon Sep 10, 2018 9:26 am
by albert
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?
Re: XH-Shop Checkbox größer machen
Posted: Mon Sep 10, 2018 9:33 am
by frase
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);
}
Re: XH-Shop Checkbox größer machen
Posted: Mon Sep 10, 2018 9:34 am
by cmb
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?
Re: XH-Shop Checkbox größer machen
Posted: Mon Sep 10, 2018 9:38 am
by frase
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.
Re: XH-Shop Checkbox größer machen
Posted: Mon Sep 10, 2018 9:50 am
by albert
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
Re: XH-Shop Checkbox größer machen
Posted: Mon Sep 10, 2018 9:59 am
by frase
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.
Re: XH-Shop Checkbox größer machen
Posted: Mon Sep 10, 2018 10:23 am
by albert
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?