OPAY Expiration Date CSS issues

[lesliekirk]

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

[Brennan]

Re: OPAY Expiration Date CSS issues

Hey Leslie -

Try adding some css to re-size the selects:

.cc_exp select {        display: inline-block;        width: 31%}

[lesliekirk]

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.

<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

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

[lesliekirk]

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

<div class="col-md-6">

the is being generated.

I think if I can figure out how to get rid of the

<div class="col-md-6">

the other CSS will work much better.

[razertip]

Re: OPAY Expiration Date CSS issues

<div class="col-md-6">

Is in the custom.js file.
Look for JS_OPAY: and remove

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

[lesliekirk]

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

[lesliekirk]

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.

<doh>Operator Error</doh>