Announcement

Collapse
No announcement yet.

OPAY Expiration Date CSS issues

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

    OPAY Expiration Date CSS issues

    On the OPAY screen at the Expiration Date div with the ID of js-cc_exp there is a slash (/) between the Month and the Year drop downs. The divs for those two drop downs do not compensation for the slash. It's two col-md-6 divs with the slash crammed in between them.

    Has anyone come up with CSS to compensate for this? I'm going to give it a whilr but wanted to see if anyone has "fixed" this.

    FYI, the screen looks awful on an iPad.

    Leslie
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Re: OPAY Expiration Date CSS issues

    Hey Leslie -

    Try adding some css to re-size the selects:

    Code:
    .cc_exp select {        display: inline-block;        width: 31%}
    Brennan Heyde
    VP Product
    Miva, Inc.
    [email protected]
    https://www.miva.com

    Comment


      #3
      Re: OPAY Expiration Date CSS issues

      Keep in mind the Base Ready Theme doesn't have some of the same classes at the Iron & Wool.

      Code:
      <div id="js-cc_exp" class="form-group"><label class="col-lg-2 control-label">Expiration Date:</label>
      
      
      <div class="col-lg-4">
      
      <div class="col-md-6">
      
      <select class="form-control" name="CHASEPaymentech_CC_ExpMonth">
      
      
      </div>
      
      /
      
      <div class="col-md-6">
      
      <select class="form-control" name="CHASEPaymentech_CC_ExpYear">
      
      
      </div>
      
      
      </div>
      
      
      </div>
      I did try adding

      Code:
      #js-cc_exp select {    display: inline-block;
          width: 31%;
      }
      It did not play nicely. 60% width will let the drop downs display, but the issue with the slash still remains.

      I think I'm also going to need to tweak the template code.
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #4
        Re: OPAY Expiration Date CSS issues

        I copied over the code from the Iron & Wool ReadyTheme to see if it made any different when it comes to the
        Code:
        <div class="col-md-6">
        the is being generated.

        I think if I can figure out how to get rid of the
        Code:
        <div class="col-md-6">
        the other CSS will work much better.
        Leslie Kirk
        Miva Certified Developer
        Miva Merchant Specialist since 1997
        Previously of Webs Your Way
        (aka Leslie Nord leslienord)

        Email me: [email protected]
        www.lesliekirk.com

        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

        Comment


          #5
          Re: OPAY Expiration Date CSS issues

          Code:
          <div class="col-md-6">
          Is in the custom.js file.
          Look for JS_OPAY: and remove
          Code:
          .wrap('<div class="col-md-6"></div>')
          This will give you:

          Month
          /
          Year

          Which looks better than the dropped down "Year" field.

          The slash appears to be generated inside the payment module.
          Last edited by razertip; 05-27-15, 02:59 PM.

          Comment


            #6
            Re: OPAY Expiration Date CSS issues

            Thanks again, removing that snippet enable the other CSS that I added to function. Not sure why the drop down for "Year" now displays as "Select One". But it's looking much better now.

            Leslie
            Leslie Kirk
            Miva Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment


              #7
              Re: OPAY Expiration Date CSS issues

              Originally posted by lesliekirk View Post
              Thanks again, removing that snippet enable the other CSS that I added to function. Not sure why the drop down for "Year" now displays as "Select One". But it's looking much better now.
              <doh>Operator Error</doh>
              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment

              Working...
              X