[Skip to main content](#vessel-content) # Category image overlaps DIV ## - **[crashball](/forum/user/3650-crashball "View crashball's Profile")** - [![crashball's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3650-crashball "View crashball's Profile") Topic Author - [ Offline](/forum/user/3650-crashball) Less More - Posts: 7 - Thank you received: 0 - - 15 years 2 months ago [\#24470](#24470) by [crashball](/forum/user/3650-crashball "View crashball's Profile") *[Category image overlaps DIV](/forum/3-bug-report/24470-category-image-overlaps-div#24470 "I have a template that has user content modules on left and right of the main content. I am using the cart module on the right, and a menu module on the left, with configuring the category view to display only 3 columns. The DIV element width i assume is set according to the number of columns set to display. Mine is set to 32% since i have 3 columns. With the DIV element being a percent, there is an issue with the category images overlapping if you have a image dimension set too large. Actually after more testing, even removing static sizes from the image size configuration and more columns, it can still spill out. See attached photo. The images size are set as static pixel size while the DIV element are a percentage. So as the content pane size changes, the div will adjust, but the images will not. Not sure if having the option to set the image size as a percent as well could avoid this issue or make it worse in other configs, or if there is another way to control this so the images don't spill out of the DIV element.")* was created by *[crashball](/forum/user/3650-crashball "View crashball's Profile")* I have a template that has user content modules on left and right of the main content. I am using the cart module on the right, and a menu module on the left, with configuring the category view to display only 3 columns. The DIV element width i assume is set according to the number of columns set to display. Mine is set to 32% since i have 3 columns. With the DIV element being a percent, there is an issue with the category images overlapping if you have a image dimension set too large. Actually after more testing, even removing static sizes from the image size configuration and more columns, it can still spill out. See attached photo. The images size are set as static pixel size while the DIV element are a percentage. So as the content pane size changes, the div will adjust, but the images will not. Not sure if having the option to set the image size as a percent as well could avoid this issue or make it worse in other configs, or if there is another way to control this so the images don't spill out of the DIV element. image missing http://www.hikashop.com/media/kunena/attachments/legacy/images/Capture-20110826.JPG - [ ![Capture-20110826.JPG](/forum/attachment/1689) ](/forum/attachment/1689 "...e-20110826.JPG") [ ](/forum/attachment/1689?download=1 "...e-20110826.JPG") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC8yNDQ3MC1jYXRlZ29yeS1pbWFnZS1vdmVybGFwcy1kaXY/dG1wbD1tYXJrZG93bg==) 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?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86320 - Thank you received: 14279 - - 15 years 2 months ago [\#24481](#24481) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Category image overlaps DIV](/forum/3-bug-report/24470-category-image-overlaps-div#24481 "I have a template that has user content modules on left and right of the main content. I am using the cart module on the right, and a menu module on the left, with configuring the category view to display only 3 columns. The DIV element width i assume is set according to the number of columns set to display. Mine is set to 32% since i have 3 columns. With the DIV element being a percent, there is an issue with the category images overlapping if you have a image dimension set too large. Actually after more testing, even removing static sizes from the image size configuration and more columns, it can still spill out. See attached photo. The images size are set as static pixel size while the DIV element are a percentage. So as the content pane size changes, the div will adjust, but the images will not. Not sure if having the option to set the image size as a percent as well could avoid this issue or make it worse in other configs, or if there is another way to control this so the images don't spill out of the DIV element.")* Why not just set the width of your thumbnails and not the height in the config ? The system will then adapt the size of the thumbnails so that they fit in the desired width... Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC8yNDQ3MC1jYXRlZ29yeS1pbWFnZS1vdmVybGFwcy1kaXY/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[crashball](/forum/user/3650-crashball "View crashball's Profile")** - [![crashball's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3650-crashball "View crashball's Profile") Topic Author - [ Offline](/forum/user/3650-crashball) Less More - Posts: 7 - Thank you received: 0 - - 15 years 2 months ago [\#24645](#24645) by [crashball](/forum/user/3650-crashball "View crashball's Profile") Replied by *[crashball](/forum/user/3650-crashball "View crashball's Profile")* on topic *[Re: Category image overlaps DIV](/forum/3-bug-report/24470-category-image-overlaps-div#24645 "I have a template that has user content modules on left and right of the main content. I am using the cart module on the right, and a menu module on the left, with configuring the category view to display only 3 columns. The DIV element width i assume is set according to the number of columns set to display. Mine is set to 32% since i have 3 columns. With the DIV element being a percent, there is an issue with the category images overlapping if you have a image dimension set too large. Actually after more testing, even removing static sizes from the image size configuration and more columns, it can still spill out. See attached photo. The images size are set as static pixel size while the DIV element are a percentage. So as the content pane size changes, the div will adjust, but the images will not. Not sure if having the option to set the image size as a percent as well could avoid this issue or make it worse in other configs, or if there is another way to control this so the images don't spill out of the DIV element.")* That only solves it as long as the screen is displayed at a given resolution. If i am viewing the page at 1024x768, it may look ok. Then if i decrease the size of the window, the size of the DIV elements change since they are set as a % of the available width. The images however are set as a static pixel size and will still spill out over the DIV elements. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC8yNDQ3MC1jYXRlZ29yeS1pbWFnZS1vdmVybGFwcy1kaXY/dG1wbD1tYXJrZG93bg==) 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?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86320 - Thank you received: 14279 - - 15 years 2 months ago [\#24650](#24650) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Category image overlaps DIV](/forum/3-bug-report/24470-category-image-overlaps-div#24650 "I have a template that has user content modules on left and right of the main content. I am using the cart module on the right, and a menu module on the left, with configuring the category view to display only 3 columns. The DIV element width i assume is set according to the number of columns set to display. Mine is set to 32% since i have 3 columns. With the DIV element being a percent, there is an issue with the category images overlapping if you have a image dimension set too large. Actually after more testing, even removing static sizes from the image size configuration and more columns, it can still spill out. See attached photo. The images size are set as static pixel size while the DIV element are a percentage. So as the content pane size changes, the div will adjust, but the images will not. Not sure if having the option to set the image size as a percent as well could avoid this issue or make it worse in other configs, or if there is another way to control this so the images don't spill out of the DIV element.")* It's not technically possible to set the images width and height dynamically. The only solution for what you want to do is to edit the file "listing_div" of the view "product" via the menu Display->Views and change the dynamic width to set it in px, in hard. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC8yNDQ3MC1jYXRlZ29yeS1pbWFnZS1vdmVybGFwcy1kaXY/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[crashball](/forum/user/3650-crashball "View crashball's Profile")** - [![crashball's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3650-crashball "View crashball's Profile") Topic Author - [ Offline](/forum/user/3650-crashball) Less More - Posts: 7 - Thank you received: 0 - - 15 years 2 months ago [\#24665](#24665) by [crashball](/forum/user/3650-crashball "View crashball's Profile") Replied by *[crashball](/forum/user/3650-crashball "View crashball's Profile")* on topic *[Re: Category image overlaps DIV](/forum/3-bug-report/24470-category-image-overlaps-div#24665 "I have a template that has user content modules on left and right of the main content. I am using the cart module on the right, and a menu module on the left, with configuring the category view to display only 3 columns. The DIV element width i assume is set according to the number of columns set to display. Mine is set to 32% since i have 3 columns. With the DIV element being a percent, there is an issue with the category images overlapping if you have a image dimension set too large. Actually after more testing, even removing static sizes from the image size configuration and more columns, it can still spill out. See attached photo. The images size are set as static pixel size while the DIV element are a percentage. So as the content pane size changes, the div will adjust, but the images will not. Not sure if having the option to set the image size as a percent as well could avoid this issue or make it worse in other configs, or if there is another way to control this so the images don't spill out of the DIV element.")* Thanks, This seems to actually work pretty well. This was for my Category listing, so changed the listing_div for category, i commented out Code: <div class="hikashop_category" style="width:<?php echo $width;?>%;"> and changed to Code: <div class="hikashop_category" style="width:160px;"> As long as i have the width dimension set to fit with that wdith (i.e. 140px) it displays without overlapping the DIV element. I can also change the screen size and instead of the DIV size changing and messing up the image, it will keep the same size DIV elements but just display them in more rows. BTW, Love the "Undo Customization" option when editing the views. Makes it easy to undo a mistake. Seems like this would be an issue anytime this view is resized? Perhaps a future release could account for resizing a window/different user resolutions and adjust the DIV dynamically Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC8yNDQ3MC1jYXRlZ29yeS1pbWFnZS1vdmVybGFwcy1kaXY/dG1wbD1tYXJrZG93bg==) 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?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86320 - Thank you received: 14279 - - 15 years 2 months ago [\#24667](#24667) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Category image overlaps DIV](/forum/3-bug-report/24470-category-image-overlaps-div#24667 "I have a template that has user content modules on left and right of the main content. I am using the cart module on the right, and a menu module on the left, with configuring the category view to display only 3 columns. The DIV element width i assume is set according to the number of columns set to display. Mine is set to 32% since i have 3 columns. With the DIV element being a percent, there is an issue with the category images overlapping if you have a image dimension set too large. Actually after more testing, even removing static sizes from the image size configuration and more columns, it can still spill out. See attached photo. The images size are set as static pixel size while the DIV element are a percentage. So as the content pane size changes, the div will adjust, but the images will not. Not sure if having the option to set the image size as a percent as well could avoid this issue or make it worse in other configs, or if there is another way to control this so the images don't spill out of the DIV element.")* Most templates use a fixed width for the main area so such problem do not happen. Also setting the width in hard would prevent you to easily define the number of columns for the listing. Finally, so far no one had a problem with the way we do it. We'll leave it like it is for now, but we keep that in a corner. We never know ![:)](/media/kunena/emoticons/3.png ":)") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMtYnVnLXJlcG9ydC8yNDQ3MC1jYXRlZ29yeS1pbWFnZS1vdmVybGFwcy1kaXY/dG1wbD1tYXJrZG93bg==) 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.127 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)