CODEWITHSUNDEEP
htmlcss
BMills
BMills

Reputation: 901

table td element wrapping under wrong column

I have a table that when the browser window is narrowed is collapsing under wrong column, making it confusing to read. ie from:

enter image description here to: enter image description here

How do I get the last textbox to wrap under the correct column? I tried setting the border collapse css to 'separate' but it made no difference. My html looks like this:

<style>
.inline {
    display: inline-block;
}
</style>

  <table>
      @for (int i = 0; i < 3; i++)
        {                                   
          <tr>
             <td>
                <label>Tries</label>
                 <label class="ui-checkbox">
                  @Html.CheckBoxFor(m => m.Input.LockFixtureDates, new {@class = ""}) <span></span>
             </label>
            </td>
           <td>
              <label class="inline">Max points</label>
                  <div class="inline ">
                     @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-20", max = "", min = "0", type = "number", value = ""})
                    </div>
                  </td>
          <td>
             <label>Has bonus points</label>
             <label class="ui-checkbox">
             @Html.CheckBoxFor(m => m.Input.LockFixtureDates, new {@class = ""}) <span></span>
             </label>
         </td>
          <td>
             <div class="inline ">
                 @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
              </div>
               <label class="inline">bonus points for more than or equal to</label>
               <div class="inline ">
                   @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
              </div>

            </td>
         </tr>
     }
   </table>

Upvotes: 0

Views: 358

Answers (3)

Domenik Reitzner
Domenik Reitzner

Reputation: 1613

Here is a small example with css grid. You can customize how the access space is used.

This is a good link to get started: https://css-tricks.com/snippets/css/complete-guide-grid/

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}
<div class="grid">
  <!-- Start first element -->
  <label for="LockFixtureDates">Tries</label>
  <label class="ui-checkbox" for="LockFixtureDates">
    <input type="checkbox" name="LockFixtureDates" id="LockFixtureDates">
    <span></span>
  </label>
  <label for="PointsForWalkover">Max points</label>
  <input type="number" name="PointsForWalkover" id="PointsForWalkover" class="form-control width-20" min="0">
  <label for="LockFixtureDatesBP">Has bonus points</label>
  <label class="ui-checkbox" for="LockFixtureDatesBP">
    <input type="checkbox" name="LockFixtureDatesBP" id="LockFixtureDatesBP">
    <span></span>
  </label>
  <input type="number" name="PointsForWalkover2" id="PointsForWalkover2" class="form-control width-40" min="0">
  <label for="PointsForWalkover3">bonus points for more than or equal to</label>
  <input type="number" name="PointsForWalkover3" id="PointsForWalkover3" class="form-control width-40" min="0">
  <!-- End first element -->

  <label for="LockFixtureDates">Tries</label>
  <label class="ui-checkbox" for="LockFixtureDates">
    <input type="checkbox" name="LockFixtureDates" id="LockFixtureDates">
    <span></span>
  </label>
  <label for="PointsForWalkover">Max points</label>
  <input type="number" name="PointsForWalkover" id="PointsForWalkover" class="form-control width-20" min="0">
  <label for="LockFixtureDatesBP">Has bonus points</label>
  <label class="ui-checkbox" for="LockFixtureDatesBP">
    <input type="checkbox" name="LockFixtureDatesBP" id="LockFixtureDatesBP">
    <span></span>
  </label>
  <input type="number" name="PointsForWalkover2" id="PointsForWalkover2" class="form-control width-40" min="0">
  <label for="PointsForWalkover3">bonus points for more than or equal to</label>
  <input type="number" name="PointsForWalkover3" id="PointsForWalkover3" class="form-control width-40" min="0">
  <label for="LockFixtureDates">Tries</label>
  <label class="ui-checkbox" for="LockFixtureDates">
    <input type="checkbox" name="LockFixtureDates" id="LockFixtureDates">
    <span></span>
  </label>
  <label for="PointsForWalkover">Max points</label>
  <input type="number" name="PointsForWalkover" id="PointsForWalkover" class="form-control width-20" min="0">
  <label for="LockFixtureDatesBP">Has bonus points</label>
  <label class="ui-checkbox" for="LockFixtureDatesBP">
    <input type="checkbox" name="LockFixtureDatesBP" id="LockFixtureDatesBP">
    <span></span>
  </label>
  <input type="number" name="PointsForWalkover2" id="PointsForWalkover2" class="form-control width-40" min="0">
  <label for="PointsForWalkover3">bonus points for more than or equal to</label>
  <input type="number" name="PointsForWalkover3" id="PointsForWalkover3" class="form-control width-40" min="0">
</div>

Upvotes: 1

Muhammad Osama
Muhammad Osama

Reputation: 1047

<td>
         <div class="inline ">
             @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
          </div>
           <label class="inline">bonus points for more than or equal to</label>
           <div class="inline ">
               @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
          </div>

        </td>

Change this last td to

  <td>
                 <div class="inline ">
                     @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
                  </div>
                   <label class="inline">bonus points for more than or equal to</label>

                </td>
<td>
<div class="inline ">
                       @Html.TextBoxFor(m => m.Input.PointsForWalkover, new {@class = "form-control width-40", max = "", min = "0", type = "number", value = ""})
                  </div>
</td>

Upvotes: 1

mocni_T
mocni_T

Reputation: 179

First you need to set your breakpoint for window size where you want to apply you css. For example.

@media screen and (max-width: 767px) {

    // apply css when screen width is under 767px

}

then you can change your .inline to display as block, not sure will that affect your checkbox to lose some design. In order to change your checkbox design you can wrap checkbox inside div and apply class inline.

Upvotes: 0

Related Questions