Question 160343 in CSS Question posted in
Some basic documentation can be found here.

How can I make the last child element of the details element be placed above the penultimate element?

How can I use CSS to position a <div> element with the class js-form-type-managed-file above a <table> element?

I tried using flexbox and order but it didn’t work.

details {
  display: flex;
  flex-direction: column;
  width: 1500px;
  height: 1000px;
}

table {
  width: 1200px;
  height: 100px;
  background: red;
  order: 2;
}

.js-form-type-managed-file {
  width: 1200px;
  height: 100px;
  background: yellow;
  order: 1;
}
<details>
  <summary></summary>
  <div></div>
  <div></div>
  <table class="responsive"></table>
  <div class="js-form-type-managed-file"></div>
</details>
Tags:

3

Answers


  1. 0

    The details component does not allow you to do this.

    You should wrap the 2 divs like this:

      <details>
    <summary></summary>
    <div></div> 
    <div></div>
    <div class="flexParent">
      <table class="responsive"></table>
      <div class="js-form-type-managed-file"></div>
    </div>
  </details>

    Then use this CSS:

     .flexParent {
   display: flex;
   flex-direction: column;
   width: 1500px;
   height: 1000px;
 }
 
 table {
   width: 1200px;
   height: 100px;
   background: red;
   order: 2;
 }
 
 .js-form-type-managed-file {
   width: 1200px;
   height: 100px;
   background: yellow;
   order: 1;
 }
    Login or Signup to reply.
  2. 0

    Your CSS code appears to be right, but the details element—not just the div inside it—needs to have the display: flex property added. This will let you to modify the order of the child elements using the order attribute.

    details {
  display: flex;
  flex-direction: column;
  width: 1500px;
  height: 1000px;
}

table {
  width: 1200px;
  height: 100px;
  background: red;
  order: 2;
}

.js-form-type-managed-file {
  width: 1200px;
  height: 100px;
  background: yellow;
  order: -1; /* move this element to the top */

}
    <details style="display: flex;">
  <summary></summary>
  <div></div>
  <div></div>
  <table class="responsive"></table>
  <div class="js-form-type-managed-file"></div>
</details>
    Login or Signup to reply.
  3. 0

    display: flex has no effect on the details element. So, the order property is useless, as flex properties are not in effect.

    Either use JavaScript (if you can’t change the mark-up) or wrap the items inside details in a container, then use flex.

    details {
  width: 1500px;
  height: 1000px;
}

[nested] {
  display: flex;
  flex-direction: column;
}

table {
  width: 1200px;
  height: 100px;
  background: red;
  order: 1;
}

.js-form-type-managed-file {
  width: 1200px;
  height: 100px;
  background: yellow;
}
    <details>
  <summary></summary>
  <div nested>
    <div></div>
    <div></div>
    <table class="responsive"></table>
    <div class="js-form-type-managed-file"></div>
  </div>
</details>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search