Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?



Find us on Facebook

Follow us on Twitter

View our YouTube channel


 All Forums
 General
 CSS and Responsive Designs
 Vertical Scroll Bar on Up/Down Qty button??
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

Positivek9
Ecommerce Template Guru

USA
3992 Posts

Posted - 10/12/2017 :  15:43:38  
Well, this is strange but suddenly my quantity button is now appearing with a scroll bar in various browsers.

Can anyone shed some light?



CSS:

.quantity2div.detailquantity2div {
margin-left: 11%;
}

.quantityinput {
text-align: center;
}

input[name=quant] {
text-align: center;
}


div.detailquantity {
float: left;
margin: 2% 0px 0px 0px;
width: 148px
}

input.quantity2input {
text-align: center;
height: 100%;
width: 35px;
font-size: 1em;
border: none;
margin: 0;
padding: 0
}

div.quantity2div div {
height: 100%;
text-align: center
}

/* The - Minus button */
div.detailquantity2div div:nth-child(1),
div.detailquantity2div div:nth-child(1):active,
div.detailquantity2div div:nth-child(1):focus {
background-color: #dae5db;
color: #fff;
padding: 2px 0 0 0;
border-radius: 3px 0 0 3px
}
div.detailquantity2div div:nth-child(1):hover {
background-color: #7d7e7d
}

/* The + Plus button */
div.detailquantity2div div:nth-child(3),
div.detailquantity2div div:nth-child(3):active,
div.detailquantity2div div:nth-child(3):focus {
background-color: #e5dae4;
color: #fff;
padding: 6px 0 0 0;
border-radius: 0 3px 3px 0
}
div.detailquantity2div div:nth-child(3):hover {
background-color: #7d7e7d
}

div.detailquantitytext{
display:none;
text-align: center;
color: rgba(11,11,13,1);
}

Julie
Browns Summit NC USA

Positivek9
Ecommerce Template Guru

USA
3992 Posts

Posted - 10/12/2017 :  15:53:29  
Figured it out for Firefox but the scroll bar remains in Chrome.

div.quantity2div div {
height: 100%; <- changed to 84%
text-align: center
}

/* The - Minus button */
padding: 2px 0 0 0; <- changed to 6px 0 0 0;

Julie
Browns Summit NC USA

Edited by - Positivek9 on 10/12/2017 15:57:51

drivers
Ecommerce Template Expert

USA
794 Posts

Posted - 10/12/2017 :  23:10:03  
.quantity2div.detailquantity2div {
overflow: hidden;
}

Just add the above to your css file (the one that does not get overwritten with updates)


When it gets late at night, go to bed... try again tomorrow.

Edited by - drivers on 10/12/2017 23:35:55

Positivek9
Ecommerce Template Guru

USA
3992 Posts

Posted - 10/13/2017 :  09:27:03  
You are a genius!!!

That worked!

Julie
Browns Summit NC USA
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000