user3322525 user3322525 - 3 months ago 7
HTML Question

How to bring the button down in a Div

I have buttons and select dropdown in a popup. but for some reason, I cannot move the button to the position that's below the dropdown.

I've tried putting them in different table rows but it didn't help.

Here's my code



$(".form").button();
$("#popup").dialog({
title: "Test",
modal: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="popup" style="overflow:scroll;">
<table>
<tr>
<select style="width:100px;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</tr>
<tr>
<input type="button" class="form" value="Save">
</tr>
</table>
</div>




Answer

You missed <td></td>

$(".form").button();
$("#popup").dialog({
  title: "Test",
  modal: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="popup" style="overflow:scroll;">
  <table>
    <tr>
      <td>
          <select style="width:100px;">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
          </select>
        </td>
    </tr>
    <tr>
      <td>
          <input type="button" class="form" value="Save">
       </td>
    </tr>
  </table>
</div>