[SOLVED] Making textbox size relative to widget size in gridster

Making textbox size relative to widget size in gridster

I extract text from JSON variable and place it on the gridster widget dynamically.I want the text box on the widget to display text in a beautiful way with help of CSS.One of my aims is to display text box exactly inside the size of the grid(if grid size increased text box size should also be increased) and the text to be displayed so that it's easy to read for a user

This is my JS code to create widgets

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);
};

This is JSON variable from which I am extracting information(about the text to display, widget height width etc.)

  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
}

];

My HTML

 <ul>

            </ul>

I tried with various CSS styles like

.textareaclass {

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

But it was of no use 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. Also the reader should easily be able to read it

Solution

You were very close. Try this CSS:

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

Here is your updated fiddle.

The width can be calculated, but I looked at your container and hardcoded it. The overflow property set to scroll can be set to none or whatever meets your needs. The resize removes the resize handle from Chrome and prevents resizing by the end user.