在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

在链接中，您会看到那些文本区域框（具有 ABCaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 的小部件。我希望它们保留在小部件内，并且大小与小部件成比例。读者也应该很容易阅读它

Answer 1

你们很亲密。试试这个 CSS：

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

这是你的updated fiddle。

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