Mobile conditional rendering container widths

  • 2
  • Problem
  • Updated 1 year ago
  • In Progress
While using a conditional render in Skuid mobile on a Wrapper once rendered the contained Grids don't apportion to the correct size and are squashed. 

Once the Wrapper is rendered a resize of the page will cause the inner components to size correctly once again, is this a bug?.

Before I dive into a bit of JS or come up with a resizing hack is this a known problem? is there a resize function that can be called? or a different way to layout my components perhaps.

Thanks


 
Photo of Sean

Sean

  • 260 Points 250 badge 2x thumb

Posted 4 years ago

  • 2
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
If I understand correctly - when the wrapper is hidden the grids around the wrapper are wonky. 
When the wrapper is rendered they look correct. 

Can you post a screenshot of the two states? 
Rob,
I have exactly the same situation you described. When the wrapper is hidden the width of the sm-grid-division is not rendered correctly. Is there a solution for this? Thanks.

Photo of Sean

Sean

  • 260 Points 250 badge 2x thumb
Hi Rob sorry if I was unclear, I have a wrapper which has a render condition, when it gets rendered depending on a picklist value the grids inside the wrapper do not get the correct width, I had a quick look with my inspector and it appears the style="width" on Class = "sm-grid-division" is not being set after the render, a slight screen resize will cause them to display correctly once again.

So after render :
<div id="621" class="sm-grid-division" data-rendered="true">

When it should be
<div id="621" class="sm-grid-division" data-rendered="true" style="width: 33.3333333333333%;">

It's obvious that the sizing is not being set correctly after the render

Before I go hacking I thought this might be a know issues or maybe there's an approach to stop this?

Thanks
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
We'll look into the problem more deeply.  We did only just add conditional rendering to the wrapper component in the Superbank release.  

However have you tried to put your conditional rendering on the elements inside the wrapper instead? 
Photo of Sean

Sean

  • 260 Points 250 badge 2x thumb
Yes Rob tried on individual components, a quick solution which worked for me was to cause a model Save once the picklist was changed this causes the rendered components to display with the correct widths, not ideal but works and luckily I needed the model saved to use the File upload component :)

Thanks!
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
^^^ bump ^^^
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb