Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Sizing bootstrap input box when part of an input group.


Enzo_UK

Recommended Posts

Can someone please point me in the right direction, I am trying to get a 'Qty' input box attached to the left side of my 'Add To Cart' button, by using the "input-group" class.

 

The input box part seems to resize as screen size changes, and the button stays the same width, but at certain screen sizes the input box is so narrow you cant actually see the number in it.

 

This is how I am doing it at the moment:

    <div class="col-xs-4 text-right">
​      <div class="input-group">
        <?php echo tep_draw_input_field('cart_quantity', '1', 'maxlength="2"');?>
        <span class="input-group-btn">
        <?php  echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_draw_button(IMAGE_BUTTON_IN_CART, 'fa fa-shopping-cart', null, 'primary', null, 'btn-success'); ?>
        </span>
      </div><!-- /input-group -->
    </div><!-- /col-xs-4 text-right -->

Any help greatly appreciated, thanks in advance.

 

Link to comment
Share on other sites

Thanks for the link, I have had a look at that but seems more about making the button part resize responsively.

 

I am after a way to make the 'Input Box' a fixed width, so it doesn't resize.

Link to comment
Share on other sites

I think I have got something I am happy with now, and have learnt something new... have ended up specifying different widths for XS, SM, LG... so have ended up with 3,3,6 on XS... 4,4,4 on SM... 5,4,3 on LG.

Link to comment
Share on other sites

Just incase anyone else reads this, and uses any of the code above..

 

One change I made was to the above was adding the 'number' restriction on the input field, to stop it from sending other characters, which will trigger the added to cart message in the cart, but dont actually add an item.

		<?php echo tep_draw_input_field('cart_quantity', '1', 'maxlength="2"', 'number');?>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...