Enzo_UK

Sizing bootstrap input box when part of an input group.

7 posts in this topic

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.

 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

here is your problem:

<div class="col-xs-4 text-right">

try

<div class="col-xs-6 text-right">

And change all the other columns what are within the container element according to a total of 12 grids.

Share this post


Link to post
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.

Share this post


Link to post
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');?>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now