Making textarea 100% width and height of window with buttons

[Buggs2015Participant]

Hello,

I really need your help with this.

How do I get a JQ Window with a textarea that is able to resize, 100% width and height along with a button in my JQ Window?

What is happening is that the button appears to be cut off at the bottom of the window (which almost appears invisible to the user), so I guess I am almost there. I just can’t seem to figure out the tweek needed.

Here is the markup in question:

var html = ‘<div id=”dialog”>’+
‘<div style=”height: 100%; width: 100%;”>’+
‘<div style=”height: 100%;”><textarea id=”comments” style=”height: 100%; width: 100%; border:1px solid blue; overflow-y: auto; box-sizing: border-box;”></textarea></div>’+
‘<div><input type=”button” value=”Close”></div>’+
‘</div>’+
‘</div>’

$(html).appendTo(document.body).hide()

$(“#dialog”).jqxWindow({
height: ‘350px’,
width: ‘300px’,
autoOpen: false,
showCloseButton: true,
resizable: true,
isModal: false,
‘initContent’: function () {

$(“#dialog”).on(‘close’, function(e) {

$(this).remove()

});

}
});

$(“#dialog”).jqxWindow(‘open’)

[StanislavParticipant]

Hello Buggs2015,

I didn’t quite understand what you were trying to achieve here, sorry. But from what I understand, you want to hide the button and show only the textarea when the window opens, in that regard do you want a scrollbar or not?

I played around with your sample and had some ideas. Here is the most basic example of how to make the button hide from the window in the initial open(this uses a scrollbar).

var html = '<div id="dialog">' + '<div style="height: 100%; width: 100%;">' + '<div style="height: 100%;"><textarea id="comments" style="height: 100%; width: 100%; border:1px solid blue; overflow-y: auto; box-sizing: border-box;"></textarea></div>' + '</br>' + '<div><input type="button" value="Close"></div>' + '</div > ' + '</div > '

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Buggs2015Participant]

Thanks Stanislav.

Maybe I should have reworded my request to have been a bit more clearer. Using the JQXWindow widget, what I would like to accomplish is to have a dynamic window with a text area that resizes to whatever the height of my popup window is along with 2 buttons at the bottom after the textarea: OK | Close. At this point in time, the current problem is that the button appears to be cut off at the bottom of the window.

Here’s a depiction of the desired result:

https://imgur.com/a/BSYdn

Much thanks and appreciation for your continued support with my dilemma

Cheers,

Jay

[Author]

Posts