Making textbox size relative to widget size in gridster

Question

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

Randy Casburn · Accepted Answer · 2018-03-09T18:57:39.953

3

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.

edited Mar 09 '18 at 18:57

answered Mar 09 '18 at 18:51

Randy Casburn

13,840
1
16
31

Actually for fiddle purpose it is hardcoded.But in reality I am extracting it from JSON – NewBie Mar 09 '18 at 18:52
I mean to say that every time it is not same(but a value from JSON) – NewBie Mar 09 '18 at 18:53
Your fiddle should reflect you question. I went from your fiddle. So **please change your fiddle to reflect your actual scenario** and I'll address it. – Randy Casburn Mar 09 '18 at 18:54
Is it possible to increase the size as the grid is increased(strecthed) but minimum should be the default size of the block – NewBie Mar 09 '18 at 18:56
I mean exactly in the way the grid is(Size will increase as grid is pulled and decrease as it is condensed ) – NewBie Mar 09 '18 at 18:57
Check the fiddle now, I've change the `80px` to `80%`. Probably still isn't perfect, but that is close....right? – Randy Casburn Mar 09 '18 at 18:58
Yeah Man Thanks a lot.This styling was stressing me a alot.Read about it but was not trying exact solution :) – NewBie Mar 09 '18 at 19:01
1

Awesome! Glad to help. – Randy Casburn Mar 09 '18 at 19:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166557/discussion-between-newbie-and-randy-casburn). – NewBie Mar 09 '18 at 19:11
I was having one doubt regarding CSS.I know this is not an ideal way on stackoverflow to connect but I have spent a lot of time and experimented the css in various ways to get the output.So if you dont mind can you help with that ? – NewBie Mar 27 '18 at 11:31
I get paid to explore problems that others cannot resolve on their own. I help on SO philanthropically. I don't have time to dedicate to pro bono work other than sharing answers here and there. Sorry. – Randy Casburn Mar 27 '18 at 14:15
Sorry for it then No problem and Sorry for connecting with you this way – NewBie Mar 27 '18 at 14:31
Anyway your contribution is just awesome – NewBie Mar 27 '18 at 14:37

Making textbox size relative to widget size in gridster

1 Answers1