Grid record component overflows column width, how to hide/clip?

[martintaal]

Hi,
We use components inside a grid column, when the text inside a component (a button) or the component itself is wider than the column width then it overflows over the column after (see the screenshot). Is there a way to let the component and its content be clipped when the column is not wide enough or when resizing the column?

I could reproduce this by adapting the autofitrows example:

isc.ListGrid.create({
    ID: "countryList",
    width:500, top:50, alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"}
    ],
    autoFitData: "vertical",
    leaveScrollbarGap: false,

  recordComponentPoolingMode: 'recycle',
  showRecordComponentsByCell: true,
  recordComponentPosition: 'within',
  poolComponentsPerColumn: true,
  showRecordComponents: true,
  
  createRecordComponent: function(record, colNum){
    var field = this.getField(colNum), rowNum = this.getRecordIndex(record);
    if (colNum === 1) {
      var linkButton = isc.Button.create({
        title: record[field.name],
        record: record,
overflow: 'hidden',
        colNum: colNum
      });
      return linkButton;
    }
    return null;
  },
  
  updateRecordComponent: function(record, colNum, component, recordChanged){
    if (colNum === 1) {
      component.setTitle(value);
      component.record = record;
      component.colNum = colNum;
      return component;
    }
    return null;
  }

})


isc.IButton.create({
    width:150,
    title:"Data set: 5 records",
    click:"countryList.setData(countryData.getRange(0,5))"
})

isc.IButton.create({
    left:170,
    width:150,
    title:"Data set: 10 records",
    click:"countryList.setData(countryData.getRange(0,10))"
})

isc.IButton.create({
    left:340,
    width:150,
    title:"Data set: 15 records",
    click:"countryList.setData(countryData)"
})

gr. Martin

[Isomorphic]

When creating your linkButton, also set width: "100%"

[martintaal]

Thanks this works!

For the record, one additional remark, we had autoFit: true on the button, this should not be set (or set to false) in this case.

gr. Martin