Question 44677 in Html Question posted in
Some basic documentation can be found here.

Two forms submit button stay beside each other – Html

<form class="listing_form" action="{% url 'listing' listing.id  %}" method="post">
            {% csrf_token %}
            {{ form }}
            <input class="btn btn-primary" type="submit" value="Place Bid">
</form>
<form class="listing_form_close" action="{% url 'close' listing.id %}" method="post">
            {% csrf_token %}
            {% if listing.listedBy.username == request.user.username %}
            <input class="btn btn-danger" type="submit" value="Close Bid">
            {% endif %}
</form>

In this code, two submit buttons are stays vertically.

enter image description here

I need styling same below:

enter image description here

As I have tried:

.listing_form [type="submit"] {
    margin-bottom: 20px;
    display: inline;
  }
  .listing_form_close [type="submit"] {
    display: inline;
  }

In my css code, but not works!

Appreciated.

Tags:

2

Answers


  1. 0

    The problem in your CSS code is, that you add display: inline to the input element, which is inside a form element. In this case, all buttons of the type submit inside a form would be inline.

    What you actually want to do is to add the display: inline attribute to your form. So that the two forms which including the buttons are next to each other.

    .listing_form {
  display: inline;
}
    <form class="listing_form" action="URL" method="post">
  <input class="btn btn-primary" type="submit" value="Place Bid">
</form>
<form class="listing_form" action="URL" method="post">
  <input class="btn btn-danger" type="submit" value="Close Bid">
</form>

    Note: I changed the form class of the second form from listing_form_close to listing_form.

    Login or Signup to reply.
  2. 0

    Based on your code, you have incorrectly specified the CSS-selector for buttons.

    You’re CSS-selectors have spaces between class name .listing_form and attribute selector [type="submit"], CSS understands that like .listing_form is a parent [type="submit"] element.

    Also, I recommend the use display: incline-block

    .listing_form[type="submit"] {
    margin-bottom: 20px;
    display: inline-block;
  }

.listing_form_close[type="submit"] {
    display: inline-block;
  }

    Here is more information about CSS-selectors:

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

    Good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search