how to make content push down after being displayed

OD Ntuk shared this question 7 years ago
Answered

How can I make content push down after a hidden element is dynamically displayed? Right now the displayed content overlaps the content below it.


2422889b11c33d0a2de8338655b19487


Comments (13)

photo
1

I think this video can be of some help here http://www.justinmind.com/tutorials/a...

photo
1

I need to do the same thing and this tutorial doesn't answer the question or is too complicated.


I'm building a registration form that has fields which show and hide based on different action buttons the user clicks on. I want more fields to appear while pushing down the existing fields. I don't understand the above tutorial at all. I don't want to have to use data masters. Is there a simple way of doing this without using move actions?

photo
2

Let's see if this other instructions helps you better:


Drag a dynamic panel and go to the Properties tab. Expand the 'Layout' group of properties and select the layout type 'vertical'. That property forces the elements inside the dynamic panel to be placed always one below the other without any gaps in between.


Now right click on the dynamic panel in the canvas and select 'Edit content'. That way we can insert elements inside using drag and drop. Drag a new dynamic panel inside the dynamic panel we have in the canvas. In this new dynamic panel create two panels. Double click on the new dynamic panel to edit its contents. Drag two labels inside the first panel of the new dynamic panel, one for the title of the 'news' and another for the link. Change the height of that panel to the minimum height possible so the texts are still visible. Select the other panel in the same dynamic panel and make it taller that the first one. There drag two labels and a rich text.


Select the label that will be the link in the second panel and go to the Events tab. Push the 'add event' button and select 'set active panel'. Then select the first panel of the same dynamic panel. Click ok. Go to the first panel and select the link there. Go to the events tab and push the 'add event' button. Select 'set active panel' and select the other panel of the same dynamic panel. Click ok.


So far you have a big dynamic panel with a vertical layout and, inside, another dynamic panel with two panels, one taller than the other. Also, in each panel you have a label that lets the user go from one panel to the other. Now you just need to select the dynamic panel with the two panels (use the Outline tab), select Edit -> Copy from the menu. Then select the big dynamic panel and select Edit -> Paste. Simulate. You'll see how the elements are push down or up when a panel with a different height is shown.


The layout controls the position of the elements when some of them change their height or even if they are hidden or shown. You can also expand and collapse horizontally if you change the layout of the panel.

photo
1

Hi Victor.


Thanks for this detailed response. I got it working!


One question though, is there a way to select vertical layout without having to have everything justify to left, center or right? I have a bunch of fields positioned a certain way intentionally on the form but as soon as I want to start using vertically laid out dynamic panels I'm forced into justifying the content left, center or right only. Is there a way to do the same thing without the justification imposed?

photo
1

Nevermind...I figured it out.


I'm really liking Prototyper!

photo
1

Well done!

photo
1

Justin, what is the solution to justification issue?

photo
1

Victor: This video is missing.

photo
1

This is the correct link: http://www.justinmind.com/usernote/te...

photo
1

Thank you, Victor. This link works. I did see this tutorial. I am still trying to work with it! I appreciate your getting back to me.

photo
1

You're welcome ;)

photo
1

i don't get it using your tutorial victor :-( its not working out

photo
1

Maybe this tutorial might help http://www.justinmind.com/usernote/te...