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

在链接你看那些文本区域框（有ABCaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa）外出widget.I的希望他们能够保持内部部件和大小动态成正比的小部件。读者也应该能够轻松阅读

Answer 1

你非常接近。试试这个CSS：

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

这是您的updated fiddle。

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

在gridster

1 个答案: