Page 1 of 1

Modules not adjusting for Left/Right

Posted: Sat Oct 04, 2014 6:06 am
by webvet
Likely to be something very obvious - but I can't seem to find it:

Opencart v2.0.0.0. Fresh Install

Modules (Latest, Bestsellers, Specials etc) are working normally in the Content Top and Content Bottom locations, but displaying in narrow strips when positioned Column Left or Column Right (see image).
Module-Error.png

Module-Error.png (28.09 KiB) Viewed 7922 times

It's late on Friday, so I'm hoping I've missed something simple...

Re: Modules not adjusting for Left/Right

Posted: Mon Oct 06, 2014 2:47 am
by IP_CAM
I guess, the default image width possibly also defines the width of the Column, because, no predefined CSS Setting, or then, just a Percentage Setting only, exists. Could be the case as well, like in responsive Themes. So, there are multiple options to keep a fixed WIDTH, regardless of anything..., and the 'oldest' one's come first:

Therefore, wither, enlarge the Pics in SIze, or then, try to add a left/right image horizontal space (hspace) value,
example latest.tpl:

Code: Select all

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" hspace="12" alt="<?php echo $product['name']; ?>" /></a></div>
Could, better, be done in the Stylesheet as well by adding the left/right padding (i.E.30px) values:

Code: Select all

.box-product .image img {
	padding-right: 30px;
	padding-left: 30px;
	border: 0px solid #E7E7E7;
}
or then, do it the the right way, change the 'column-left + #column-right' width-value (i.E.180px) :

Code: Select all

#column-left + #column-right + #content .box-product > div {
text-align:center;
width: 180px;
}
try to find the best matching value. But this COULD have some consequences, if the 'column-left/right' CSS-Presets and Parameters are used also for other purposes, so check on it after doing work. One of those options should work.

Good Luck
Ernie
openshop.li

Re: Modules not adjusting for Left/Right

Posted: Wed Oct 08, 2014 5:37 pm
by webvet
Thanks for the reply, Ernie

I was more worried that Bootstrap wasn't functioning correctly - are you seeing this as a problem on a v2.0.0.0 site? I have waited to see if any others have reported this as a v2 bug, but haven't seen any other reports.

If no-one else is seeing this, why am I?

I have a fresh install which is otherwise behaving itself as expected.

Not really expecting you to find my answer, just wondering if anyone else has found this...

BTW - I am running this on a WAMP server, just in case that might make a difference

Re: Modules not adjusting for Left/Right

Posted: Wed Oct 29, 2014 5:05 am
by 6-web
I had the same issue and it is because of:

Code: Select all

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
in for example "latest.tpl"

If the the module is shown in the left or right column it should be

Code: Select all

<div class=col-lg-12 col-md-12 col-sm-12 col-xs-12">
To show the module at any place I changed it to:

Code: Select all

<div class="col">
and added the following script to the end of the template

Code: Select all

<script type="text/javascript">
<!--
$(function() {
    
    if($(".col").parents("#column-left").length == 1) {
        $('div.col').removeClass('col').addClass('col-lg-12 col-md-12 col-sm-12 col-xs-12');
    }
    else if($(".col").parents("#column-right").length == 1) {
        $('div.col').removeClass('col').addClass('col-lg-12 col-md-12 col-sm-12 col-xs-12');
    }
    else if($('#content').hasClass('col-sm-9')) {    
        	  	$('div.col').removeClass('col').addClass('col-lg-4 col-md-4 col-sm-6 col-xs-12');
     	     }
    else if($('#content').hasClass('col-sm-12')) {    
        	  	$('div.col').removeClass('col').addClass('col-lg-3 col-md-3 col-sm-6 col-xs-12');
     	     }
    else {    
        	  	$('div.col').removeClass('col').addClass('col-lg-12 col-md-12 col-sm-12 col-xs-12');
     	     }
});
-->
</script>
It should be easy to write a xml file for that.

Re: Modules not adjusting for Left/Right

Posted: Wed Oct 29, 2014 5:06 pm
by Atch
Hi,

You have possibility to add a css Overlay :

Code: Select all

#column-left .product-layout > [class*="col"] , #column-right .product-layout > [class*="col"]  {
    width: 100%;
}

and after add a new css lines with #column-left and #column-right to add style to the two columns

exemple :

Code: Select all

#column-left .product-thumb .image, #column-right .product-thumb .image {
    float: left;
    padding-top: 10px;
    text-align: left;
    width: 30%;
}
V++

Atch

Re: Modules not adjusting for Left/Right

Posted: Thu Nov 06, 2014 1:13 pm
by Iamdbat
Having the same issue so its not just you

Re: Modules not adjusting for Left/Right

Posted: Fri Nov 07, 2014 7:56 am
by matssuda
Having the same...
For now I have used the trick with bootstrap .col class
I added to the css file:

Code: Select all

@media (min-width: 992px) {
#column-left .product-layout .col-md-3,
#column-right .product-layout .col-md-3
 {
    width: 100%!important;
  }
}
@media (min-width: 1200px) {
#column-left .product-layout .col-lg-3,
#column-right .product-layout .col-lg-3 {
    width: 100%!important;
  }
}

@media (min-width: 768px) {
#column-left .product-layout .col-sm-6,
#column-right .product-layout .col-sm-6
 {
    width: 100%!important;
  }
}

Works fine.

Re: Modules not adjusting for Left/Right

Posted: Thu Dec 11, 2014 7:54 pm
by Dabnis
Why was this not picked up in beta testing. I was hoping that the developers would have learned their lesson from the OC version 1.x.x series. This is a fundamental / core design issue.
I have just downloaded the latest 2.0.1.1 and the issue is still present. Yes there are fixes, having build many bootstrap sites over the years I could easily fix the issue, but that is not the point. The ' out of the box ' OC install should work correctly or be marked as a beta version.
Many people will have deployed many different fixes for this issue and when the development team finally gets around to fixing this issue nobody knows if what they have done will be compatible with the official fix so potentially more work for those who's fix causes other issues.
I know I'm going on a bit, but I've seen this for years with OC and was hoping for a better version 2.
OC is still a good option for e-commerce solutions, but most of its competitors only started because of issues such as I write about here.

Come on dev team !! this is a basic fix, but we need the ' out of the box ' install to have an official fix.

DANIEL: I've just had a look at the code base for OC 2.0 and to be honest it's as messy and inefficient as the OC 1.x.x
series. You may not remember, but some years ago I had a conversation with you regarding the poor database code, you admitted then that when you started OC you did not know a lot about databases & SQL and much of the model code was poor. Well after all these years OC 2.x.x is exactly the same if not worse!

I'm sorry but you have just lost another user to your competitors.

Jonathan

Re: Modules not adjusting for Left/Right

Posted: Thu Dec 11, 2014 11:51 pm
by Iamdbat
Dabnis wrote:Why was this not picked up in beta testing. I was hoping that the developers would have learned their lesson from the OC version 1.x.x series. This is a fundamental / core design issue.
I have just downloaded the latest 2.0.1.1 and the issue is still present. Yes there are fixes, having build many bootstrap sites over the years I could easily fix the issue, but that is not the point. The ' out of the box ' OC install should work correctly or be marked as a beta version.
Many people will have deployed many different fixes for this issue and when the development team finally gets around to fixing this issue nobody knows if what they have done will be compatible with the official fix so potentially more work for those who's fix causes other issues.
I know I'm going on a bit, but I've seen this for years with OC and was hoping for a better version 2.
OC is still a good option for e-commerce solutions, but most of its competitors only started because of issues such as I write about here.

Come on dev team !! this is a basic fix, but we need the ' out of the box ' install to have an official fix.

DANIEL: I've just had a look at the code base for OC 2.0 and to be honest it's as messy and inefficient as the OC 1.x.x
series. You may not remember, but some years ago I had a conversation with you regarding the poor database code, you admitted then that when you started OC you did not know a lot about databases & SQL and much of the model code was poor. Well after all these years OC 2.x.x is exactly the same if not worse!

I'm sorry but you have just lost another user to your competitors.

Jonathan
So if you have a fix Jonathan ... howza 'bout sharing with the class. I agree with most of what you say btw but I have already spent considerable time on OC2 entering products etc ..... I just can't start again

Re: Modules not adjusting for Left/Right

Posted: Fri Dec 12, 2014 3:41 pm
by leedat
Dear all,

I get this error with brand pages, search pages...

And I tried to fix it but not work. Would you please help me fix it.

Thanks and best regards

Re: Modules not adjusting for Left/Right

Posted: Tue Dec 16, 2014 5:55 pm
by leedat
I find the easy way. This bug is module's bug.

Example with Feature module:
Original:

Code: Select all

<h3><?php echo $heading_title; ?></h3>
<div class="row product-layout" >
  <?php foreach ($products as $product) { ?>
Fixed:

Code: Select all

<h3><?php echo $heading_title; ?></h3>
<div class="row" >
  <?php foreach ($products as $product) { ?>
Another module with same way.

Re: Modules not adjusting for Left/Right

Posted: Sun Jan 18, 2015 10:07 pm
by dbassa
Hi,

You can fix it just adding this css to stylesheet.css

#column-right .row.product-layout > div, #column-left .row.product-layout > div
{
width: 100% !important;
}

Regards,
Daniel

Re: Modules not adjusting for Left/Right

Posted: Mon Aug 03, 2015 4:26 pm
by daisybeedesign
Hello

I have a fresh install of opencart 2..0.31 which I am using to learn how to style/build with - only mod installed is the custom javascript mod (http://www.opencart.com/index.php?route ... n_id=20566) so I could try a suggested JS fix for this.

I am having the same issues with the featured/latest modules sitting as a thin strip in a left or right column.

So far I have tried adding the via custom javascript module and adding in

"<script>
$(document).ready(function () {
$(\\\'#column-left .col-lg-3.col-md-3.col-sm-6\\\').removeClass(\\\'col-lg-3 col-md-3 col-sm-6\\\').addClass(\\\'product-list\\\');
});
</script>"

I have also tried the css edits

#column-right .row.product-layout > div, #column-left .row.product-layout > div
{
width: 100% !important;
}
@media (min-width: 992px) {
#column-left .product-layout .col-md-3,
#column-right .product-layout .col-md-3
{
width: 100%!important;
}
}
@media (min-width: 1200px) {
#column-left .product-layout .col-lg-3,
#column-right .product-layout .col-lg-3 {
width: 100%!important;
}
}

@media (min-width: 768px) {
#column-left .product-layout .col-sm-6,
#column-right .product-layout .col-sm-6
{
width: 100%!important;
}
}
But I am still simply getting a strip displaying for these.

Any ideas/suggestions/something I am missing?

Re: Modules not adjusting for Left/Right

Posted: Mon Aug 03, 2015 8:43 pm
by viethemes
You should contact to your hosting provide to turn the magic quotes GPC off and add custom JavaScript again :)

Re: Modules not adjusting for Left/Right

Posted: Mon Aug 03, 2015 8:47 pm
by daisybeedesign
Thank you very much Vie!

I will do that now.

Re: Modules not adjusting for Left/Right

Posted: Tue Aug 04, 2015 3:36 am
by daisybeedesign
Massive massive thanks Vie!!

I tweaked the javascript to add in product-grid rather than list so I added in

"<script>
$(document).ready(function () {
$('#column-left .col-lg-3.col-md-3.col-sm-6').removeClass('col-lg-3 col-md-3 col-sm-6').addClass('product-grid');
});
</script>"

Displaying great now.

Thank you - I'll pop another wee donation through now!

Re: Modules not adjusting for Left/Right

Posted: Tue Aug 04, 2015 8:25 pm
by viethemes
Thank you very much! :) Glad to hear that the problem is solved!

Re: Modules not adjusting for Left/Right

Posted: Wed Feb 08, 2017 4:14 pm
by asifshaikh
6-web wrote:I had the same issue and it is because of:

Code: Select all

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
in for example "latest.tpl"

If the the module is shown in the left or right column it should be

Code: Select all

<div class=col-lg-12 col-md-12 col-sm-12 col-xs-12">
To show the module at any place I changed it to:

Code: Select all

<div class="col">
and added the following script to the end of the template

Code: Select all

<script type="text/javascript">
<!--
$(function() {
    
    if($(".col").parents("#column-left").length == 1) {
        $('div.col').removeClass('col').addClass('col-lg-12 col-md-12 col-sm-12 col-xs-12');
    }
    else if($(".col").parents("#column-right").length == 1) {
        $('div.col').removeClass('col').addClass('col-lg-12 col-md-12 col-sm-12 col-xs-12');
    }
    else if($('#content').hasClass('col-sm-9')) {    
        	  	$('div.col').removeClass('col').addClass('col-lg-4 col-md-4 col-sm-6 col-xs-12');
     	     }
    else if($('#content').hasClass('col-sm-12')) {    
        	  	$('div.col').removeClass('col').addClass('col-lg-3 col-md-3 col-sm-6 col-xs-12');
     	     }
    else {    
        	  	$('div.col').removeClass('col').addClass('col-lg-12 col-md-12 col-sm-12 col-xs-12');
     	     }
});
-->
</script>
It should be easy to write a xml file for that.
Module in sidebar working as expected with this code but in other position, each product is stretched to full width displaying 1 product in each row.

Pl. assist.

Thanks