1

Is it possible to change DOM element order with CSS? I have an iframe where I'd like to change the toolbar from above to below the iframe's main content.

So from this: 

<iframe>
<html>
  <body>
    <div id='toolbar'></div>
    <div id='main_content'></div>
    <div id='other_stuff'></div>
  </body>
</html>
</iframe>

To this:

<iframe>
<html>
  <body>
    <div id='main_content'></div>
    <div id='toolbar'></div>
    <div id='other_stuff'></div>
  </body>
</html>
</iframe>

If this is not possible using CSS, can someone advise on how to do this in Javascript? Manipulating iframe contents always confuse the *^%$ out of me. As a practical application, i'm actually referring to the iframe that is generated with Crocodoc (https://crocodoc.com/docs/walkthrough/skinning/) so my intent is to make this question and answer valuable to those using this service too.

tim peterson
  • 23,653
  • 59
  • 177
  • 299

2 Answers2

6

I'm quite late to the party but I just want to let you guys know you actually can change the DOM order with CSS alone.

Although to do this we have to use the CSS3 flexbox syntax. So basically IE10+, in my case often not a problem as I use it to manipulate sites for mobile.

So how do we do it? The parent needs to become a flexbox element. Eg:

(only using the webkit vendor prefix here. The css is dazzling as it is without it)

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

Then, swap divs around by indicating their order with:

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

Good luck!

jansmolders86
  • 5,449
  • 8
  • 37
  • 51
1

You can't change DOM order with css. You could however apply a position: absolute; css style and position the element by setting top, bottom, left, right styles as needed.

Perhaps better in your case would be position: fixed; bottom: 0; to position your toolbar at the bottom of the browser window.

Damien Overeem
  • 4,487
  • 4
  • 36
  • 55
  • thanks, yeah i'd thought of that though that is a solution which tends not to be sustainable – tim peterson Dec 23 '12 at 13:01
  • oh fixed bottom seems better... – tim peterson Dec 23 '12 at 13:03
  • Perhaps position: fixed works better in your case. Manipulating the dom runtime with javascript would give stange effects too. Since you would have to wait for domReady. This would mean the toolbar would show up at the top and then disapear and move to the bottom. This would give a bit of a strange effect possibly. – Damien Overeem Dec 23 '12 at 13:03
  • agree Javascript could make it ugly too...ideally I would render the DOM as I wanted but the hang-up there is an unrelated issue of not being able to use [Crocodoc's docviewer.js](https://crocodoc.com/docs/js-intro/) in an AJAX request – tim peterson Dec 23 '12 at 13:05
  • Well i can't help you with crocodoc, dont know the thing :) – Damien Overeem Dec 23 '12 at 13:32