Views misalligned

Is anyone else having a problem when they move from one page to another having views on the page being in the wrong place and shrunken…completely misaligned? If I click quickly from one tab to anther before the page completely loads, views are all in the wrong place.

1 Like

@GaryStark10384 Yes I have noticed this in my apps. I wrote Custom JavaScript to detect when it happens and fix the layout. You can try adding this code to your Custom JavaScript:

// hides childless columns that break layout
$(document).on('knack-view-render.any', function(event,view,data) {
  $('.view-column').filter(function () { 
    return !$(this).children().length 
  }).hide();
});

// re-renders pages with excess columns that break layout
$(document).on('knack-scene-render.any', function(event,scene) {
  // go through each view group
  let viewGroups = $('.view-group');
  // if any view group has more than 2 columns then the layout is broken, re-render the page
  viewGroups.each(function () { 
    let columns = $(this).children('.view-column').length;
    if (columns > 2) {
      let slug = scene.slug;
      let sceneID = scene.scene_id;
      if (sceneID == undefined) {sceneID = ''}
      let newHash = '#' + slug + '/' + sceneID;
      location.hash = newHash;
      console.log('layout was broken, re-rendering page');
    }
  });
});

Hope that works for you in the meantime.

Ian
Knack Pros

1 Like

Yes, this does sometimes happen if you click between pages quickly. I’ve had this on occasion and have to reload the page using the browser refresh. If you are experiencing this on a regular basis it may be another issue which I’d recommend reporting to support@knack.com

Thank you Carl and Kanck Pros! I applied the code and while it does seem to catch the problem on occasion, but it’s definitely still happening. I’m going to reach out to see if perhaps the code can be modified more to how my app is designed. I REALLY hope Knack addresses this issue ASAP. I can’t thank you both enough for getting back to me on this…I’ve voiced this with Knack on several occasions but have not heard anything.

Thanks for this Ian (@KnackPros), works a treat.
Need to use it today so great timing. Hope you are feeling better :sneezing_face:

1 Like

Ian was a PLEASURE to work with as he customized this code to work with my app. THANK YOU IAN!!

2 Likes