Product Options not displaying correctly.

[jboras]

Hi Guys,

 

Not sure if this has been overlooked or  not tested by the CC5 authors.

 

When looking at a product and the Product Options are more than 5 the display is not the best:

 

eg: http://www.fujitech.asia/index.php?_a=product&product_id=162

 

I believe the fix would be easy but being ignorant of php we do not know what we need to fix.

 

Any suggestions would be appreciated. 

 

Thank you

[ayz1]

In your stylesheet (common.css) try setting the min-height: 220px; to something larger (maybe 300px) until it fits OK. I think this is the issue if not then just change it back.

#product_detail {
	background-repeat: repeat-x;
	float: right;
	min-height: 220px;
	padding: 10px;
	width: 230px;
}

You also have a <table> tag in your page html, not quite sure why that is there.

[jboras]

Thanks for your suggestion.

 

I was trying to set the picture and other items in a table to see if that would fix it.... it didn't.

 

Setting the CSS wil make it fixed and it will look out of place when the options decrease in number.

 

This is a bug that CC people should look at because even if it is worked out here it will be overwritten by any upgrade they do..???

[ayz1]

Not sure this will work but try adding

max-height: 300px;

to the style sheet

#product_detail {
	background-repeat: repeat-x;
	float: right;
	min-height: 220px;
        max-height: 300px;
	padding: 10px;
	width: 230px;
}

[jboras]

Tried that.... no good.

[bsmither]

Unfortunately, there are compromises that were made in designing these skins - some having to do with the fact that, other than the overall height of the Product Description area, most everything has fixed dimensions. Therefore, for example, more than 5 or 6 option selectors in the stock Kurouto skin will overflow its boundaries.

 

If you have any design ideas on how to make this area flexible, without distorting the overall layout, we can help you get that sorted. (I saw a store with 20 selectors.)

 

We recommend that customizations be made to a copy of the source skin. Rename the folder of the skin, and make a couple of edits in the config.xml file. The new skin will not be overwritten.

[ayz1]

Messed about with this and can't seem to get it the way you want it. You could try this:

 

In the content.product.php file add the line

 

<div style="overflow: auto;">

 

at the very top of the code then add

 

</div>

 

 

Above the line

 

<h2>{$LANG.catalogue.product_info}</h2>

[bsmither]

In Kurouto, there is this:

{if isset($PRODUCT) && $PRODUCT}
<h2>{$PRODUCT.name}</h2>
<form action="{$VAL_SELF}" method="post" class="addForm">
  <div>
    <div id="product_detail">

Change the <div> to <div style="overflow:hidden;">. That does it for me. Product Information will follow immediately below, no matter how tall the option selectors become.

[ayz1]

That looks a better solution Brian, somehow I managed to lose that <div> while messing about but tried it and it works for me too. Be nice to see it in the next update maybe.

[jboras]

Fantastic!

 

Works perfectly! 

 

Thank you very much guys.

[havenswift-hosting]

Hi

I have added this as an issue in the CubeCart github issues list so hopefully it will be sorted quickly for a future release

Thanks

Ian