How to move one HTML element below another with CSS

Question

I am working with a 3rd party support provider and am trying to work around some limitations around what can be customized. I would like to add an HTML element ( a ) below a label, but only have access to css and footer html. My current idea is to add a hidden anchor in the footer and then try to reposition it via the css. I guess this MIGHT be possible with flexboxes, but my css foo is not that strong. So I figured I would come here and see if there was any way around it.

Concretely, I have a multiline textbox where users will enter their support request, and I need to insert an href to what can be asked right above it. I already have a ::before in place for some basic helper text, but I know that you cannot insert markup using css...thus my current attempt.

Is this even possible without knowing the specific location of each item...only their respective identifiers?

Here is a jsfiddle that reproduces the page as minimized as I can get it.

Again, please note that I ONLY have the ability to add HTML to the bottom of the page (in the footer element), and a global css file (shown in the separate css). That means I cannot edit the html outside the footer - that would be too easy ;)

HTML

<html id="portal_html"><head>
</head>
<body>
  <div id="container">
    <portal>
      <div data-id="ticketForm" id="layoutContainer">
        <div> 
          <div>
            <div><h2>Submit a ticket</h2></div>
            <div id="field_description">
                <label for="description"><!-- react-text: 1235 -->Description<!-- /react-text --></label>
                    <div>
                        <div>
                            <div data-id="description">
                                <div id="description"><iframe name="deskEditor_New"></iframe></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
 <footer id="footerContainer"><div id="footerContainer"><div class="Footer__footerCopyrigt">
    <div class="Footer__container2">
        <span>Powered by </span>
        <a rel="noopener noreferrer" href="supporturl" target="_blank" class="Footer__footerLink">Support Provider</a>
        <span> | </span>
        <a rel="noopener noreferrer" href="terms" target="_blank" class="Footer__footerLink">Terms of Service</a>
        <span> | </span>
        <a rel="noopener noreferrer" href="privacy" target="_blank" class="Footer__footerLink">Privacy Policy</a>
      <a rel="noopener noreferrer" href="foo">target</a>
    </div>
</div>
</div></footer></portal></div></body></html>

and current css:

    .ticketDetail .ConversationForm__list+.ConversationForm__list { display:none; }
div[data-id="description"]::before {
    content: "Some custom content";
    font-size: smaller;
}
label[for="description"], a[href="foo"]{
  order:-1;
}
body {
  display:flex;
  flex-direction:column;
}

UPDATE I found this SO that sadly shows flexbox will not work because they are not in the same heirarchy :/ ....so I believe the answer is that this is not possible :(

Answer 1

Can you use JS?

 const textAreaWrapper = document.querySelector('.text') const linky = document.querySelector('[href=linky]') document.body.insertBefore(linky, textAreaWrapper)

 .someclass { display: block; } .rest { display: block; } .text { display: block; }

 <span class="someclass"> <label>foo</label> </span> <span class="text"> <textarea></textarea> </span> <label class="rest">more stuff</label> <label class="rest">even more stuff</label> <a href="linky">Here is a link I want above the textarea</a>

How to move one HTML element below another with CSS

Question

1 answers

solution1
0 2020-02-15 06:20:17

How to move one HTML element below another with CSS

Question

1 answers

solution1 0 2020-02-15 06:20:17

solution1
0 2020-02-15 06:20:17