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

Question

我从 JSON 变量中提取文本并将其放在 gridster 小部件上 dynamically.I 希望小部件上的文本框在 CSS.One 的帮助下以漂亮的方式显示文本我的目标是在网格大小内显示文本框（如果网格大小增加，文本框大小也应该增加）和要显示的文本，以便用户阅读

这是我创建小部件的 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

In the link you see those text area boxes(having ABCaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa) going out of widget.I want them to remain inside widget and size dynamic proportional to the widget.另外 reader 应该很容易阅读

Answer 1

你们非常亲密。试试这个 CSS:

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

这是你的updated fiddle。

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

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

Making textbox size relative to widget size in gridster

javascript

html

css

gridster