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

Posted 2023-05-07

【中文标题】在gridster中使文本框大小相对于小部件大小

【英文标题】：Making textbox size relative to widget size in gridster

【发布时间】：2018-08-18 09:37:30

【问题描述】：

我从 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 的小部件。我希望它们保留在小部件内，并且大小与小部件成比例。读者也应该很容易阅读它

【参考方案1】：

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

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

这是你的updated fiddle。

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

【讨论】：

实际上是为了小提琴的目的，它是硬编码的。但实际上我是从 JSON 中提取它

我的意思是说每次都不一样（而是来自JSON的值）

你的小提琴应该反映你的问题。我离开了你的小提琴。所以请改变你的小提琴以反映你的实际情况，我会解决它。

是否可以随着网格的增加（拉伸）而增加大小，但最小值应该是块的默认大小

太棒了！很高兴能提供帮助。