如果字段宽度发生变化，如何刷新页面？答案

【问题标题】：How do I refresh a page if a field width changes?如果字段宽度发生变化，如何刷新页面？
【发布时间】：2022-01-29 13:56:54
【问题描述】：

我正在尝试在 Knack 上编辑一个页面，该页面允许结合 CSS 格式进行 JS 修改。我所做的更改是锁定每个使用 excel 格式的页面上的页眉。当用户更改下拉选择中的行数或导航到下一页时，这似乎会中断。

我确信有几种方法可以做到这一点，但我认为最简单的管理方法是查看第一行的样式并在最小宽度小于所需长度时刷新页面。如果标题中的第一个条目不是 XXX 个像素，则使用 window.location.reload() 重新加载页面；或类似的。

这是一个JS的例子：

$( document ).on ('knack-page-render.any', (function(event, view, data) {
  var $table = $('#view_60 > table');
  var $bodyCells = $table.find('tbody tr:first').children();
  var newWidths = [];
  var colWidth = $bodyCells.map(function(index, val) {
    /* Debug message*/
    //console.log("Index: " + index + ". Value=" + $(this).width());
      return $(this).width();
    }).get();
  var $headerCells =  $table.find('thead tr').children();  
  //Evaluate new max width
  $table.find('thead tr').children().each(function(i){ 
    var headerWidth = $(this).width();    
    var bodyRowWidth = colWidth[i];
    var newWidth = headerWidth;
    if (bodyRowWidth > newWidth){
        newWidth = bodyRowWidth;           
    }
     newWidth++;
    $(this).css("min-width", newWidth + "px");
    newWidths[i] = newWidth;
    /* Debug message*/
   // console.log("Cell: " + i + ", header width=", headerWidth + ", bodyRowWidth=" +  bodyRowWidth + ", idealWidth=" + newWidth + " Classes: " + $(this).attr('class'));    
  });
  // Set new widths everywhere
  $table.find('tbody tr:first').children().each(function(i){
    //console.log("Setting new width to " + newWidths[i]);
    $(this).css("min-width", ( newWidths[i]) + "px");
  });
}));

这是相关的 CSS：

#view_52 table {border-collapse: collapse;} 
#view_52 thead {display:block; padding: 2px; margin: 0px;} 
#view_52 tbody {display:block; overflow:auto; width 100%; margin: 0px; height:500px; padding:2px;}

【问题讨论】：

请说出一个问题。你的里面没有。如果可能的话，将你的代码减少到一小部分。
问题真的是主题。我正在尝试查看是否有办法查看网页部分的字段宽度或样式设置以排队刷新命令。

标签： javascript jquery html css

【解决方案1】：

将 'knack-page-render.any' 更改为 'knack-view-render.any'

【讨论】：

一个好的答案将始终包括解释为什么这会解决问题，以便 OP 和任何未来的读者可以从中学习。