I have a UI as below design. There are some component on different panel. Panel B and C will either display one and I use rule to control the panel or panel's component to hide or disable.
When I create the form, Panel C is hided. But I don't know why Panel E will overlap with Panel B and D. I expect Panel E will be rendered below Panel B and D.
The most strange thing happen. When I submitted the form and the status change. Panel B will hide and Panel C will appear. It show what I expected.
The Panel C contains 3 more panels and set rule to control the hide behavior. Will this affect the panel E at stage 1? I have checked the html for panel C is display: none; But Panel E div style are different at Stage 1 and Stage 2.
I would like to know how to solve this problem?
Solved! Go to Solution.
I have solve the overlap issue but another issue is occurred. I would like to know what's that best way to create the above layout?
I have changed the layout as below: It display fine in Stage 1.
There is a large empty gap before panel E in Stage 2.
Since Hide rule will include CSS display:none on the panel, the controls surrounding it requires enough spacing. So proper spacing of panel should resolve this issue.
Try these steps:
in the original layout where panels B and C overlaps each other, I would try to put panels B,C and D into one another panel.
in the second layout where panel B is below C one, I would sized panel D only as big as needed (so likely as big as panel C). you will have some empty space in designer, but form should be correctly rendered at runtime.
I am having a similar problem. I'm new to this and struggling, but I've been able to figure out how to create and hide the panels and have them show with a choice control. However, I have not been able to figure out how to fix the overlap. Everything I've come across says make sure that panels don't overlap in the form. They don't overlap. Says also that it should automatically pull to the top of the screen automatically depending on the choices selected. I don't write code, so I don't even know what it should say.
I have 2 problems:
1. They overlap even though in the form they don't. And it is from 2 different forms/panels that overlap. Anyone know how I can fix this?
Overlap in preview
Don't overlap in forms view
2. I want the comments to appear in-between my submitter information and the card that is selected, so that they make the selections Green, Yellow, Red, N/A first then add comments after. How can I fix the blank space in-between and have it move with the form panels?