[Skip to main content](#vessel-content) # Trouble with characteristics selection ## - **[midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile")** - [![midgetwithamatch's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile") Topic Author - [ Offline](/forum/user/15657-midgetwithamatch) Less More - Posts: 9 - Thank you received: 0 - - 13 years 3 months ago - 13 years 3 months ago [\#113874](#113874) by [midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile") *[Trouble with characteristics selection](/forum/4-how-to/85323-trouble-with-characteristics-selection#113874 "Hello there, I'm currently working on a project for client. I am in need of some help as I can't figure out what is causing this behaviour. Here a screenshot of how the product page looks when you initially load the page: This is what happens when you select a characteristic from the dropdowns: This is some information of how it is behaving in in chrome: As you can see in the third picture it is changing the width of the hikashop_product_main_image_thumb div from 378px wide to 489px. There is a large margin added to the left side of the hikashop_product_main_image_subdiv div but I have the margin in the CSS set to I have modified the show_block_image to wrap each thumbnail in a div with the class of thumbnail_wrapper and to place a after each thumbnail so that they sit one per line. I'm assuming that the hikashopUpdateVariant javascript function might have something to do with this? If anyone wants a login to the website so that they can test it and provide me with feedback just let me know! Any help here is much appreciated. I can't figure out what exactly is causing the margin and the change in width in the main product image. Thank you for any help")* was created by *[midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile")* Hello there, I'm currently working on a project for client. I am in need of some help as I can't figure out what is causing this behaviour. Here a screenshot of how the product page looks when you initially load the page: [ ![screenshot_1.jpg](/forum/attachment/11108) ](/forum/attachment/11108 "screenshot_1.jpg") This is what happens when you select a characteristic from the dropdowns: [ ![screenshot_2.jpg](/forum/attachment/11109) ](/forum/attachment/11109 "screenshot_2.jpg") This is some information of how it is behaving in in chrome: [ ![screenshot_3.jpg](/forum/attachment/11110) ](/forum/attachment/11110 "screenshot_3.jpg") As you can see in the third picture it is changing the width of the hikashop_product_main_image_thumb div from 378px wide to 489px. There is a large margin added to the left side of the hikashop_product_main_image_subdiv div but I have the margin in the CSS set to Code: margin: 0px !important; I have modified the show_block_image to wrap each thumbnail in a div with the class of thumbnail_wrapper and to place a <br> after each thumbnail so that they sit one per line. Code: <?php /** * @package HikaShop for Joomla! * @version 2.1.1 * @author hikashop.com * @copyright (C) 2010-2012 HIKARI SOFTWARE. All rights reserved. * @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html */ defined('_JEXEC') or die('Restricted access'); ?><?php $variant_name = ''; $variant_main = '_main'; $display_mode = ''; if(!empty($this->variant_name)) { $variant_name = $this->variant_name; if(substr($variant_name, 0, 1) != '_') $variant_name = '_' . $variant_name; $variant_main = $variant_name; $display_mode = 'display:none;'; } ?><div id="hikashop_product_image<?php echo $variant_main;?>" class="hikashop_global_image_div" style="<?php echo $display_mode;?>"> <div id="hikashop_main_image_div<?php echo $variant_name;?>" class="hikashop_main_image_div"> <?php if(!empty ($this->element->images)){ $image = reset($this->element->images); } $height = $this->config->get('product_image_y'); $width = $this->config->get('product_image_x'); if(empty($height)) $height=$this->config->get('thumbnail_y'); if(empty($width)) $width=$this->config->get('thumbnail_x'); $divWidth=$width; $divHeight=$height; $this->image->checkSize($divWidth,$divHeight,$image); if (!$this->config->get('thumbnail')) { if(!empty ($this->element->images)){ echo '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image" />'; } } else { $style = ''; if (!empty ($this->element->images) && count($this->element->images) > 1) { if (!empty($height)) { $style = ' style="height:' . ($height + 20) . 'px;"'; } } $variant_name=''; if(isset($this->variant_name)){ $variant_name=$this->variant_name; } ?> <div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div"> <?php if (!empty ($this->element->images) && count($this->element->images) > 1) { foreach ($this->element->images as $image) { echo '<div class="thumbnail_wrapper">'; echo $this->image->display($image->file_path, 'hikashop_main_image'.$variant_name, $image->file_name, 'class="hikashop_child_image"','', $width, $height); echo "<br>"; echo "</div>"; } } ?> </div> <div class="hikashop_product_main_image_thumb" id="hikashop_image_main_thumb_div<?php echo $variant_name;?>" <?php echo $style;?> > <div style="<?php if(!empty($divHeight)){ echo 'height:'.($divHeight+20).'px;'; } ?>text-align:center;clear:both;" class="hikashop_product_main_image"> <div style="position:relative;text-align:center;clear:both;width:<?php echo $divWidth;?>px;margin: auto;" class="hikashop_product_main_image_subdiv"> <?php echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"', $width, $height); if(!empty($this->element->badges)) $this->classbadge->placeBadges($this->image, $this->element->badges, '0', '0'); ?> </div> </div> </div> <?php } ?> </div> </div> I'm assuming that the hikashopUpdateVariant javascript function might have something to do with this? If anyone wants a login to the website so that they can test it and provide me with feedback just let me know! Any help here is much appreciated. I can't figure out what exactly is causing the margin and the change in width in the main product image. Thank you for any help - [ ![screenshot_1.jpg](/forum/attachment/11108) ](/forum/attachment/11108 "screenshot_1.jpg") [ ](/forum/attachment/11108?download=1 "screenshot_1.jpg") - [ ![screenshot_2.jpg](/forum/attachment/11109) ](/forum/attachment/11109 "screenshot_2.jpg") [ ](/forum/attachment/11109?download=1 "screenshot_2.jpg") - [ ![screenshot_3.jpg](/forum/attachment/11110) ](/forum/attachment/11110 "screenshot_3.jpg") [ ](/forum/attachment/11110?download=1 "screenshot_3.jpg") Last edit: 13 years 3 months ago by [midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg1MzIzLXRyb3VibGUtd2l0aC1jaGFyYWN0ZXJpc3RpY3Mtc2VsZWN0aW9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86290 - Thank you received: 14268 - - 13 years 3 months ago [\#114006](#114006) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Trouble with characteristics selection](/forum/4-how-to/85323-trouble-with-characteristics-selection#114006 "Hello there, I'm currently working on a project for client. I am in need of some help as I can't figure out what is causing this behaviour. Here a screenshot of how the product page looks when you initially load the page: This is what happens when you select a characteristic from the dropdowns: This is some information of how it is behaving in in chrome: As you can see in the third picture it is changing the width of the hikashop_product_main_image_thumb div from 378px wide to 489px. There is a large margin added to the left side of the hikashop_product_main_image_subdiv div but I have the margin in the CSS set to I have modified the show_block_image to wrap each thumbnail in a div with the class of thumbnail_wrapper and to place a after each thumbnail so that they sit one per line. I'm assuming that the hikashopUpdateVariant javascript function might have something to do with this? If anyone wants a login to the website so that they can test it and provide me with feedback just let me know! Any help here is much appreciated. I can't figure out what exactly is causing the margin and the change in width in the main product image. Thank you for any help")* Hi, Hard to say precisely what to do as the page is heavily customized (and the issue apparently comes from that customization since it works fine by default). We would need to look directly at the CSS/HTML of the page to see what's going on, so yes, we'll need an access. The following user(s) said Thank You: [midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg1MzIzLXRyb3VibGUtd2l0aC1jaGFyYWN0ZXJpc3RpY3Mtc2VsZWN0aW9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile")** - [![midgetwithamatch's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile") Topic Author - [ Offline](/forum/user/15657-midgetwithamatch) Less More - Posts: 9 - Thank you received: 0 - - 13 years 3 months ago - 13 years 3 months ago [\#114021](#114021) by [midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile") Replied by *[midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile")* on topic *[Trouble with characteristics selection](/forum/4-how-to/85323-trouble-with-characteristics-selection#114021 "Hello there, I'm currently working on a project for client. I am in need of some help as I can't figure out what is causing this behaviour. Here a screenshot of how the product page looks when you initially load the page: This is what happens when you select a characteristic from the dropdowns: This is some information of how it is behaving in in chrome: As you can see in the third picture it is changing the width of the hikashop_product_main_image_thumb div from 378px wide to 489px. There is a large margin added to the left side of the hikashop_product_main_image_subdiv div but I have the margin in the CSS set to I have modified the show_block_image to wrap each thumbnail in a div with the class of thumbnail_wrapper and to place a after each thumbnail so that they sit one per line. I'm assuming that the hikashopUpdateVariant javascript function might have something to do with this? If anyone wants a login to the website so that they can test it and provide me with feedback just let me know! Any help here is much appreciated. I can't figure out what exactly is causing the margin and the change in width in the main product image. Thank you for any help")* Thank you nicolas for the help! This is the login info for anyone wanting to help: URL: [ www.olmecapparel.com](http://www.olmecapparel.com) User: hika_test Password: thankyouforhelping If you need me to post any modified views just let me know. Last edit: 13 years 3 months ago by [midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg1MzIzLXRyb3VibGUtd2l0aC1jaGFyYWN0ZXJpc3RpY3Mtc2VsZWN0aW9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86290 - Thank you received: 14268 - - 13 years 3 months ago [\#114173](#114173) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Trouble with characteristics selection](/forum/4-how-to/85323-trouble-with-characteristics-selection#114173 "Hello there, I'm currently working on a project for client. I am in need of some help as I can't figure out what is causing this behaviour. Here a screenshot of how the product page looks when you initially load the page: This is what happens when you select a characteristic from the dropdowns: This is some information of how it is behaving in in chrome: As you can see in the third picture it is changing the width of the hikashop_product_main_image_thumb div from 378px wide to 489px. There is a large margin added to the left side of the hikashop_product_main_image_subdiv div but I have the margin in the CSS set to I have modified the show_block_image to wrap each thumbnail in a div with the class of thumbnail_wrapper and to place a after each thumbnail so that they sit one per line. I'm assuming that the hikashopUpdateVariant javascript function might have something to do with this? If anyone wants a login to the website so that they can test it and provide me with feedback just let me know! Any help here is much appreciated. I can't figure out what exactly is causing the margin and the change in width in the main product image. Thank you for any help")* Mmm. I don't see why you didn't add a float:left; to the class hikashop_product_main_image_thumb That should fix that problem as it should actually display wrongly all the time without it. The following user(s) said Thank You: [midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg1MzIzLXRyb3VibGUtd2l0aC1jaGFyYWN0ZXJpc3RpY3Mtc2VsZWN0aW9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile")** - [![midgetwithamatch's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile") Topic Author - [ Offline](/forum/user/15657-midgetwithamatch) Less More - Posts: 9 - Thank you received: 0 - - 13 years 3 months ago [\#114223](#114223) by [midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile") Replied by *[midgetwithamatch](/forum/user/15657-midgetwithamatch "View midgetwithamatch's Profile")* on topic *[Trouble with characteristics selection](/forum/4-how-to/85323-trouble-with-characteristics-selection#114223 "Hello there, I'm currently working on a project for client. I am in need of some help as I can't figure out what is causing this behaviour. Here a screenshot of how the product page looks when you initially load the page: This is what happens when you select a characteristic from the dropdowns: This is some information of how it is behaving in in chrome: As you can see in the third picture it is changing the width of the hikashop_product_main_image_thumb div from 378px wide to 489px. There is a large margin added to the left side of the hikashop_product_main_image_subdiv div but I have the margin in the CSS set to I have modified the show_block_image to wrap each thumbnail in a div with the class of thumbnail_wrapper and to place a after each thumbnail so that they sit one per line. I'm assuming that the hikashopUpdateVariant javascript function might have something to do with this? If anyone wants a login to the website so that they can test it and provide me with feedback just let me know! Any help here is much appreciated. I can't figure out what exactly is causing the margin and the change in width in the main product image. Thank you for any help")* nicolas my friend you are the man. Something so simple!!!! Ugh been honestly reading through the javascript and the front end views line by line trying to figure out what could be causing that behaviour. I just went in and threw float:right to the .hikashop_product_main_image_thumb and immediately started behaving properly. Thank you so much. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg1MzIzLXRyb3VibGUtd2l0aC1jaGFyYWN0ZXJpc3RpY3Mtc2VsZWN0aW9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.224 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)