CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
gorill
gorill

Reputation: 1673

Avoid wrapping to a new line in the bootstrap 3 tables

I place a html table to the bootstrap's popup dynamically:

html popup placeholder:

<button 
  id="holder" 
  type="button" 
  class="btn btn-link btn-lg" 
  data-toggle="popover"
>Images info</button>

javascript:

function getTab()
{

  var tab = $('<table class="table table-condensed table-hover"' +
    'style="margin-top: 20px;"></table>');
  tab
    .append($('<tr></tr>')
      .append($('<td></td>').text('Number of images:'))
      .append($('<td ></td>').text(100000)) )
    .append($('<tr></tr>')
      .append($('<td></td>').text('Images data type:'))
      .append($('<td ></td>').text('unsigned char (8 bit)')) )
    .append($('<tr></tr>')
      .append($('<td></td>').text('Images format type:'))
      .append($('<td ></td>').text('grascale mono')) );

  return tab;
}


$('#holder').popover(
  {
    trigger: 'click',
    html: 'true',
    placement: 'bottom',
  }
);

$('#holder').data('bs.popover').options.content = getTab();

Everything works fine (see here - http://jsfiddle.net/JJQS9/192), but I need to render each tables row in one line - without wrapping to a new line. I tried to expand popover's width:

.popover
{
    width: 500px;
 }

but this has no effect.

Upvotes: 1

Views: 683

Answers (1)

Trevor
Trevor

Reputation: 16116

You need to override the max-width property on popover which is already set to 276 px.

.popover {
    max-width:500px;
}

Example:

http://jsfiddle.net/JJQS9/193/

Upvotes: 3

Related Questions