Dave224:
I'm working on the address change card in OPC when the customer edits the shipping or billing address during checkout. For larger screens the Save Changes button, Cancel button, and checkbox to add the address to the address book look fine. But on smaller screens, the buttons and checkbox run over the card width. In addition, looking at the code, the checkbox and its label should be on one row, while the two buttons should be on a separate row. I can't understand why block display style is not being followed. See attached screenshots. The relevant code snippet from includes/templates/bootstrap/templates/tpl_modules_opc_shipping_address.php is:
if ($editShippingButtonLink === true) {
$cancel_title = 'title="' . BUTTON_CANCEL_CHANGES_TITLE . '"';
$save_title = 'title="' . BUTTON_SAVE_CHANGES_TITLE . '"';
$show_add_address = $_SESSION['opc']->showAddAddressField();
$parameters = ($show_add_address) ? '' : ' class="hiddenField"';
?>
<div class="opc-buttons">
<?php
if ($show_add_address === true) {
?>
<div class="custom-control custom-checkbox">
<?php echo zen_draw_checkbox_field("add_address['ship']", '1', false, 'id="opc-add-ship"' . $parameters); ?>
<label class="checkboxLabel custom-control-label" for="opc-add-ship" title="<?php echo TITLE_ADD_TO_ADDRESS_BOOK; ?>"><?php echo TEXT_ADD_TO_ADDRESS_BOOK; ?></label>
</div>
<?php
}
?>
<div class="d-flex justify-content-around mt-2">
<div id="opc-ship-cancel"><?php echo zen_image_button(BUTTON_IMAGE_CANCEL, BUTTON_CANCEL_CHANGES_ALT, $cancel_title); ?></div>
<div id="opc-ship-save"><?php echo zen_image_button(BUTTON_IMAGE_UPDATE, BUTTON_SAVE_CHANGES_ALT, $save_title); ?></div>
</div>
</div>
<?php
}
```
> The images are attached.
>
> Thank you,
>
> Dave
> zc1.5.8a, bootstrap 3.7.7, opc 2.5.4
>
I'm not seeing that behavior. For wide screens, the "Cancel" and "Save Changes" buttons are on their own lines and I'm guessing that some CSS change that you've made is causing that change (which is also why the smaller screens' display has gone wonky).
