Hey guys. How to keep inline these input type text & button?
HTML
<td class="col item-qty" data-th="Quantity">
<div class="quantity clearfix">
<input type="button" value="-" class="minus" id="minus<?=$val['product_id']?>" onclick="update_quantity_in_cart('<?=$val['product_id']?>','minus')">
<input type="text" readonly name="quantity" id="quantity<?=$val['product_id']?>" value="<?=$val['product_qty']?>" class="qty" />
<input type="button" value="+" class="plus" id="plus<?=$val['product_id']?>" onclick="update_quantity_in_cart('<?=$val['product_id']?>','plus')">
</div>
</td>
CSS
.quantity .qty {
float: left;
width: 36px;
height: 40px;
line-height: 40px;
border: 0;
border-left: 1px solid #111;
border-right: 1px solid #111;
background-color: #111;
text-align: center;
margin-bottom: 0;
color: #FFF;
}
.quantity .plus,
.quantity .minus {
display: block;
float: left;
cursor: pointer;
border: 1px solid #111;
padding: 0;
width: 36px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: transparent;
font-size: 16px;
font-weight: bold;
transition: background-color .2s linear;
-webkit-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
}
Media Query
.cart-wrapper .col.item-qty .quantity {
float: right;
margin: 0;
}
.cart-wrapper .col.item-qty,
.cart-wrapper .col.product-price,
.cart-wrapper .col.sub-total,
.cart-wrapper .col.item-remove {
box-sizing: border-box;
display: block;
float: left;
white-space: nowrap;
width: 33%;
}
Help guys. It should be like this:
Ray.H
December 10, 2017, 5:49pm
4
You are having a float drop down due to lack of space for the input widths
On <td class="col item-qty"
you have width:33%
At some point, the 3 inputs at width:36px;
+ borders is exceeding the <td> width:33%
causing a float drop
It only takes one pixel to make a float drop
Try narrowing the widths of your inputs to 34px or whatever prevents the float drop
Yeah. I did it now my problem is, how do I center the div quantity (input &button)? I tried margin: 0 auto; but it’s not working.
Ray.H
December 11, 2017, 3:38pm
6
You can’t center three floats with margin 0 auto;
That only works on one element (their parent) with a width.
The 3 input’s parent is .quantity
You would need to remove the float: right;
from .quantity
then it would center with margin 0 auto;
You will need to set up a new class or selector for that situation.
If it does not conflict with any other parts on the page a simple correction here should work…
.cart-wrapper .col.item-qty .quantity {
/*float: right;*/
width: ; /*total width of 3 inputs*/
margin: 0 auto;
}
If the inputs were inline-blocks
then you could center all three of them with text-align:center
on the parent.
Then you will have whitespace nodes to contend with in order to get the inputs right next to each other.
Ray.H
December 11, 2017, 4:27pm
7
Something like this should work
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
<style>
.quantity {
display:table;/*contain floats*/
min-width:106px;
margin:0 auto;
/*visual test rules below - remove on real page*/
padding:2px;
outline:1px dashed red;
}
.quantity div { /*simulate inputs*/
float:left;
width:34px;
height:40px;
border:1px solid;
}
.quantity div:nth-child(2) {
border-width:1px 0;
}
</style>
</head>
<body>
<div class="quantity">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
system
Closed
March 12, 2018, 11:27pm
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.