CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexboxcss-position
kruddock
kruddock

Reputation: 47

Using Bootstrap4/Flexbox inside of a table cell, splitting cell into 2 columns, one column is absolute position

I have a html table with 6 table columns. The table column with header called Part Description is split into 2 flexbox columns. The first flexbox column is fine. The second flexbox column is the issue.

The second column contains an absolute positioned select box that I would like to right align within the table cell. Within the cell, I use a flexbox div and wrap each column within this div. This codepen shows my attempt of trying to align the absolute positioned box [-Alternatives-] to right align next to another table cell [ORD QTY]

Attempt1, Row1 - Shows a table cell using bootstrap classes d-flex justify-content-between. Issue: [- Alternatives -] box not contained with table cell and overlays next cell.

Attempt2, Row2 - Shows a table cell using same bootstrap classes, inner columns use css flex for a slightly better layout. Issue: table cell starts to overlay on sceen widths below 992px. .fb-1 { flex: 1 1 auto; } .fb-2 { flex: 2 1 auto; }

Attempt3, Row3 - Shows a table cell using same bootstrap classes, inner columns use css flex and 1st column sets flex-basis width. Issue: table cell starts to overlay on screen widths below 768px.

Ideally, I would like the [-Alternatives-] box to align right and stay within the table cell without flowing outside of it. Maybe Flexbox isn't the ideal solution here?

HTML Code of problematic table cell below:

   <tr class="part-row">
    <td class="part-lock part-select">&nbsp;</td>
    <td class="part part-select" data-weight="3.19KG/Per K" data-partinfo2="100/P100">H001-004-0030</td>
    <td class="part-select part-hover">
      <div class="d-flex justify-content-between">
        <div class="pr-0"><span class="part-desc">4017/933-8.8 4x30</span><br><span class="part-desc2">Flat Head Screw Full Thread</span></div>
        <div class="px-2">
          <div class="position-relative"><select class="hide part-alt-select part-alt-btn">
              <option value="">-&nbsp;Alternatives&nbsp;-</option>
              <option value="Original" data-alt="1">Original</option>
              <option value="Thread Options" data-alt="2">Thread Options</option>
              <option value="Coating Options" data-alt="3">Coating Options</option>
              <option value="Grade Options" data-alt="4">Grade Options</option>
              <option value="All" data-alt="5">All</option>
            </select></div>
        </div>
      </div>
    </td>
    <td><input class="part-select table-qty" type="number" name="qty-ord1" id="qty-ord1" min="100" step="100" data-uom-code="P100" value="0"></td>
    <td class="part-select product-add2-cart"><button type="button"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td>
    <td class="part-select jq-truck popwrap" style="text-align: left">
      <div class="d-flex justify-content-between">
        <div><img class="truck-img" src="/images/truck.png" alt="truck"><span class="part-cust"> &nbsp;</span></div>

      </div>
    </td>
  </tr>

Upvotes: 1

Views: 492

Answers (1)

focus.style
focus.style

Reputation: 6760

If i understood you correctly, you should switch off an absolute position of select box and add text-right to it's parent:

<tr class="part-row">
    <td class="part-lock part-select">&nbsp;</td>
    <td class="part part-select" data-weight="3.19KG/Per K" data-partinfo2="100/P100">H001-004-0030</td>
    <td class="part-select part-hover">
      <div class="d-flex justify-content-between">
        <div class="pr-0"><span class="part-desc">4017/933-8.8 4x30</span><br><span class="part-desc2">Flat Head Screw Full Thread</span></div>
        <div class="px-2 fb-1 text-right"> <!-- added a for text align right -->
          <div class="position-relative"><select class="hide part-alt-select part-alt-btn">
              <option value="">-&nbsp;Alternatives&nbsp;-</option>
              <option value="Original" data-alt="1">Original</option>
              <option value="Thread Options" data-alt="2">Thread Options</option>
              <option value="Coating Options" data-alt="3">Coating Options</option>
              <option value="Grade Options" data-alt="4">Grade Options</option>
              <option value="All" data-alt="5">All</option>
            </select></div>
        </div>
      </div>
    </td>
    <td><input class="part-select table-qty" type="number" name="qty-ord1" id="qty-ord1" min="100" step="100" data-uom-code="P100" value="0"></td>
    <td class="part-select product-add2-cart"><button type="button"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td>
    <td class="part-select jq-truck popwrap" style="text-align: left">
      <div class="d-flex justify-content-between">
        <div><img class="truck-img" src="/images/truck.png" alt="truck"><span class="part-cust"> &nbsp;</span></div>

      </div>
    </td>
  </tr>

and

select.part-alt-btn {
    position: relative; /* changed form absolute */
    font-size: 13px;
    padding: 2px 1px;
    color: white;
    background: #a5202d;
    border: 1px solid #65161e;
    margin: 2px 0 0;
    z-index: 9;
}

Upvotes: 1

Related Questions