Column resizes on editing

[kevcampb]

If you look at the world population example on backgridjs.com, selecting the Population field results in the column getting larger whilst the editor is open. I think it would feel better if this didn't happen.

I've scoured the issues list, but can't seem to find an explicit reference to this. Looking at the code, I have a feeling there is some issue with putting an input field in a table and using size:auto.

Is the resizing a deliberate decision, or was it something that would be tough to resolve?

[wyuenho]

See #5 and #6.

This is an inherent limitation with the table layout algorithm in browsers. I have a private branch that solves this but will incur some API changes. Will have to wait til #444 is merged before I can work on these fundamental problems.

[nnnnathann]

Hello there, I ran into this myself.

Here is a hacky subclass I ended up using to lock the width of the cell on enter/exit edit mode.

Hope this helps someone! ( @kevcampb )

var FixedWidthEditorCell = Backgrid.Cell.extend({
  enterEditMode: function () {
    this.$el.width((this.$el.outerWidth()) + 'px');
    Backgrid.Cell.prototype.enterEditMode.apply(this, arguments);
  },
  exitEditMode: function () {
    this.$el.width(false);
    Backgrid.Cell.prototype.exitEditMode.apply(this, arguments);
  }
});

Also, big thanks to @wyuenho for Backgrid in general, really great stuff!

[RicardoBer]

I was a while fighting with this and the only solution that could find was modify compiled backgrid.js.

The approach is capture cell width, insert editor, set cell an editor width.

Editing cell "enterEditMode" function as this:

enterEditMode: function () {
    var model = this.model;
    var column = this.column;
    var editable = Backgrid.callByNeed(column.editable(), column, model);
    if (editable) {

      this.currentEditor = new this.editor({
        column: this.column,
        model: this.model,
        formatter: this.formatter
      });

      model.trigger("backgrid:edit", model, column, this, this.currentEditor);

      // Need to redundantly undelegate events for Firefox
      this.undelegateEvents();
      this.$el.empty();
      //mod 1 ini
      var anchocelda=this.$el.width();
      //mod 1 fin
      this.$el.append(this.currentEditor.$el);
      this.currentEditor.render();
      this.$el.addClass("editor");
      //mod 2 ini
      this.currentEditor.$el.width(anchocelda);
      this.$el.width(anchocelda+10);
      //mod 2 fin

      model.trigger("backgrid:editing", model, column, this, this.currentEditor);
    }
  },

my modifications are between "mod 1" and "mod 2" comments.

anyway some times it shows 1 or 2 px move on editing some column.

this is a very, very good control, but indeed this is a bad effect.