Category image overlaps DIV

  • Posts: 7
  • Thank you received: 0
12 years 8 months ago #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.

Attachments:

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

  • Posts: 81567
  • Thank you received: 13075
  • MODERATOR
12 years 8 months ago #24481

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 or Create an account to join the conversation.

  • Posts: 7
  • Thank you received: 0
12 years 8 months ago #24645

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 or Create an account to join the conversation.

  • Posts: 81567
  • Thank you received: 13075
  • MODERATOR
12 years 8 months ago #24650

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 or Create an account to join the conversation.

  • Posts: 7
  • Thank you received: 0
12 years 8 months ago #24665

Thanks, This seems to actually work pretty well.

This was for my Category listing, so changed the listing_div for category, i commented out

<div class="hikashop_category" style="width:<?php echo $width;?>%;">

and changed to
<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 or Create an account to join the conversation.

  • Posts: 81567
  • Thank you received: 13075
  • MODERATOR
12 years 8 months ago #24667

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 :)

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

Time to create page: 0.065 seconds
Powered by Kunena Forum