Announcement

Collapse
No announcement yet.

Anyone add a label on this MivaPay field?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • BeAccessible
    replied
    We need to make the checkout form accessible and in compliance with WCAG 2.1. Is there anyway to add error notifications to the fields in the MivaPay iframe? We need more than just a style change.

    Leave a comment:


  • AHerb
    replied
    Please, wrap all elements with divs.
    All grouped elements with another set of divs.
    No need to give class names to new wrappers, as elements may be reached via css hierarchy.

    As long as we don't have access to change the form layout, ideally we should be able to re-position everything with some extra display: table or display: flex if we decide so. So extra element and group wrappers are crucial.

    Leave a comment:


  • Brennan
    replied
    We have a bug to add labels to the inputs for MivaPay. If there are other HTML changes you would like to see for more advanced styling let me know.

    Leave a comment:


  • dreamingdigital
    replied
    https://jsfiddle.net/vhw45fps/11/

    That's a start. But it's cross-browser buggy because they all do whatever they want for built-in fancy checkbox styles now. Win10 FireFox seems to be the only one that gives the desired effect. Does that trigger any ideas?

    Leave a comment:


  • AHerb
    replied
    No ::before and ::afters for the checkbox'es, as there is no content

    Leave a comment:


  • dreamingdigital
    replied
    Crazy. :)

    I wish I could add actual HTML though - so clicking the text checks the checkbox. No amount of CSS is going to fix that... or is it??! Can you have an :after element on a checkbox?? Then hide the text that's there? would a :before element on a checkbox check the checkbox... ok don't have time right now.

    Leave a comment:


  • AHerb
    replied
    Oh, btw. It's not obvious, but you can also use @media there

    Code:
    {
        "at-rule": "media",
        "media": "(max-width:500px)",
        "selectors":
        [
            {
                "selector": "label",
                "properties": {
                    "display": "block",
                    "width": "100%"
                }
            },
            {
                "selector": "input[type=\"text\"]",
                "properties":
                {
                    "width": "calc(100% - 28px)",
                    "min-width": "calc(100% - 28px)"
                }
            },
        ]
    }

    Leave a comment:


  • dreamingdigital
    replied
    I see how the CSS for the Miva pay iFrame is a JSON object - which is cool I think. I emailed Brennan and he said he would notify the team in charge of the next release cycle.

    Leave a comment:


  • AHerb
    replied
    You can not modify HTML there. And the amount of wrappers and containers provided are just... not enough.

    I did some modifications with css, but of course you can not add <label> tags.
    Have a look at CSS ::before and ::after, where you can add content: '...'

    this may help

    Leave a comment:


  • dreamingdigital
    started a topic Anyone add a label on this MivaPay field?

    Anyone add a label on this MivaPay field?

    Has anyone figured out a way to add an HTML <label> tag around the "Store This Card For Future Use" checkbox in the MivaPay iFrame on OPAY? I've tried a few things but browser security policies seem to be blocking me - at least at my JS level.
Working...
X