Duplicate quantity arrows appearing in Firefox

[bsb1976]

I’ve noticed even on the WooTickets demo site that a second set of ticket quantity arrows appears in Firefox. Is there an easy way to get rid of these?

[Barry]

Hi!

Some browsers add extra embellishments to number input fields and so in this case we end up with the increment/decrement arrows added by the native browser control itself and also the corresponding buttons added by WooCommerce.

In the case of our demo site, a simple tweak like this would work to resolve things on a presentational level:

.woocommerce .quantity input[type="number"] { padding: 0 10px }

So that might work on your own site, too (let me know if not and we can take a second look) – you’d add this to a custom tribe-events.css stylesheet.

I hope that helps 🙂

[bsb1976]

I tried that custom css but it didn’t fix the issue on my site (http://abodaq.org.au/newsite/event/on-the-stand-retention/). Any other ideas?

[Barry]

OK – your site’s CSS is notably different to that of our demo site so we’ll need a different approach here (to save time in the future it is generally best just to link directly to a live example on your own site, as every site is different) 🙂

Something like the following CSS (again, it should be possible to add this to a custom tribe-events.css stylesheet) should work:

.tribe-events-tickets td div.quantity.buttons_added {
    height: 40px;
    position: relative;
}

.tribe-events-tickets td input.input-text.qty {
    height: 36px;
    width: 64px;
}
.tribe-events-tickets td input.minus {
    float: right;
    height: 18px;
    position: relative;
    right: 15px;
}

.tribe-events-tickets td input.plus {
    float: right;
    clear: right;
    height: 18px;
    position: relative;
    right: 15px;
}

[Barry]

Hi! It’s been a while so I’m going to go ahead and close this thread. If we can help with anything else, though, please don’t hesitate to create new threads as needed. Thanks!

[Author]

Posts