Why Is <Table> Content Extending Beyond Containing Bootstrap "Span" and Overlapping, at Some Resolutions

Why is table content extending beyond containing BootStrap span and overlapping, at some resolutions?

I can't tell you the "Bootstrap way" to fix this, since I don't use it. I can tell you the why: Your content doesn't allow it at that breakpoint.

Because rows of tables don't wrap around (ie. all of the cells for each row must appear on the same line), there is an absolute minimum width that every given table can resize down to, which depends on things like paddings and the widest non-wrapping content for each cell. For your tables, the smallest they can go is whatever the width of "Column", "Column", and "10/11/2012" equal out to plus 48px (8px padding on each side times 3).

The span4s are only allowed to be 31.49% of 724px (definition on .container ancestor element), which isn't wide enough to contain the tables at their smallest possible width.

My recommendation would be to not try and place all 3 tables side by side. Your display would have to be exceptionally wide in order for it to not look cramped and not have horizontal scrolling.

content in span larger in than span itself, causing columns to not tier in a responsive layout

Source of the Behavior

Consider the following generic HTML snippet:

<div class="row-wrap ex1>
    <div class="floater pane1">Some_long_text_that_is_not_breaking...</div>
    <div class="floater pane2">Some text that wraps nicely.</div>
</div>

and the following CSS (not Bootstrap...):

.row-wrap {
    outline: 2px dotted lightgray;
    overflow: auto;
}
.row-wrap .floater {
    outline: 1px dashed red;
    float: left;
}

Basically, .row-wrap block element with two floated <div>'s.

See the following demo fiddle: http://jsfiddle.net/audetwebdesign/T9vqg/

In Example 1, I specify the width in % for each .floater:

.ex1 .pane1 {
    width: 70%;
}
.ex1 .pane2 {
    width: 29%;
    margin-left: 1%;
}

In this case, when you shrink the window, the floating elements overlap because their widths are determined by the overall width of the containing block (.row-wrap) and by their definition they will always fit since the sum of widths and horizontal margins is 100%. In this case, long non-breaking text or a table can trigger a content overflow condition.

In Example 2, I set the width to auto on one of the floating child elements.

.ex2 .pane1 {
    width: auto;
}
.ex2 .pane2 {
    width: 29%;
    margin-left: 1%;
}

In this case, you get the expected behavior, the 2nd floating elements wraps to a second line if you make the window narrow enough.

However, eventually, you can make the window narrow enough so that you will get an overflow condition regardless of how you float the elements.

Fixing This In Twitter Bootstrap

I have limited experience with Bootstrap. However, I would probably set up a wide span, row container and define two generic div's within it that float to the left. Just define some custom classes to define the behavior as illustrated in my examples.

How to make 3 horizontal elements stack up on top of each other if the screen is narrow enough

Consider using the fluid or fixed grid system instead of a table. This example shows something similar to what your talking about. The code you have above would look more like this:

<div class="row">
    <div class="span4">
        <img/><span>example</span>
    </div>
    <div class="span4">
        <img/><span>example</span>
    </div>
    <div class="span4">
        <img/><span>example</span>
    </div>
</div>

This page explains more about the grid system. By including the responsive CSS file the columns within the grid will stack vertically when your viewport shrinks to below 767px wide.

Table overflowing outside of div

Turn it around by doing:

<style type="text/css">
  #middlecol {
    border-right: 2px solid red;
    width: 45%;
  }

  #middlecol table {
    max-width: 400px;
    width: 100% !important;
  }
</style>

Also I would advise you to:

• Not use the center tag (it's deprecated)
• Don't use width, bgcolor attributes, set them by CSS (width and background-color)

(assuming that you can control the table that was rendered)

How do I stop a CSS layout from distorting when zooming in/out?

As this question still gets constant views, I'll post the solution I use currently.

CSS Media Queries:

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

/*Write your css here*/

}

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

}

Check out:
CSS-Tricks + device sizes and Media Queries

Prevent text from overlap table td width

Well, there's max-width, max-height, and overflow in CSS.

So

td.whatever
{
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
}

would restrict the maximum width and height to 150px, and it can be anything from less than 150 up to 150, and anything that doesn't fit inside that will be clipped off and hidden from view.

Overflow's default (overflow: visible;) is to simply allow anything that won't fit inside its specified container to just spill over outside of it. If you only want to limit it horizontally and don't want to hide anything, word-wrap may help:

td.whatever
{
    max-width: 150px;
    word-wrap: break-word;
}

word-wrap will break words whenever it needs to, even if it's not at the end of a word. You can also just use height and width to specify a fixed size if you don't want the table to expand or shrink at all.

Prevent CSS tooltip from going out of page/window

Unfortunately, if you want to keep your tooltip good positioning, it isn't possible using only CSS.

Script solutions

But, as you're already using some script, I suggest you this solution:

• Use position: absolute to position the .ktooltiptext accordingly to .ref,
• Use the .getBoundingClientRect() method to easily get the position and size of the tooltip,
• Apply some correction if out of the window,
• Also made some modifications in CSS.

Snippet with only native JavaScript (avoiding jQuery, document will be lighter.)

var ktooltips = document.querySelectorAll(".ktooltip");ktooltips.forEach(function(ktooltip, index){                // For each ktooltip  ktooltip.addEventListener("mouseover", position_tooltip); // On hover, launch the function below})
function position_tooltip(){  // Get .ktooltiptext sibling  var tooltip = this.parentNode.querySelector(".ktooltiptext");    // Get calculated ktooltip coordinates and size  var ktooltip_rect = this.getBoundingClientRect();
  var tipX = ktooltip_rect.width + 5; // 5px on the right of the ktooltip  var tipY = -40;                     // 40px on the top of the ktooltip  // Position tooltip  tooltip.style.top = tipY + 'px';  tooltip.style.left = tipX + 'px';
  // Get calculated tooltip coordinates and size  var tooltip_rect = tooltip.getBoundingClientRect();  // Corrections if out of window  if ((tooltip_rect.x + tooltip_rect.width) > window.innerWidth) // Out on the right    tipX = -tooltip_rect.width - 5;  // Simulate a "right: tipX" position  if (tooltip_rect.y < 0)            // Out on the top    tipY = tipY - tooltip_rect.y;    // Align on the top
  // Apply corrected position  tooltip.style.top = tipY + 'px';  tooltip.style.left = tipX + 'px';}

.ref,.refs {  position: relative;}
.ktooltip {  display: inline-block;  text-indent: 0em;}
.ref .ktooltiptext,.refs .ktooltiptext {  visibility: hidden;  width: 200px;  background: #fff;  border-radius: 6px;  padding: 5px;       /* TAKIT: Changed here */  top: -999px;        /* TAKIT: Changed here */  left: -999px;       /* TAKIT: Changed here */  border: 2px solid grey;  line-height: normal;  position: absolute; /* TAKIT: Changed here */  z-index: 1;}
.ref:hover .ktooltiptext,.refs:hover .ktooltiptext {  visibility: visible;}

<p>  <span id="edtxt.trans1" class="tei l">My hope is in a bishop, <!--link to a reference -->   <sup class="ref expl">     <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>       <!-- the reference in a tooltip -->       <span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>  </sup>  </span><br>  <span id="trans2" class="tei l">and in almighty God and his never-ending miracles.</span><br>  <span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>  <span id="trans4" class="tei l">there is a gold symbol in his sign.    <!-- link to ref -->    <sup class="ref expl">      <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">20</a>        <!-- the tooltip -->        <span class="ktooltiptext"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span>  three <span style="color: green;">girls</span>  </span>  </sup>  </span><br></p>

---

Related Topics