A bit of help with tpl_pi_qty_input.php

[14Steve14]

I am adjusting the layout of the product page and have it set as per the attached image.

The quantity input box was narrower than the stock level box so I want to make it the same height so it all lines up in the row. I have added btn_lg to the two end buttons, but how do I make the input box in the middle higher so it is the same height as the buttons on the ends?

Code: Select all

<div class="input-group">
    <div class="input-group-prepend">
      <?php
      if (PI_QTY_INPUT_BUTTONS == 'True') {
        ?>
        <button class="btn btn-info btn-lg spinner" type="button" data-spin="minus">
          <i class="fa fa-minus"></i>
        </button>
        <?php
      } else {
        ?>
          <div class="input-group-text"><?= PI_QTY_INPUT_BUTTON_TEXT ?></div>
        <?php
      }
      ?>
    </div>
    <?php
    echo (new Input('qty', ['min' => '1', 'class' => 'form-control form-control', 'id' => 'pi-qty-input'], 'number'))->default_value('1');

    if (PI_QTY_INPUT_BUTTONS == 'True') {
    ?>
    <div class="input-group-append">
      <button class="btn btn-info btn-lg spinner" type="button" data-spin="plus">
        <i class="fa fa-plus"></i>
      </button>
    </div>
      <?php
    }
    ?>
  </div>

input-box.png

[burt]

https://getbootstrap.com/docs/4.6/compo ... ms/#sizing

should do you. Post back if it doesnt make sense.

[14Steve14]

Many thanks @burt For the life of me I could not find anything about form control when I looked. That page was a great help and now everything lines up as it should.

[burt]

It looks like you can set the size on the input-group div and remove the sizing from the elements contained inside that div, see;

https://getbootstrap.com/docs/4.0/compo ... up/#sizing

Something like;

Code: Select all

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <button class="btn btn-info" type="button">-</button>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-info" type="button">+</button>
  </div>
</div>