Adding Rows etc

Bug Reports
1

Hello,

When I copy an element from one page to another... for example; a NAVBAR... but the page i am copying TO already has elements on the page it then copies the NAVBAR to the BOTTOM of the page... naturally just adding it as the last element in the page... The only problem with that is when I go to drag it UP to the top... it always wants to drop itself INSIDE the COLUMN that is currently at the top instead of putting itself above it like i'm trying to do and I cannot find a way to get it above it.

I even tried adding a ROW above the columns I have there and I can't get them there either.

I can't imagine having to hand edit it with notepad being the solution. any help would be appreciated.;

2

Pretty much anything you try to drop on to a ROW the app will drop in a column and place that dragged element into that column unless you are dragging it to an existing column.

Bootstraps design rules are that only columns are to be direct children of the ROW is why that happens. http://getbootstrap.com/css/#grid "Content should be placed within columns, and only columns may be immediate children of rows."

When you are dragging any element up and down the Overview pave on the left hand side of the app, you should notice a think blue line that pops in and out depending on where your dragging the element.

The thin blue line is the representation of where that drop element will appear in the code. If you drag on top of an actual element it gets highlighted with a thin blue lined box.

For instance drag #item3 and drop on top of #row1

<div id="row1" class="row">
    <div id="item1" class="col-sm-4">content</div>
    <div id="item2" class="col-sm-4">content</div>
</div>

<div id="row2" class="row">
    <div id="item3" class="col-sm-4">content</div>
    <div id="item4" class="col-sm-4">content</div>
</div>

you get

<div id="row1" class="row">
    <div id="item1" class="col-sm-4">content</div>
    <div id="item2" class="col-sm-4">content</div>
    <div id="item3" class="col-sm-4">content</div>
</div>

<div id="row2" class="row">
    <div id="item4" class="col-sm-4">content</div>
</div>

But if you drag #item3 and drop where the thin blue line appears between #item1 & #item2

<div id="row1" class="row">
    <div id="item1" class="col-sm-4">content</div>
    <div id="item2" class="col-sm-4">content</div>
</div>

<div id="row2" class="row">
    <div id="item3" class="col-sm-4">content</div>
    <div id="item4" class="col-sm-4">content</div>
</div>

You get

<div id="row1" class="row">
    <div id="item1" class="col-sm-4">content</div>
    <div id="item3" class="col-sm-4">content</div>
    <div id="item2" class="col-sm-4">content</div>
</div>

<div id="row2" class="row">
    <div id="item4" class="col-sm-4">content</div>
</div>

In the same vane if you take the menubar and drop it on to #row1

<div id="row1" class="row">
    <div id="item1" class="col-sm-4">content</div>
    <div id="item2" class="col-sm-4">content</div>
</div>

<div id="menubar" class="row">menus</div>

you get

<div id="row1" class="row">
    <div id="item1" class="col-sm-4">content</div>
    <div id="item2" class="col-sm-4">content</div>
    <div id="item3" class="col-sm-4">
        <div id="menubar" class="row">menus</div>
    </div>
</div>

So you have to keep an eye on where the thin blue line is and if you have something like this below and move the menubar above #row2, you're still directly in #row1

<div id="row1" class="row">
    <div id="item1" class="col-sm-4">content</div>
    <div id="item2" class="col-sm-4">content</div>
    <div id="row2" class="row">
        <div id="item3" class="col-sm-4">content</div>
        <div id="item4" class="col-sm-4">content</div>
    </div>
</div>

you get

<div id="row1" class="row">
    <div id="item1" class="col-sm-4">content</div>
    <div id="item2" class="col-sm-4">content</div>
    <div id="item5" class="col-sm-4">
        <div id="menubar" class="row">menus</div>
    </div>
    <div id="row2" class="row">
        <div id="item3" class="col-sm-4">content</div>
        <div id="item4" class="col-sm-4">content</div>
    </div>
</div>

Hope this makes sense :)

Saj

P.S. sorry last example was an incorrect row/column construction but it still show the point if you had something like it.