Post by webvet » Sat Oct 04, 2014 6:06 am

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 5620 times

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

Genuine, Honest Opencart Support @ http://webvetservices.com


User avatar
Active Member

Posts

Joined
Thu May 14, 2009 2:04 am
Location - Shropshire, UK

Post by IP_CAM » Mon Oct 06, 2014 2:47 am

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

I am no longer active around here, to reach me, contact: jti@jacob.ch
My latest Freeware Opencart LIGHT Testsite, available on demand: http://www.ebikes.li/shop/
My 888 FREE OC Extension-Repositories - from OC v.1.5.x up,
on the largest OC Extension Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by webvet » Wed Oct 08, 2014 5:37 pm

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

Genuine, Honest Opencart Support @ http://webvetservices.com


User avatar
Active Member

Posts

Joined
Thu May 14, 2009 2:04 am
Location - Shropshire, UK

Post by 6-web » Wed Oct 29, 2014 5:05 am

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.

Newbie

Posts

Joined
Sun Oct 30, 2011 3:22 pm

Post by Atch » Wed Oct 29, 2014 5:06 pm

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

Newbie

Posts

Joined
Mon Feb 14, 2011 11:50 pm

Post by Iamdbat » Thu Nov 06, 2014 1:13 pm

Having the same issue so its not just you

Active Member

Posts

Joined
Sat Jan 28, 2012 7:32 am

Post by matssuda » Fri Nov 07, 2014 7:56 am

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.

Newbie

Posts

Joined
Fri Jul 26, 2013 7:52 am

Post by Dabnis » Thu Dec 11, 2014 7:54 pm

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

Newbie

Posts

Joined
Tue Jun 01, 2010 2:05 am

Post by Iamdbat » Thu Dec 11, 2014 11:51 pm

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

Active Member

Posts

Joined
Sat Jan 28, 2012 7:32 am

Post by leedat » Fri Dec 12, 2014 3:41 pm

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

Newbie

Posts

Joined
Thu Nov 27, 2014 11:56 am

Post by leedat » Tue Dec 16, 2014 5:55 pm

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.

Newbie

Posts

Joined
Thu Nov 27, 2014 11:56 am

Post by dbassa » Sun Jan 18, 2015 10:07 pm

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

User avatar
Active Member

Posts

Joined
Tue May 19, 2009 12:11 am
Location - Spain

Post by daisybeedesign » Mon Aug 03, 2015 4:26 pm

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?

New member

Posts

Joined
Wed Jan 18, 2012 12:44 am

Post by viethemes » Mon Aug 03, 2015 8:43 pm

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

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by daisybeedesign » Mon Aug 03, 2015 8:47 pm

Thank you very much Vie!

I will do that now.

New member

Posts

Joined
Wed Jan 18, 2012 12:44 am

Post by daisybeedesign » Tue Aug 04, 2015 3:36 am

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!

New member

Posts

Joined
Wed Jan 18, 2012 12:44 am

Post by viethemes » Tue Aug 04, 2015 8:25 pm

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

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by asifshaikh » Wed Feb 08, 2017 4:14 pm

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

Newbie

Posts

Joined
Sat Sep 08, 2012 9:36 pm
Who is online

Users browsing this forum: No registered users and 5 guests