Why Can't Containers and Sections Be Freely Moved in the App Structure?

Wappler General
1

After several months of being a Wappler Rebel and doing lots of things in code, I am trying to come back to more Wappler Ways on a new page I’m designing, and attempting to do everything I possibily can from the user interface.

One thing I can’t work out is what the GUI wants me to do in organising complex html structures.

Here is what I’m trying to achieve:

repeat "r_attendees"

   container "attendee"
      container "attendee_email"
         -- various rows with columns
      container "attendee_name"
        -- various rows with columns

   container "attendance"
      container "attendance_price"
         -- various rows with columns
      container "attendance_question"
          repeat "r_questions"
              container "question"
                 --  various rows with columns

As I do my design, I want to be able to move these “containers” around freely within the App Structure window.

However I find I cannot do that if they are either a Container element or a Section element.

So what kind of containing item does Wappler want me to use?

I know I could use a single column row, but that just ends up with unneccesary hiearchy, complexity, and an App Structure window that needs to be very very wide to be able to access the details in a real world app design.

Is there a single level containing item I can use that App Structure will allow me to move freely around?

Well actually, I’ve just played around, and it seems like the Article is such an element. But I’m building an app not writing a blog post, so putting all my app’s user interface into containing elements called Article seems rather strange.

Is there a logical reason that Containers and Sections cannot be freely moved around?

If so, what containing element should I be using other than row/column or article?

It was small but very important issues like this which pushed me more and more away from the user interface… please help me come back! :slight_smile:

Best wishes,
Antony.

2

Hi Antony,
I’d suggest taking a look at how bootstrap 4 layout works - the part explaining containers.

3

Thanks @Teodor… but that does not mention anything about not putting containers in containers.

I’m really looking to know why the Wappler team has chosen to place these restrictions and what containing items you wish me to use.

Best wishes,
Antony.

4

Nesting divs with a class container is not a great idea and can lead to many layout issues.

Just use sections and put your containers inside.
Inside containers you can nest rows and columns.

2 Likes
5

Hi there @Teodor…

Thanks for your thoughts… what you describe is pretty well exactly what I do… but then when I want to move the containers and sections around, the App Structure stops me from doing that…

So for example if I have 3 containers:

repeat
   container1
   container2
   container3

Then App Structure doesn’t even allow me to move the containers to be within the repeat or move them around within it.

And what if I have more hierarchy than that?

It’s not a problem for me now… I have done it all within the DOM this morning… but I have to say that these restrictions Wappler places on movement feel more like something that causes frustration than benefit!

Best wishes,
Antony.

6

But what’s that repeat element you are using?
Please post the exact html

Also please explain this “moving around” which is not working for you? Maybe a short video will help.

7

Here is an example I just created in Wappler

<body is="dmx-app" id="">
<div class="container" id="c1"></div>
<div class="container" id="c2"></div>
<div class="container" id="c3"></div>
<div dmx-repeat:repeat1=""></div>
  1. I cannot create a container within the repeat.
  2. I cannot move the containers to be within the repeat.
  3. If I move them in to the repeat with the DOM then I cannot change the position of c2 and c3 for example.

(It looks like the problem I thought was with all of Wappler maybe is just a problem within a repeat… but as my latest design is all within a huge repeat then I could not see this being the issue!)

I hope that helps!

Antony.

8

So the repeat is not applied to an actual App Connect / Bootstrap 4 element, such as <section>?
If you add a section and apply repeat to it - there are no issue moving the containers inside it or rearrange them.

Anyway maybe @George can allow more elements to be nested in a repeat region like in your example.