By pqa1222


2020-02-14 08:20:28 8 Comments

I want to have these two buttons in one line, so Remove button is in the position in which it is and the Update mapping button is on the right. So it would looks like this:

enter image description here

Right now Update mapping button is under the Remove. It is possible to make like I did on the photo? They are in different <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>

after suggestion it looks like this:

enter image description here

I have added display: inline-block; to forms it is possible to have one long grey line?

4 comments

@Fotis Papadamis 2020-02-14 08:31:21

Add style="display: inline-flex" at parent div.

UPDATE:

<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>

@pqa1222 2020-02-14 08:34:59

it is not what I wanted. It looks worse. I want to have on this one grey line two buttons. Not two seperate grey lines. I have edited question to show you how it looks now.

@Andris 2020-02-14 08:39:23

@pqa1222 as far as i understan. You have gray background and paddings on form elements. Remove this css. Instead use it on div element, which is parent for both forms

@Fotis Papadamis 2020-02-14 08:49:46

@pqa1222 I've updated my answer. This is a workaround if you do not wish to use bootstrap's grid system.

@Maro 2020-02-14 08:40:10

You should use bootstrap's grid system:

<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>

Now you can set the width of columns changing the col class. Here's the guide: Bootstrap Grid System

@Andris 2020-02-14 08:44:00

overkill to load whole bootstrap css files just to do simple float. + in this case for forms is needed dynamic width not defined

@Mengseng Oeng 2020-02-14 08:39:41

You just add style "display : inline-block" to your forms.

<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>

@pqa1222 2020-02-14 08:45:59

ye, it works, but now there is no long grey line. Check my edit.

@Mengseng Oeng 2020-02-14 08:53:19

You just remove your background gray on your forms and then you can use background gray on your dev. Ex. <div class="long-bg-gray"> <form style="display: inline-block" action="/.../delete" method="post"> ...

@Andris 2020-02-14 08:36:29

You can use floats for forms or display:flex on forms parent.

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>

@pqa1222 2020-02-14 08:39:36

what is forms parent?

@Andris 2020-02-14 08:40:48

@pqa1222 in this case "div", cause forms are wrapped in it.

@pqa1222 2020-02-14 08:54:22

All right. So I have created id for div and move all styles to div in css. And it works, yes, but there is one problem. zapodaj.net/71e4a10ec3539.png.html I have some kind of response in the same div and it appears on the right. I would like to have this on the bottom of the buttons like I had before. Is it possible?

@Andris 2020-02-14 08:56:36

@pqa1222 make it in css width 100% or instead don't use "display:flex" on div, but use "display:inline-block" on forms

Related Questions

Sponsored Content

34 Answered Questions

[SOLVED] How to make a div 100% height of the browser window

  • 2009-10-15 21:18:43
  • mike
  • 1921506 View
  • 2080 Score
  • 34 Answer
  • Tags:   html css height

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1516700 View
  • 2247 Score
  • 28 Answer
  • Tags:   html css opacity

106 Answered Questions

[SOLVED] How to horizontally center a <div>?

45 Answered Questions

[SOLVED] How to disable text selection highlighting

66 Answered Questions

[SOLVED] How do I check whether a checkbox is checked in jQuery?

30 Answered Questions

[SOLVED] How can I change an element's class with JavaScript?

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2530260 View
  • 2703 Score
  • 30 Answer
  • Tags:   javascript html dom

16 Answered Questions

[SOLVED] How do I disable the resizable property of a textarea?

  • 2011-03-08 16:15:40
  • user549757
  • 1311575 View
  • 2594 Score
  • 16 Answer
  • Tags:   html css

73 Answered Questions

[SOLVED] How do you disable browser Autocomplete on web form field / input tag?

38 Answered Questions

[SOLVED] How can I make a div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1381837 View
  • 2003 Score
  • 38 Answer
  • Tags:   html css width

38 Answered Questions

[SOLVED] How to align checkboxes and their labels consistently cross-browsers

Sponsored Content