How to change position of qty input field for product?

  • Posts: 65
  • Thank you received: 3
6 years 2 months ago #287595

-- url of the page with the problem -- : www.ginmacher.de
-- HikaShop version -- : 3.3.0
-- Joomla version -- : 3.8.3
-- PHP version -- : 7.1
-- Browser(s) name and version -- : Firefox
-- Error-message(debug-mod must be tuned on) -- : Quantity Input field - wrong position

Hello Hika-Community,

see attached screenshot. I had to select (due to slow response in responsive mode) the qty input from +/- tp dropdown. But now the dropdown is directly located over the add to cart button and way to large.



How can I adjust the button from a lenght point of view to the add to cart button and also below that button?

Thank you very much

Alexander

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81484
  • Thank you received: 13062
  • MODERATOR
6 years 2 months ago #287598

Hi,

This issue must come from the CSS of your template.
Please provide precise instructions to be able to look at that page so that we can look at the CSS there.

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
6 years 2 months ago #287624

Hello Nicolas,

thank you for the quick reply. You can check here:

www.ginmacher.de => click in navigation on point "Gin-Konfigurator". On mext page scroll down and click Button "Gin-Konfigurator starten" Then you come to the first page where one product item (Juniper) is listed. If you hoover with mouse over, you'lle see button for add to cart and qty input field drop down.

I already tried to check css. In inline it says 220px width, so I tried to override the css with 50px !important in the file chosen-css in media/jui/css but that lead to the issue that now all dropdown fields (also in Joomla Admin backend) are now 50px :) So I changed it back. I set in chosen.css a margin bottom, so at least now the qty input is over the add to chart buttom. But it would be greatr to have it like 30px or so and direct left or right on the same hight as the button.

And another really strange thing: on the same page stated above if you scroll down that you can see the product juniper itself as well as the bottom navigation with the social Media and Newsletter module: if you hoover over the product juniper and the add to cart button slides in, on the buttom moule the input fields for the newsletter slide also in at the same time :) I just realized that and some how the input fields from the newsletter are linked to the add to cart button when sliding in? Do you know why this happends?

Thanks for any help :)

Last edit: 6 years 2 months ago by ginmacher.

Please Log in or Create an account to join the conversation.

  • Posts: 81484
  • Thank you received: 13062
  • MODERATOR
6 years 2 months ago #287628

Hi,

The issue is the template which forces the width of all the dropdowns to 220px.
Adding such CSS on your website will do the job:
.hikashop_product_quantity_div select{
width: 50px !important
}

Regarding the sliding of the newsletter module, that's a bug of the javascript of the template in the line:
www.ginmacher.de/templates/lt_winery/js/custom.js
The slider class is added to all the forms on the page instead of adding it only to the form of the element which is hovered.
You should check with your template provider.

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
6 years 2 months ago #287679

Hi Nicolas,

you are great, thanks a lot! That works out :) Regarding the other issue I will contact my template provider.

Can you support here as well (same issue, but at the checkout). I tried to give you all req. information in the screenshot. I tried to adap your CSS doe to this qty field as well but somehow I miss something here, that this field will also change from 220px to 50px.



I tried this code in template.css, but it didn't work out:

.hikashop_checkout_quantity_1192_div select{
width: 50px !important
}

Thanks again
Alexander

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81484
  • Thank you received: 13062
  • MODERATOR
6 years 2 months ago #287752

Hi,

You can use that:
.hikashop_cart_product_quantity_value select{
width: 50px !important
}

The following user(s) said Thank You: ginmacher

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
6 years 2 months ago #287966

That works. Thank you Nicolas!

Please Log in or Create an account to join the conversation.

Time to create page: 0.084 seconds
Powered by Kunena Forum