javascript - 使文本框大小相对于 gridster 中的小部件大小

Question

我从 JSON 变量中提取文本并将其动态放置在 gridster 小部件上。我希望小部件上的文本框在 CSS 的帮助下以美观的方式显示文本。我的目标之一是在网格的大小(如果网格大小增加，文本框大小也应该增加)和要显示的文本，以便用户轻松阅读

这是我创建小部件的 JS 代码

for(var index=0;index<json.length;index++) {
    gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><textarea class="textareaclass">' +json[index].html+ '</textarea></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
};

这是我从中提取信息的 JSON 变量(关于要显示的文本、小部件高度宽度等)

  var json = [{
    "html": "Some big text ", //testing this failed
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html": "Brand1, Small text", 
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},

{
    "html": "Very big text",
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},


{
    "html": "Brand 5",
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "Brand 5",
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},

{
    "html": "Brand 5",
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];

我的 HTML

 <ul>

            </ul>

我尝试了各种 CSS 样式，例如

.textareaclass {

    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 20px;
    background-color: white;
    border: 0px;
    padding: 5px;
    margin: 5px;
} 

但是没有用 Fiddle Link

在链接中，您会看到那些文本区域框(具有 ABCaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa)离开小部件。我希望它们保留在小部件内部，并且大小与小部件动态成比例。读者也应该能够轻松阅读

Answer 1

你们非常接近。试试这个 CSS:

textarea {
  resize: none;
  overflow: scroll;
  width: 80%;
}

这是您的updated fiddle .

宽度可以计算，但我查看了你的容器并将其硬编码。设置为滚动的溢出属性可以设置为none或任何满足您需要的值。 resize 会从 Chrome 中删除调整大小句柄，并阻止最终用户调整大小。