Как объединить две формы в одну? - PullRequest
Новая
       0

Как объединить две формы в одну?

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

Я хочу, чтобы эти две кнопки были в одной строке, поэтому кнопка Remove находится в том положении, в котором она находится, а кнопка Update mapping находится справа. Так это будет выглядеть так:

enter image description here

Прямо сейчас Update mapping кнопка находится под Удалить. Можно сделать так, как я сделал на фото? Они в разных <form>...</form>. 

<html>
....
<div class="collapse">
    <th:block th:each="tmpl,iterStat : ${templates}">
        <input type="checkbox" th:id="'collapse-section' + ${iterStat.count}" aria-hidden="true"/>
        <label th:for="'collapse-section' + ${iterStat.count}" aria-hidden="true"><span ....></label>
        <div>
            <form action="/.../delete" method="post">
                <button type="submit" name="name1" th:value="${tmpl.variable1} + '_' + ${tmpl.variable2}"
                        class="secondary">Remove
                </button>
            </form>
            <form action="/.../update" method="get">
                <button type="submit" name="name2" th:value="${tmpl.variable1} + '_' + ${tmpl.variable2}"
                        class="button primary">Update mapping
                </button>
            </form>
            <pre th:utext="${tmpl.response}"/>
        </div>
    </th:block>
</div>
</body>
</html>

после предложения это выглядит так:

enter image description here

Я добавил display: inline-block; к формам, которые можно получить одна длинная серая линия?

Ответы [ 4 ]

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

Вы должны использовать сетку bootstrap: 

<html>
....
<div class="collapse">
    <th:block th:each="tmpl,iterStat : ${templates}">
        ...
        <div class="row">
          <div class="col">
            <form action="/.../delete" method="post">
                <button type="submit" name="name1" th:value="${tmpl.variable1} + '_' + ${tmpl.variable2}"
                        class="secondary">Remove
                </button>
            </form>
          </div>
          <div class="col">
            <form action="/.../update" method="get">
                <button type="submit" name="name2" th:value="${tmpl.variable1} + '_' + ${tmpl.variable2}"
                        class="button primary">Update mapping
                </button>
            </form>
          </div>
            <pre th:utext="${tmpl.response}"/>
        </div>
    </th:block>
</div>
</body>
</html>

Теперь вы можете установить ширину столбцов, изменяя класс col. Вот руководство: Bootstrap Сетка системы

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

Вы можете использовать float для форм или display:flex для родительских форм. 

div {display:flex;}
        <div>
            <form action="/.../delete" method="post">
                <button type="submit" name="name1" th:value="${tmpl.variable1} + '_' + ${tmpl.variable2}"
                        class="secondary">Remove
                </button>
            </form>
            <form action="/.../update" method="get">
                <button type="submit" name="name2" th:value="${tmpl.variable1} + '_' + ${tmpl.variable2}"
                        class="button primary">Update mapping
                </button>
            </form>
            <pre th:utext="${tmpl.response}"/>
        </div>
0 голосов
/ 14 февраля 2020

Вы просто добавляете стиль "display: inline-block" к своим формам. 

<div>
            <form style="display: inline-block" action="/.../delete" method="post">
                <button type="submit" name="name1" th:value="${tmpl.variable1} + '_' + ${tmpl.variable2}"
                        class="secondary">Remove
                </button>
            </form>
            <form style="display: inline-block" action="/.../update" method="get">
                <button type="submit" name="name2" th:value="${tmpl.variable1} + '_' + ${tmpl.variable2}"
                        class="button primary">Update mapping
                </button>
            </form>
            <pre th:utext="${tmpl.response}"/>
        </div>
0 голосов
/ 14 февраля 2020

Добавить style="display: inline-flex" в родительском разделе.

ОБНОВЛЕНИЕ: 

<div class="collapse">
<th:block th:each="tmpl,iterStat : ${templates}">
    <input type="checkbox" th:id="'collapse-section' + ${iterStat.count}" aria-hidden="true"/>
    <label th:for="'collapse-section' + ${iterStat.count}" aria-hidden="true"><span ....></label>
    <div style="display: inline-flex">
        <form action="/.../delete" method="post" style="float: left; width 40%">
            <button type="submit" name="name1" th:value="${tmpl.variable1} + '_' + ${tmpl.variable2}"
                    class="secondary">Remove
            </button>
        </form>
        <div style="width: 20%"></div>
        <form action="/.../update" method="get" style="width: 40%">
            <button type="submit" name="name2" th:value="${tmpl.variable1} + '_' + ${tmpl.variable2}"
                    class="button primary">Update mapping
            </button>
        </form>
        <pre th:utext="${tmpl.response}"/>
    </div>
</th:block>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...