Issue
I have two buttons inside a div and another button outside the div. I am trying to bring one of the button inside the div to outside below the button sitting outside of the div. See sample code below.
<div class="container">
<button id="Reject">Reject</button>
<button id="Accept">Accept</button>
</div>
<button id="Manage">Settings</button>
In the above example I need to bring the Reject button out of the div and add it below the settings button using CSS. I don't have control over HTML.
I tried positioning and :after hacks but nothing working
Solution
If there is a common parent, you could use display: contents;
display: contents
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren't rendered purely by CSS box concepts such as replaced elements.
display: contents - MDN
Check the support on caniuse.com
.container {
display: contents;
}
.parent {
display: flex;
flex-direction: column;
align-items: start;
}
#Reject {
order: 3;
}
<div class="parent">
<div class="container">
<button id="Reject">Reject (first in dom, last on screen)</button>
<button id="Accept">Accept</button>
</div>
<button id="Manage">Settings</button>
</div>
Answered By - Amaury Hanser
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.