[solved] Cross selling display problem

[musicmaster]

I have a problem with the cross selling module.

 

When I set the number higher than the default 5 (in my shop adapted to 6 but that doesn't cause the problem) I should be able to scroll horizontally. That works mostly. However, the module always reserves a second row and when you scroll back to the first position it displays there one image.

 

See attached image or here: http://www.topsnoep.nl/schepsnoep/331-grijs-witte-muizen.html

 

How can I repair this?

Edited December 28, 2013 by musicmaster (see edit history)

[Dh42]

It looks like the js file for the module or the tpl file might have a hard coded width in it that is making it wrap. Look for a width on the li elements, because what ever they are adding up to is not enough. 

[NemoPS]

Dh is correct, the ul element is missing 10px Look for the tpl file, and add 10px to the function that makes up the <ul> tag width

[vekia]

you can also fix this with css styles 

#crossselling li {
float: left;
margin: 0 8px;
padding: 0 5px;
}

remove margin: 0 8px;

 

then it will looks like:

 

 

 

 

 

btw. you changed css for this before?

[musicmaster]

Thank you all three for your advice. 

 

I changed the <ul> line to the following and that works. Nemo1 advised to add 10px and that worked on my localhost test environment. But for my server I needed somehow more so I took 12:

<ul class="clearfix" {if count($orderProducts) > 5}style="width: {math equation="12 + (width * nbImages)" width=107 nbImages=$orderProducts|@count}px"{/if}>

Removing the margin in the css, as Vekia suggested, had no effect.

[musicmaster]

I have to correct my previous post. The css later did work. Probably some caching effect.

 

I found I needed to correct the tpl file for the changed margin. The new version became:

<ul class="clearfix" {if count($orderProducts) > 8}style="width: {math equation="width * nbImages" width=93 nbImages=$orderProducts|@count}px"{/if}>

I also found that both in the tpl file and the js file I needed to change the "5" of the script into "8" as otherwise you will see a lot of times when you press the arrows no effect.