Как переместить один элемент HTML ниже другого с помощью CSS - PullRequest
Новая
       0

Как переместить один элемент HTML ниже другого с помощью CSS

0 голосов
/ 15 февраля 2020

Я работаю со сторонним поставщиком поддержки и пытаюсь обойти некоторые ограничения, касающиеся того, что можно настроить. Я хотел бы добавить элемент HTML (a) под меткой, но иметь доступ только к css и нижнему колонтитулу html. Моя текущая идея состоит в том, чтобы добавить скрытый якорь в нижний колонтитул и затем попытаться изменить его положение с помощью css. Я предполагаю, что это МОЖЕТ быть возможным с flexbox, но мой css foo не такой сильный. Поэтому я решил, что приду сюда и посмотрю, есть ли способ обойти это.

Конкретно, у меня есть многострочное текстовое поле, где пользователи будут вводить свои запросы в службу поддержки, и мне нужно вставить ссылку на то, что можно спросить. прямо над ним. У меня уже есть ::before для некоторого базового c вспомогательного текста, но я знаю, что вы не можете вставить разметку, используя css ... таким образом, моя текущая попытка.

Возможно ли это, даже не зная конкретное c расположение каждого элемента ... только их соответствующие идентификаторы?

Вот jsfiddle , который воспроизводит страницу настолько минимизировано, насколько я могу ее получить.

Опять же, обратите внимание, что у меня ТОЛЬКО есть возможность добавить HTML внизу страницы (в элементе нижнего колонтитула) и глобальный файл css (показанный в отдельном css). Это означает, что я не могу редактировать html за пределами нижнего колонтитула - это было бы слишком просто;)

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>

и текущий 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;
}

ОБНОВЛЕНИЕ Я нашел этот SO , который, к сожалению, показывает, что flexbox не будет работать, потому что они не в той же иерархии: / .... поэтому я считаю, что ответ таков: невозможно: (

1 Ответ

0 голосов
/ 15 февраля 2020

Можете ли вы использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...