Modules not adjusting for Left/Right

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).
It's late on Friday, so I'm hoping I've missed something simple...

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: Could, better, be done in the Stylesheet as well by adding the left/right padding (i.E.30px) values: or then, do it the the right way, change the 'column-left + #column-right' width-value (i.E.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

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

I had the same issue and it is because of: in for example "latest.tpl"

If the the module is shown in the left or right column it should be To show the module at any place I changed it to: and added the following script to the end of the template
It should be easy to write a xml file for that.

Hi,

You have possibility to add a css Overlay :

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

exemple :
V++

Atch

Having the same issue so its not just you

Having the same...
For now I have used the trick with bootstrap .col class
I added to the css file:
Works fine.

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

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

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

I find the easy way. This bug is module's bug.

Example with Feature module:
Original: Fixed: Another module with same way.

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

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?

You should contact to your hosting provide to turn the magic quotes GPC off and add custom JavaScript again

Thank you very much Vie!

I will do that now.

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!

Thank you very much! Glad to hear that the problem is solved!

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