0

I'm working on a php application, attempting to dynamically select from a MySQL database and populate a page with configurable cells based on table rows that users can use to manage their configuration. I'm trying to make every cell look roughly like this:

planned cell

However, I'm not quite sure how to get there. My first thought was to use a separate div for each element of the cell:

 .stockcellcontainertext {
   position: absolute;
   vertical-align: middle;
   text-align: center;
   left: 0;
   width: 15%;
   height: 100%;
   margin: auto;
 }

 .stockcellcontainercheckbox {
   display: inline-block;
   position: absolute;
   vertical-align: middle;
   right: 0;
   width: 75%;
   height: 100%;
   margin: auto;
 }

And then I tried a more basic approach with <table>

<form action="update_client.php" method="get">
  <table style="width: 100%;">
    <tr>
      Symbol: <br>
      <input type="text" name="symbol000" value="GOOG">
    </tr>
    <tr>
      <input type="checkbox" name="input0" value="Hull's Moving Average" checked>
      <label for="input0">input0</label>
      <input type="checkbox" name="input1" value="Moving Average 200-Days" checked>
      <label for="input1">input1</label>
      <input type="checkbox" name="input2" value="Moving Average 50-Days" checked>
      <label for="input2">input3</label>
    </tr>
  </table>
</form>

But both of them seem to push the checkboxes down a rank, I can't seem to get them in side-by-side.

Output

output

ncfx1099
  • 367
  • 1
  • 11

1 Answers1

0

Approach with table

<table> with rows in each <td>

Example

<form action="">
  <table>
    <tr>
      <td>
        <label for="">Label</label><br>
        <input type="text">
      </td>
      <td>
        <div><input type="checkbox"><label for="">Input 1</label></div>
        <div><input type="checkbox"><label for="">Input 2</label></div>
        <div><input type="checkbox"><label for="">Input 3</label></div>
      </td>
      <td>
        <div><input type="checkbox"><label for="">Input 4</label></div>
        <div><input type="checkbox"><label for="">Input 5</label></div>
        <div><input type="checkbox"><label for="">Input 6</label></div>
      </td>
      <td>
        <div><input type="checkbox"><label for="">Input 7</label></div>
        <div><input type="checkbox"><label for="">Input 8</label></div>
        <div><input type="checkbox"><label for="">Input 9</label></div>
      </td>
      <td>
        <input type="submit">
      </td>
    </tr>
  </table>
</form>

Approach with flexbox

The row is display: flex and the columns have flex: 1. The checkboxes are wrapped in <li> (could also be <div>).

Example

.my-form {
  border: 5px solid blue;
  width: 700px;
}

.my-form>.row {
  display: flex;
  align-items: center;
}

.my-form .col {
  flex: 1;
  padding: 15px;
}

.my-form label {
  display: inline-block;
  margin-bottom: 10px;
}

.my-form input {
  padding: 10px;
  border: 2px solid #000;
}

.my-form input[type="submit"] {
  width: 100%;
  border-radius: 20px;
}

.my-form input+label {
  margin-left: 10px;
}

.my-form ul {
  list-style: none;
  padding: 0;
}
<form class="my-form" action="">
  <div class="row">
    <div class="col">
      <label>Text Value:</label><br>
      <input type="text" placeholder="Textinput1">
    </div>
    <div class="col">
      <ul>
        <li><input type="checkbox"><label for="">input1</label></li>
        <li><input type="checkbox"><label for="">input2</label></li>
        <li><input type="checkbox"><label for="">input3</label></li>
      </ul>
    </div>
    <div class="col">
      <ul>
        <li><input type="checkbox"><label for="">input4</label></li>
        <li><input type="checkbox"><label for="">input5</label></li>
        <li><input type="checkbox"><label for="">input6</label></li>
      </ul>
    </div>
    <div class="col">
      <ul>
        <li><input type="checkbox"><label for="">input7</label></li>
        <li><input type="checkbox"><label for="">input8</label></li>
        <li><input type="checkbox"><label for="">input9</label></li>
      </ul>
    </div>
    <div class="col">
      <input type="submit">
    </div>
  </div>
</form>

Hints

Community
  • 1
  • 1