Announcement

Collapse
No announcement yet.

Anyone add a label on this MivaPay field?

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

    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.
    Colin Puttick
    Miva Web Developer @ Glendale Designs

    #2
    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

    Comment


      #3
      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.
      Colin Puttick
      Miva Web Developer @ Glendale Designs

      Comment


        #4
        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)"
                    }
                },
            ]
        }

        Comment


          #5
          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.
          Colin Puttick
          Miva Web Developer @ Glendale Designs

          Comment


            #6
            No ::before and ::afters for the checkbox'es, as there is no content

            Comment


              #7
              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?
              Colin Puttick
              Miva Web Developer @ Glendale Designs

              Comment


                #8
                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.
                Brennan Heyde
                VP Product
                Miva, Inc.
                [email protected]
                https://www.miva.com

                Comment


                  #9
                  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.

                  Comment


                    #10
                    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.

                    Comment

                    Working...
                    X