CODEWITHSUNDEEP
htmlcss
unstuck
unstuck

Reputation: 638

Position subscribe button in the bottom of a form

I know almost nothing about CSS.

This is my table:

<tbody>
   <tr>
      <td class="onefield acyfield_1 acyfield_text">
         <label class="cell margin-top-1">
            <div class="acym__users__creation__fields__title">Name</div>
            <input name="user[name]" value="" data-authorized-content="{&quot;0&quot;:&quot;all&quot;,&quot;regex&quot;:&quot;&quot;,&quot;message&quot;:&quot;Incorrect value for the field Name&quot;}" type="text" class="cell  ">
         </label>
         <div class="acym__field__error__block" data-acym-field-id="1"></div>
      </td>
      <td class="onefield acyfield_2 acyfield_text">
         <label class="cell margin-top-1">
            <div class="acym__users__creation__fields__title">Email</div>
            <input id="email_field_403" name="user[email]" value="" data-authorized-content="{&quot;0&quot;:&quot;all&quot;,&quot;regex&quot;:&quot;&quot;,&quot;message&quot;:&quot;Incorrect value for the field Email&quot;}" required="" type="email" class="cell acym__user__edit__email  ">
         </label>
         <div class="acym__field__error__block" data-acym-field-id="2"></div>
      </td>
      <td class="acysubbuttons">
         <noscript>
            <div class="onefield fieldacycaptcha">
               Please enable the javascript to submit this form             
            </div>
         </noscript>
         <input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit" onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
      </td>
   </tr>
</tbody>

The button isn't aligned with the input fields: enter image description here

I have tried like a million things, like:

vertical-align: bottom

As per documentation here.

And position: absolute margin 0;

Etc. etc.

It doesn't matter: the button is always on the middle.

Can anyone help?

Thanks!

Upvotes: 1

Views: 108

Answers (3)

Fukasaku
Fukasaku

Reputation: 56

In the code submitted, HTML table is not used properly.

If you want to create the form using a table, the labels for inputs should be declared as column headers, in the thead section of the table, not in tbody. This way, your table row will contain only the inputs and the submit button and they will have the same height by default.

th {
text-align:left;
}
<table>
        <thead>
            <th class="acym__users__creation__fields__title">Name</th>
            <th class="acym__users__creation__fields__title">Email</th>
        </thead>
        <tbody>
            <tr>
                <td class="onefield acyfield_1 acyfield_text">
                    <input name="user[name]" value=""
                        data-authorized-content="{&quot;0&quot;:&quot;all&quot;,&quot;regex&quot;:&quot;&quot;,&quot;message&quot;:&quot;Incorrect value for the field Name&quot;}"
                        type="text" class="cell  ">
                    <div class="acym__field__error__block" data-acym-field-id="1"></div>
                </td>
                <td class="onefield acyfield_2 acyfield_text">
                    <input id="email_field_403" name="user[email]" value=""
                        data-authorized-content="{&quot;0&quot;:&quot;all&quot;,&quot;regex&quot;:&quot;&quot;,&quot;message&quot;:&quot;Incorrect value for the field Email&quot;}"
                        required="" type="email" class="cell acym__user__edit__email  ">
                    <div class="acym__field__error__block" data-acym-field-id="2"></div>
                </td>
                
                <td class="acysubbuttons">
                    <noscript>
                        <div class="onefield fieldacycaptcha">
                            Please enable the javascript to submit this form
                        </div>
                    </noscript>
                    <input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit"
                        onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
                </td>
            </tr>
        </tbody>
    </table>

Upvotes: 2

Ibrahim Bakori
Ibrahim Bakori

Reputation: 46

Instead use

position: absolute;
bottom: 0px;

and also add bottom:0px;

Upvotes: 1

Justin
Justin

Reputation: 31

Have you tried the margin-top attribute? It essentially puts a space on top of your subscribe button.

Basically in the css block of your button, add

margin-top: 10px;

Note that this value is fixed so it's probably not the best solution but it's a quick and easy one. Also play around with the value until its the right spot.

Upvotes: 1

Related Questions