The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 07-30-2015, 05:02 PM
Richard Thomason's Avatar
Richard Thomason is offline
Junior Member
 
Join Date: May 2015
Posts: 15
Default

Make spinner controls appear continuously in quantity field?


I've had no luck in locating the CSS selector for the spinner control in the Qty text box in the Shopping Bag. I tried adding "Display: Block;" in the input.ecwid-productBrowser-cart-qqtyTextField selector, but not it. Would prefer the up/down arrows always display to prevent confusion for "some" customers. Appreciate any help.

Richard
  #2  
Old 07-30-2015, 05:45 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by Richard Thomason View Post
I've had no luck in locating the CSS selector for the spinner control in the Qty text box in the Shopping Bag. I tried adding "Display: Block;" in the input.ecwid-productBrowser-cart-qqtyTextField selector, but not it. Would prefer the up/down arrows always display to prevent confusion for "some" customers. Appreciate any help.

Richard
Hi Richard,

I checked this input in several browsers and I see that it's hidden in Chrome only. In Firefox and Safari, it displays at all times.

So to make it display at all times in Chrome, you can add this code to Custom CSS Themes:
Code:
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}
Thank you.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
  #3  
Old 07-30-2015, 06:36 PM
Richard Thomason's Avatar
Richard Thomason Richard Thomason is offline
Junior Member
 
Join Date: May 2015
Posts: 15
Default Make spinner controls appear continuously in quantity field?

Thanks for that. My bad for not thinking about that.
  #4  
Old 07-30-2015, 07:48 PM
Richard Thomason's Avatar
Richard Thomason Richard Thomason is offline
Junior Member
 
Join Date: May 2015
Posts: 15
Default

Actually, took a look at IE (ver. 11.0.9600.17905) and with or without the code added, there are no spinner controls showing at all. That code does work for Chrome however. There does not appear to be any updates not already installed for IE, so unsure what else to check.
  #5  
Old 07-30-2015, 08:03 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by Richard Thomason View Post
Actually, took a look at IE (ver. 11.0.9600.17905) and with or without the code added, there are no spinner controls showing at all. That code does work for Chrome however. There does not appear to be any updates not already installed for IE, so unsure what else to check.
The code that I provided was meant exclusively for Chrome, the prefix -webkit applies to Chrome browser only, as far as I know.

I did a little research and it turns out that the number field behaves differently in different browsers. In IE for example, there are no such controls on how to increase or decrease the number value, so this field behaves just like a usual text input. In Firefox the controls display all the time, whether on hover or not, and in Chrome the controls appear on hover.

So I provided a code so that the controls display at all times for Chrome browser. As I can see, there is no way to add controls for the number input using CSS, but possibly you will be able to do something using custom programming and Ecwid Javascript API: http://help.ecwid.com/customer/porta...javascript-api

You can find out move about this here: https://css-tricks.com/numeric-input...wser-defaults/
Thank you.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
  #6  
Old 07-30-2015, 11:55 PM
Richard Thomason's Avatar
Richard Thomason Richard Thomason is offline
Junior Member
 
Join Date: May 2015
Posts: 15
Default Make spinner controls appear continuously in quantity field?

Thanks for looking into it further. I am seeing the same after using IE to test with. Been using Chrome for checking my work up to this point, so learning the lesson that I should be checking in multiple browsers. Don't like the fact it behaves differently in each though. Interesting.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:26 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.