Skuid Mobile Conditional Rendering of Divisions

  • 1
  • Problem
  • Updated 3 years ago
  • Acknowledged
I am using conditional rendering in the mobile app to dynamically build out a form based on the picklist value selected.  I have the conditional rendering added to the "Division" so all fields withing the division appear together.  When I use the picklist to select the value the conditional rendering works correctly BUT it squishes the division and all the fields into 10% of the screen.  The same behavior can be seen if you Preview the page in a web browser.  In a web browser, however, you can resize the browser and the division will snap back to take up the whole screen.  On the phone though there is no way to resize the screen.

I did just discover if select the value in the picklist and it renders incorrectly I can switch it to a non-rendering value and then change it back and then the whole division renders in the full screen.  But I can't tell my end users that.  Please let me know if there is a known fix. As always, I appreciate the help and the awesome product.

Thanks!
Rich
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
Here is a screen shot of the division being squished into the left side.  



If I unselect the field that causes the conditional render and then select it again the division renders correctly.  (See Below)

Any ideas on getting it to render correctly the first time?
(Edited)
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
This is probably the same issue.  https://community.skuidify.com/skuid/topics/mobile-conditional-rendering-container-widths  Let me play with adding another action and see what I can do to trick it into showing correctly.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
RIch.  I've reproduced your issue and will report it.  However,  if you put a wrapper component in between the division and the fields, and then do your conditional rendering on that wrapper - it seems to work correctly. 
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
That did the trick, thank you Rob!