CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Fabio
Fabio

Reputation: 245

Bootstrap row into td overflows

I need to insert into a table cell (TD) a bootstrap panel, like this:

<tr>
  <td>
     ......Here the panel......
  </td>
</tr>

The panel can stays over others divs (like calendar appointment). To do it, I declared the table with relative position and the note with absolute position.

It works if I insert the panel directly into the TD element, like this: https://jsfiddle.net/0kktvptj/

But if I insert it into Bootstrap grid class as row and col-sm-12, the panel overflows 30px on the right, like this: http://jsfiddle.net/r0L71dbv/.

I don't understand why it happens and how can I resolve the problem.

Upvotes: 3

Views: 1445

Answers (3)

Fabio
Fabio

Reputation: 245

I applied this solution: https://jsfiddle.net/rr6ju1no/1/

table.table-bordered.calendario td
{
	padding: 0;
	height: 50px;
	position: relative;
}

table.table-bordered.calendario td .row
{
	width: 100%;
}

table.table-bordered.calendario td .panel
{
	overflow: scroll;
	overflow-x: hidden;
	border-radius: 0 0 4px 4px;
}

td .row .panel-heading {
  border-radius: 1px;
}

.note
{
	position:absolute;
	width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered calendario" style="margin-top: 20px;">
  <tr><td></td><td></td><td></td></tr>
  <tr>
    <td></td>
    <td>
      <div class="row">
	    <div class="col-sm-12">
          <div class="panel panel-success note " style="height: 50px;">
		    <div class="panel-heading">Titolo</div>
			<div class="panel-body">Corpo del testo</div>
		  </div>
        </div>
      </div>
    </td>
	<td></td>
  </tr>
</table>

When you resize the browser, columns maintain the same width better.

Upvotes: 0

isherwood
isherwood

Reputation: 61063

A row should always be a child of a container or a column. The Bootstrap team make this clear in the docs. Define your layout structure, then drop in the content. 

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <table class="table table-bordered calendario" style="margin-top: 20px;">
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td>

            <div class="panel panel-success note " style="height: 50px; overflow: scroll; overflow-x: hidden;">
              <div class="panel-heading">Titolo</div>
              <div class="panel-body" style="overflow: hidden">Corpo del testo</div>
            </div>
          </td>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
</div>

Demo

Upvotes: 1

tao
tao

Reputation: 90058

I'm not sure I understand what you want. Anyway, tables have problems with position:relative. When you want to use it on a td, make a div inside the td with width: 100%;height:100%;position:relative; and it works.

Is this what you wanted?

.note {
  width: 100%;
  float: left;
}
table.table-bordered.calendario td {
  padding: 0;
  width: 33.33%;
  height: 50px;
}
table.table-bordered.calendario td .row {
  display: inline-block;
  max-height: 45px;
  width: calc(100% + 30px);
  position: relative;
}
td .row .panel {
  border-radius: 0 0 4px 4px;
}
td .row .panel-heading {
  border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered calendario" style="margin-top: 20px;">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <div class="row">
        <div class="col-sm-12">
          <div class="panel panel-success note">
            <div class="panel-heading">Titolo</div>
            <div class="panel-body">
Austin next level tilde, pug mlkshk actually helvetica banjo truffaut 
sartorial drinking vinegar mumblecore kogi. Franzen microdosing vegan, 
kale chips chillwave cliche beard.</div>
          </div>
        </div>
      </div>
    </td>
    <td></td>
  </tr>
</table>

Upvotes: 1

Related Questions