0

I have a table which uses bootstrap:

<table class="table table-bordered">
                            <tr>
                                <th class="text-center" colspan="4">
                                    DRUG INFO
                                </th>
                            </tr>
                            <tr>
                                <td class="col-md-3"><span>{{item.fields[18].displayName}}</span></td>
                                <td class="col-md-3" colspan="2"><span>{{item.fields[25].displayName}}</span></td>
                                <td class="col-md-3"><span>{{item.fields[14].displayName}}</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
                                </td>
                                <td colspan="2">
                                    <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
                                </td>
                                <td>
                                    <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
                                </td>

                            <tr>
                                <td colspan="2">UD_UU_PKG</td>
                                <td colspan="2">SHORT_CYCL</td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>

                                </td>
                                <td colspan="2" class="text-center">
                                    <div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
                                </td>
                            </tr>

                        </table>

My issue is that this table's responsive attributes are not fixing the layout early enough (and a high enough pixel width).

As the width reduces the table is supposed to move to the bottom of the page for responsive design like this:

enter image description here

But there is a windows of width where this doesn't happen and the table overlaps it's parent:

enter image description here

I have been looking for custom media queries but there aren't any for this section. I have also been working with column widths but reducing them makes the problem worse for some reason.

How would I fix this issue?

David Tunnell
  • 7,252
  • 20
  • 66
  • 124
  • Possible duplicate of [Table Overflowing Outside of Div](http://stackoverflow.com/questions/2259189/table-overflowing-outside-of-div) – Tymek Feb 17 '17 at 15:03
  • 1
    The strings 'UD_UU_PKG' and `SHORT_CYCL` can't get any narrower than they are. You'll need to either use [`text-overflow` as in this question](http://stackoverflow.com/q/9789723/215552) or [`word-break` as in this question](http://stackoverflow.com/q/9314238/215552), or reduce the size of the font. Which you use is completely up to your requirements. – Heretic Monkey Feb 17 '17 at 15:03
  • add wrap div(style="overflow: auto") and for table add .table{min-width: 400px;} for example. After you have block with horizontal scroll. Its simple way. – arturmoroz Feb 17 '17 at 15:09
  • @MikeMcCaughan I removed the text entirely from the 2 cells you mentioned and the same behavior is happening. – David Tunnell Feb 17 '17 at 15:10
  • Then you're likely hitting the min-width of "Effective" + "Minimum" + "Package", the long words in the top row, or the min-width of the textboxes or something (I didn't think they had one, but who knows). Basically, words won't break without some help. – Heretic Monkey Feb 17 '17 at 15:14
  • @MikeMcCaughan that was the issue. Thanks. Put an answer if you would like. – David Tunnell Feb 17 '17 at 15:34
  • Well, it wasn't really an answer so much as a "this is what your *real* problem is". I don't think it'd make a good answer. Seems like http://stackoverflow.com/q/15176714/215552 might answer your question better. – Heretic Monkey Feb 17 '17 at 16:15

0 Answers0