Edgar Navasardyan Edgar Navasardyan - 5 months ago 11
jQuery Question

Making toggling element containing table stop changing column widths

Best descriped by a live example.
I spent several hours trying various combinations of width specification - with px, % - trying to stop column change its width depending on whether
it has glyphicon glyphicon-pencil class applied or not. If you don't focus your mouse on the table, it has narrower width compared to the case when you keep mouse on the table.



$(function() {
$(document).on('mouseover', '#tasks_for_myself_table tbody tr', function(e) {
set_task_editor_icon_visibility($(this))
});
$(document).on('mouseout', '#tasks_for_myself_table tbody tr', function(e) {
set_task_editor_icon_visibility($(this))
});
});


var set_task_editor_icon_visibility = function($row) {
$row.find('td.task_editing').toggleClass('glyphicon glyphicon-pencil');
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'container'>
<div class = 'row'>
<div class = 'col-sm-9'>
<table id="tasks_for_myself_table" class="table table-hover table-condensed draggable">
<thead>
<th></th>
<th></th>
</thead>
<tbody>
<!-- If there are any initiated tasks at all -->
<tr>
<td style = 'width: 2em' class='task_editing'></td>
<td>AAAAA</td>
<td>BBBBBBB</td>
</tr>
<tr>
<td style = 'width: 2em' class='task_editing'></td>
<td>AAAAA</td>
<td>BBBBBBBB</td>
</tr>
</tbody>
</table>
</div>
<div class = 'col-sm-3'>I love this site</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>





JSFiddle

Answer

Simply giving that column a width does the trick:

#tasks_for_myself_table .task_editing {
  width: 1.5em;
}

I would probably apply that class to the th as well, but it doesn't seem to matter.

At least for me in the snippet below, a height might be useful as well. I didn't add one, but I note the row is slightly taller when the icon is showing, so you may want one.

$(function() {
  $(document).on('mouseover', '#tasks_for_myself_table tbody tr', function(e) {
    set_task_editor_icon_visibility($(this))
  });
  $(document).on('mouseout', '#tasks_for_myself_table tbody tr', function(e) {
    set_task_editor_icon_visibility($(this))
  });
});


var set_task_editor_icon_visibility = function($row) {
  $row.find('td.task_editing').toggleClass('glyphicon glyphicon-pencil');
}
#tasks_for_myself_table .task_editing {
  width: 1.5em;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<table id="tasks_for_myself_table" class="table table-hover table-condensed draggable">
  <thead>
    <th class='task_editing'></th>
    <th></th>
  </thead>
  <tbody>
    <!-- If there are any initiated tasks at all -->
    <tr>
      <td class='task_editing'></td>
      <td>AAAAA</td>
    </tr>
    <tr>
      <td class='task_editing'></td>
      <td>AAAAA</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

Comments