Equal Height - possible new approach

[burt]

Testers required, in a number of devices.

 

http://template.me.uk/234bs3/index.php?cPath=3_10

Home > DVD Movies > Action

 

The "fire down below" product image is taller than the rest, so (ASSUMING the equal heights module in turned off), it would ruin the display.  

 

However, with this new approach...the display looks good (GRID view, list view is unimportant) in:

 

-Chrome

-IE Edge

-Firefox

 

Please could you test in any devices/browsers you have available?

 

Please note that I have bust the list/grid buttons - so you might be redirected to index if you press them or you might not.  I think it's a cookie problem - (sort of) unrelated to this testing...

 

[Hotclutch]

Using Chrome:

 

It does appear to be a cookie problem. I got redirected to index on first visit, and afterwards the list/grid buttons behaved normally. Cleared the browser cache and cookie settings, then got redirected again on first visit.

 

The layout does work like you say.

[burt]

Yeah, not sure what I've bust with regards to grid_list :(

It works intermittently.

 

Thanks for testing, both.

[♥Tsimi]

I had a similar issue with the latest EDGE version few days back and i opened a topic about it.(Bugs in EDGE version or something like that.) I also got redirected a few times before the grid/list switch worked. Or as Henry said once switched it was not possible to change anymore. I had that issue only with Firefox that time.

 

Back on topic, just tested with my Smartphone Android, Chrome browser, same issue as mentioned above by the other two guys.

[Hotclutch]

Now I can't view the grid display at all, redirects to index all the time.

[AngusD]

Hi,

 

just tested it with Opera 12.17 (my default browser) and Opera 31.0.

 

In Opera 12.17 it looks good, in Opera 31.0 however the display is a bit messed up. "Lethal Weapon" slips in the next line, leaving an empty place on the right side of "Fire Down Below" and "Under Siege 2" is alone in the last line.

 

(Sidenote: Opera 12.17 loads the page in Grid-View and the view buttons work perfectly, no redirection to the index-page)

(Edit: Same with Opera 31.0)

 

AD

[burt]

List/Grid works perfect for me (in Chrome).  But that's beside the point.

 

If you can get to a grid view, please try.  And report back on the display...

 

The only problem I can find is in (approx) "tablet" sized view, where the display does exactly as @@AngusD describes...

I prefer that problem to the equal-heights module problem.

[burt]

Feel free to test this in your own site(s) too...

 

1.  uninstall equal-heights module (admin > modules > header tags)

2.  add this to user.css:

.list-group { display: flex; flex-flow: row wrap; }
.list-group-item { margin-bottom: 10px; }

3.  you might need to remove .css expires from your htaccess and refresh browser multiple times for new css to kick in.

 

4.  feel free to google for "css3 flex" and amend the above code and post back any better solution...

[Hotclutch]

Works locally in Chrome - no issues with list/grid view either.

[Hotclutch]

@@burt

 

The list/grid issues may be due to the async attribute you have on <script src="ext/jquery/jquery-1.11.1.min.js"></script>

 

I have moved this script down to template bottom in my installation, and find no issues with that.

[♥bruyndoncx]

here you go

http://caniuse.com/#feat=flexbox

 

I had issue with flexbox on mobile browser but also older macbook where a frequent customer called that they could not see my top bar.

I have now feature detection and have a fallback code for when flex is not supported.

 

I have these modernizr settings

http://modernizr.com/download/#-fontface-flexbox-shiv-cssclasses-teststyles-testprop-testallprops-domprefixes-load

 

HTH

[tgely]

I have extended the user.css with this

.grid-group-item { display: flex; flex-flow: row wrap; }
.equal-height { height: auto; width: 100%; }

[♥kymation]

Tested (equal heights issue in Grid view only) in the following:

 

Firefox 40.0.3 -- Works fine in most widths. Dragging narrow will sometimes show 2 products in one row and 3 in the rest.  Sometimes the first row has the two products, sometimes it's the second.

 

Chromium 44.0.2403.89 -- Third product in the first row is bumped down to the next row in most widths. Drag it narrow enough and it comes back up, but the next two rows have only 2 products. Weird.

 

Opera 12.16 -- Same as Firefox.

 

IE 11 -- Same as Firefox, except Fire Down Below sometimes has a blue box around the entire product (not just the image).

 

IE 10 -- Fail. Speed appears below Lethal Weapon (as the only item) in the second row. No change at any width.

 

Android 4.4 -- Works with two items per row in landscape mode. Best I can do with this tiny screen (Samsung Galaxy phone).

 

I didn't try older versions of IE; let me know if you want me to.

 

Regards

Jim

[♥kymation]

Addendum: MS Edge -- Same as Firefox, except that the width of the product boxes is inconsistent in a narrow browser window. Works fine on a larger screen.

 

Regards

Jim

[♥John W]

If using expires for css in htaccess it's best to make the user.css a new name like user2.css if you post this to a live site.  The reason is your customers will not see it correctly if they have user.css cached from a previous visit. 

[tgely]

LOL I see the original equalheight problem when after a wide (landscape) view turn on (portrait) 90° the smart screen. You are right its bad.

 

The best would be a dinamic mediacreen javascript or browser (!) managment for this problem where the content auto allign to screen.

[tgely]

I have tried javascript solutions and looks like fine on firefox desktop.

added scripts:

 

landscape/portrait change in ht_div_equal_heights.php:

 

find:

<script>
<!--
$(window).load(function() {
var maxHeight = 0;
$(".equal-height").each(function() {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(".equal-height").height(maxHeight);
});
//-->
</script>

change to:

<script>
function doStuff(){
    landscape = window.orientation? window.orientation=='landscape' : true;

    if(landscape && window.innerWidth<1900 && window.innerWidth > 319){
      // reset
      $(".equal-height").each(function() {
        $(this).css("height", "");
      });
      var maxHeight = 0;
      $(".equal-height").each(function() {
        if ($(this).height() > maxHeight) {
          maxHeight = $(this).height();
        }
      });
      $(".equal-height").height(maxHeight);
    }
}
window.onload=window.onresize=doStuff;
if(window.onorientationchange){
    window.onorientationchange=doStuff;
}
</script>

list/grid change :

find in ht_grid_list_view.php

$oscTemplate->addBlock('<script>$(function() {var cc = $.cookie(\'list_grid\');if (cc == \'list\') {$(\'#products .item\').removeClass(\'grid-group-item\').addClass(\'list-group-item\');}else {$(\'#products .item\').removeClass(\'list-group-item\').addClass(\'grid-group-item\');}$(document).ready(function() {$(\'#list\').click(function(event){event.preventDefault();$(\'#products .item\').addClass(\'list-group-item\').removeClass(\'grid-group-item\');$.cookie(\'list_grid\', \'list\');});$(\'#grid\').click(function(event){event.preventDefault();$(\'#products .item\').removeClass(\'list-group-item\').addClass(\'grid-group-item\');$.cookie(\'list_grid\', \'grid\');});});});</script>' . "\n", $this->group);

change to:

          $script = <<<EOD
<script>$(function() {
  var cc = $.cookie('list_grid');
  if (cc == 'list') {
    $('#products .item').removeClass('grid-group-item').addClass('list-group-item');
  } else {
    $('#products .item').removeClass('list-group-item').addClass('grid-group-item');
  }
  $(document).ready(function() {
    $('#list').click(function(event){
      event.preventDefault();
      $('#products .item').addClass('list-group-item').removeClass('grid-group-item');
      $.cookie('list_grid', 'list');
      equalheight();
    });
    $('#grid').click(function(event){
      event.preventDefault();
      $('#products .item').removeClass('list-group-item').addClass('grid-group-item');
      $.cookie('list_grid', 'grid');
      equalheight();
    });

    function equalheight() {
      // reset
      $(".equal-height").each(function() {
        $(this).css("height", "");
      });

      var maxHeight = 0;
      $(".equal-height").each(function() {
        if ($(this).height() > maxHeight) {
          maxHeight = $(this).height();
        }
      });
      $(".equal-height").height(maxHeight);
    }
  });
});</script>
EOD;

$oscTemplate->addBlock($script . "\n", $this->group);

[♥John W]

@@Gergely,

Works well on my iPad with no problems and good on chrome with different sizes both potrait and landscape. 

 

Thanks for this.

[burt]

@@Gergely - thank you.  I would prefer to get away from using javascript ....

 

With that in mind, have a look at:

 

http://template.me.uk/234bs3/index.php?cPath=3_10

 

and resize the browser smaller and larger etc...

 

Thoughts (open to everyone)...

[douglaswalker]

All works in chrome Version 45.0.2454.99 m

 

Internet Explorer 9  Speed goes onto its own line. and is right justified.

Safari Does the same as Internet explorer.

 

Doug :thumbsup:

[♥Tsimi]

@@burt

 

works on FF, Chrome and Edge. (all latest versions)

[tgely]

Thanks @@burt.

I thought to old BS with javascript.

768x1024 is only one column in firefox. 1024x768 is good.

[burt]

In all devices, anything at 768 or below would be 1 column.

Otherwise:  3 columns.

 

This is done with .css:

 

 

.list-group {display: flex; flex-flow: row wrap;}
@[member=media] only screen and (max-width : 768px) {.list-group {flex-direction: column; }}

 

Quite elegant I think...

[tgely]

grid view is very wierd on 768 wide with one left alligned column.

landscape/portrait turn is perfect on my old samsung smartphone.

[burt]

Solves all the problems without resorting to .js 

 

Is it a "real life" problem on 768 wide to have just 1 column ?