ZCA Bootstrap 4 Template [Support Thread]

[lat9]

The title and input fields are out of line for the credit card data input.
Zen Cart version is 1.5.7d.
Does anyone know how to align them? The title is a label and the input field is in an iframe.

... not without seeing how those input fields are rendered. What payment method is in use?

[todoonada]

... not without seeing how those input fields are rendered. What payment method is in use?

Of course. I forgot to give this important piece of information.
It is the Square payment module.

[OldNGrey]

... not without seeing how those input fields are rendered. What payment method is in use?

with zc157d and standard ZCA bootstrap template on my test site the default is
Attachment 19914

[todoonada]

with zc157d and standard ZCA bootstrap template on my test site the default is
Attachment 19914

That looks quite different. You have an extra filed for date and both date fields are of the select type.
I use same zencart version like you and standard bootstrap template.
Is the code for cc-input coming from the cc-vendor? This might explain why it looks different depending on the country the shop is in.

[ChuckPhillips]

Our form looked like todoonada's also. We adjusted the CSS, per the Square installation instructions:

5. "The styling of the Square input fields is different from the rest of my payment input fields."
The module contains some CSS markup in the very bottom of the `/includes/modules/pages/checkout_payment/jscript_square.php` file, intended to create uniformity for the custom fields Square creates. For 99% of stores you will NOT need to change this; but in rare cases you may want to alter this CSS slightly to suit your needs.

[lat9]

Our form looked like todoonada's also. We adjusted the CSS, per the Square installation instructions:

5. "The styling of the Square input fields is different from the rest of my payment input fields."
The module contains some CSS markup in the very bottom of the `/includes/modules/pages/checkout_payment/jscript_square.php` file, intended to create uniformity for the custom fields Square creates. For 99% of stores you will NOT need to change this; but in rare cases you may want to alter this CSS slightly to suit your needs.

Thanks, @ChuckPhilips, for filling in the missing details.

[todoonada]

Our form looked like todoonada's also. We adjusted the CSS, per the Square installation instructions:

5. "The styling of the Square input fields is different from the rest of my payment input fields."
The module contains some CSS markup in the very bottom of the `/includes/modules/pages/checkout_payment/jscript_square.php` file, intended to create uniformity for the custom fields Square creates. For 99% of stores you will NOT need to change this; but in rare cases you may want to alter this CSS slightly to suit your needs.

Thank you. Never thought about searching this file for css.

[todoonada]

Our form looked like todoonada's also. We adjusted the CSS, per the Square installation instructions:

5. "The styling of the Square input fields is different from the rest of my payment input fields."
The module contains some CSS markup in the very bottom of the `/includes/modules/pages/checkout_payment/jscript_square.php` file, intended to create uniformity for the custom fields Square creates. For 99% of stores you will NOT need to change this; but in rare cases you may want to alter this CSS slightly to suit your needs.

Still I got a problem to figure out how to align label and textfield.
If I want to go add a line break after the label and change /includes/languages/english/modules/payment/square.php to define('MODULE_PAYMENT_SQUARE_TEXT_CVV', 'CVV Number:<br />'.);
the line break happens after the textfield and not after the label.
Adding CSS at the end of /includes/modules/pages/checkout_payment/jscript_square.php also was not successful.

If someone knows how to get label and textfield can be aligned, this information is greatly appreciated.

Below is a comparison between the standard layout (looks fine) and bootstrap (not aligned).

[todoonada]

I found the problem of the misalignment.
The problem is that the labels get display: inline-block; from https://cdn.jsdelivr.net/npm/bootstr...tstrap.min.css.
This can be overwritten by adding display: block; in the aforementioned /includes/modules/pages/checkout_payment/jscript_square.php
.inputLabelPayment::after {display: block;content: "\A"; white-space: pre;}

[JimmyV]

On here when I am on a product page it says "quantity in cart: 1" for example above the add box and button.

However when you look at a category listing by row (setting "1" under columns per row) it does not show the above guidance.

Looking at product info display I can see the entry to get that display on about line 160 on my particular php file.

$display_qty = ($flag_show_product_info_in_cart_qty == 1 && $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '';

However, I am having a brain freeze on where to insert this statement to get it to show on the rows setup or columns for that matter even set on "0" as recommended it doesn't display.

So when you look at a grid on a laptop you have say 3-5 products across and tons of space in each box or row where this can be inserted but where?