Jump to content



Photo
- - - - -

Sizing bootstrap input box when part of an input group.


  • Please log in to reply
6 replies to this topic

#1   Enzo_UK

Enzo_UK
  • Members
  • 205 posts
  • Real Name:Andrew Ensom
  • Gender:Male

Posted 08 November 2016 - 09:21

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.

 



#2   wHiTeHaT

wHiTeHaT
  • Community Team
  • 1,138 posts
  • Real Name:Henry
  • Gender:Male
  • Location:Netherlands

Posted 08 November 2016 - 09:33

Stackoverflow possible solution :

 

http://stackoverflow...ly-in-bootstrap


Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

#3   Enzo_UK

Enzo_UK
  • Members
  • 205 posts
  • Real Name:Andrew Ensom
  • Gender:Male

Posted 08 November 2016 - 09:51

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.



#4   14steve14

14steve14
  • Members
  • 4,362 posts
  • Real Name:Steve
  • Gender:Male
  • Location:Dorset UK

Posted 08 November 2016 - 10:42

Have a read of the thread here. It may help or may indeed do what you are laready trying to do. No need to reinvent the wheel unless you have to.

 

http://forums.oscomm...p-quantity-box/


REMEMBER BACKUP, BACKUP AND BACKUP

 

Find information about the bootstrap community version here

 

Success is the ability to go from one failure to the next without any loss of enthusiasm


#5   wHiTeHaT

wHiTeHaT
  • Community Team
  • 1,138 posts
  • Real Name:Henry
  • Gender:Male
  • Location:Netherlands

Posted 08 November 2016 - 10:50

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.


Do you need an osCommerce website? Do you want to have an Responsive osCommerce CONTACT ME as i am for HIRE

#6   Enzo_UK

Enzo_UK
  • Members
  • 205 posts
  • Real Name:Andrew Ensom
  • Gender:Male

Posted 08 November 2016 - 11:11

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.



#7   Enzo_UK

Enzo_UK
  • Members
  • 205 posts
  • Real Name:Andrew Ensom
  • Gender:Male

Posted 08 November 2016 - 11:24

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