Mobile friendly checkboxes and radio buttons

[inkoop@.....nl]

While joomla and virtuemart need to be responsive for mobile use, I am using OPC responsive template, with also the bootstrap.min.css for responsive themes. It works well, the only 'problem' are the check boxes and radio buttons. These are not mobile friendly.

What I like to see is, when using a mobile devices, these checkboxes and buttons become larger and nicer, with an easier use than it is now. Now it is to small.

Is it possible to implement this in the css of OPC?

[admin]

hello, yes, which opc theme are you using ?

it's possible to style the radios and checkboxes via either CSS3 or javascript (html5) but our experience is that "it is not very stable" especially when using any sort of 3rd party software such as Lastpass or other autocomplete plugins including core functionality. the problem is that sometimes these form fillers alter the state of checkbox or radio "after DOM ready" and thus it breaks the functionality and many times displayes a wrong state (i.e. checked when it's not checked and vice versa). this should be howerver all solved on devices of 2016 and 2017 but if you got older devices including older IOS, this can lead to huge problems.

mobiles should be handle to render the checkboxes and radios a way which is the most mobile friendly possible since the "core UI" is used for that.

the same applies for the drop downs (select / options) which render much better on mobiles compared to chosen.

let me know what is your primary device (iOS or which Android and which version) and i can check the theme and see if it can be adjusted.

best regards, stan

[inkoop@.....nl]

I am using the "three colomn special blue" theme, which I have changed a bit.

The render of the checkboxes and radio buttons must be compatible with al versions. There is no primary device, because customers using different devices with different versions.
Beste solution should be having a fallback in version. Display css/render X when version X or higher. If version lower then X, display css/render Y or standard as it is now.

[admin]

hello, i still believe that using system-UI styled checkboxes is the most reliable way of doing this, because:
- on PC browsers there may be extensions like lastpass or ad-blocker or else which may change state of the checkboxes after "dom ready" and styling mechanism does not necessarely may be able to detect this correctly. we've encountered lot's of problems with autocomplete in various browsers which incorrectly altered even "hidden" fields (input type="hidden" ) with incorrect values and altered state of the checkbox in a way which could had broke checkout handling. in some old Firefox versions we were even able to get user's autocomplete password into input type="hidden" field which is a browser bug (gladly this is no longer an issue)
- some templaters use javasscript systems that are not capable of detecting the state of the checkbox correctly per the problem above (element.checked returns true while it's not checked)

i suggest that you contact us via email and i will check your domain via our real mobile browsers and see if your joomla (or VM) tempalte alters the generated checkboxes in a way which would not be user friendly. it's important that input type="checkbox" does not have any width or height specificied - otherwise the "system-ui" may not be capable of rendering it properly (i.e. would be either too large or too small)

this has to be checked on your site - pls contact me via email at info@rupostel.com and i will investigate this further.

best regards, stan

[inkoop@.....nl]

A reply on a post of 18 months ago, but still looking for a good solution.

I like to have bigger and nicer radio buttons or check boxes in the checkout and I prever to have a better style out of the box in one of the templates of OPC. (I still using the three column, which I have changed a bit)

I understandd what you wrote before, but is this still an issue? There are many alternatives. For example: https://codepen.io/BrianSassaman/pen/iLrpC
Can you check this one out and tell if this is compatible? It would be awesome to have this kind of modern styling within OPC. To get it a modern look, instead of the old 90's radio buttons.

[admin]

hello, yes, the situation is changing dramatically since there are almost no html5 incompatible browsers and the new css3 gives lot's of ways to approach this (as far as nobody is using IE browser any longer and Edge gets updated automatically). also Safari on Apple products is not html5 compliant and thus can cause quite lot's of troubles.

the main question is how should they look like ?

this seems to be a standardized way for html5 browsers:
https://www.w3schools.com/howto/howto_c ... eckbox.asp

it's using new CSS selectors and keywords and thus it should not break compatibility with old browsers. (they would just show the radios/checkboxes normally)

the old approach was to hide the real radio/checkbox with position outside viewable scope and render an image (or else) at the place of the radio.

the new approach uses vector fonts (such as font awesome) or SVG's directory to render radios/checkboxes.

note that select dropdowns are still quite tricky to get them formatted same on all platformas.

the example link above expects the radio/checkbox to be inside label wrapper which may not be always possible or ideal.

the problem with formatting these in OPC is that we try to make OPC themes compatible with most of the Joomla/VM templates available and thus if we style this too much, then it may not look consitent with your own template. the answer to this could be a css-less theme like the one we included as "ja_brickstore" which doesn't use our CSS and uses either VM's original CSS or template's overrided CSS.

let me know how could i help you further with this.

best regards, stan