TextGadget with auto resize?

Just starting out? Need help? Post your questions and find answers here.
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

TextGadget with auto resize?

Post by Dirk Geppert »

Hi folks, is there a way to automatically adjust a text field to the required size?
For varying texts on a web form. Should be the text displayed completely and should not overwrite any other gadget.

Code: Select all

OpenWindow(0, 0, 0, 0, 0, "", #PB_Window_Background)
SetWindowColor(0, #Green)
TextGadget(0, 10, 10, WindowWidth(0) - 20, 30, "",  #PB_Text_Border )
ButtonGadget(1, 10, 50, WindowWidth(0) - 20, 30, "Send form")
SetGadgetColor(0, #PB_Gadget_BackColor, #White)
SetGadgetColor(0, #PB_Gadget_FrontColor, #Black)
SetGadgetText(0, "dolor sit amet, consectetuer adipiscing elit.<br/>Aenean commodo ligula eget dolor.<br/> Aenean massa.<br/> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.")
MessageRequester( "automatically adjust a text field to the required size" )
ResizeGadget(0, #PB_Ignore, #PB_Ignore, #PB_Ignore, 100)
ResizeGadget(1, #PB_Ignore, 120, #PB_Ignore,#PB_Ignore)
Debug "New GadgetHeight: " + Str(GadgetHeight(0))
If that possible. How can I find out the new size of the gadget? To position other gadgets exactly under it..
Anyone could help?
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: TextGadget with auto resize?

Post by Peter »

SpiderBasic inserts absolute values in the style tag of the corresponding gadget (and its sub-elements).
If you remove them, you can read the values calculated by the browser.

Code: Select all

OpenWindow(0, 0, 0, 0, 0, "", #PB_Window_Background)
SetWindowColor(0, #Green)
TextGadget(0, 10, 10, WindowWidth(0) - 20, 30, "",  #PB_Text_Border )
ButtonGadget(1, 10, 50, WindowWidth(0) - 20, 30, "Send form")
SetGadgetColor(0, #PB_Gadget_BackColor, #White)
SetGadgetColor(0, #PB_Gadget_FrontColor, #Black)
SetGadgetText(0, "dolor sit amet, consectetuer adipiscing elit.<br/>Aenean commodo ligula eget dolor.<br/> Aenean massa.<br/> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.")

GID = GadgetID(0)
! v_gid.div.style.height="";
! v_gid.gadget.style.height="";

ResizeGadget(1, #PB_Ignore, GadgetHeight(0) + 20, #PB_Ignore,#PB_Ignore)

Debug "New GadgetHeight: " + Str(GadgetHeight(0))
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: TextGadget with auto resize?

Post by Dirk Geppert »

Great!! :D Once again many thanks, Peter!
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: TextGadget with auto resize?

Post by Dirk Geppert »

Is it also possible to change the style of the EditorGadget () to make the size of the user freely adjustable?
Like the 'TextArea' on this forum Post editor..
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: TextGadget with auto resize?

Post by Peter »

Dirk Geppert wrote:Is it also possible to change the style of the EditorGadget () to make the size of the user freely adjustable?
Like the 'TextArea' on this forum Post editor..

Code: Select all

OpenWindow(0, 0, 0, 322, 150, "EditorGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
EditorGadget(0, 8, 8, 306, 133)
SetGadgetText(0, "This is a multiline text to edit" + #LF$ +
                 "in the EditorGadget()." + #LF$ +
                 "Third line")


GID = GadgetID(0)

! $(v_gid.gadget.containerNode).css("resize", "")
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: TextGadget with auto resize?

Post by Dirk Geppert »

Thank you Peter!

I've tried already a lot of known things, but .containerNode is new to me :-)
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: TextGadget with auto resize?

Post by Dirk Geppert »

Unfortunately I could not solve the following by myself:

- How to make the EditorGadegt non-transparent. When the user enlarges it, underlying elements of the web page should be hidden.

- How can I determine that the size is changed by the user?

Best Regards

Dirk
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: TextGadget with auto resize?

Post by Peter »

Dirk Geppert wrote:- How can I determine that the size is changed by the user?

Code: Select all

EnableExplicit

OpenWindow(0, 0, 0, 400, 200, "EditorGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
EditorGadget(0, 10, 10, 380, 180)
SetGadgetText(0, "This is a multiline text to edit" + #LF$ +
                 "in the EditorGadget()." + #LF$ +
                 "Third line")

Define GID = GadgetID(0)
Define newWidth, newHeight

! $(v_gid.gadget.containerNode).resizable({ // see https://api.jqueryui.com/resizable/
!   resize: function(event, ui) {
!     v_newwidth  = ui.size.width;
!     v_newheight = ui.size.height;

Debug "Resized! (w: " + newWidth + ", h: " + newHeight + ")"

!   }
! });

! $(v_gid.gadget.containerNode).parent().css("padding", "0");
Dirk Geppert wrote:- How to make the EditorGadegt non-transparent. When the user enlarges it, underlying elements of the web page should be hidden.
You can do this by using HideGadget()
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: TextGadget with auto resize?

Post by Dirk Geppert »

Thx Peter!

I tried it in this way, but in some cases , the resize will not triggered..

Code: Select all

EnableExplicit

Procedure MoveGadgets(h)
  Protected offset
  
  offset = h - 180
  ResizeGadget(1, #PB_Ignore, offset + 200, #PB_Ignore, #PB_Ignore)
  ResizeGadget(2, #PB_Ignore, offset + 250, #PB_Ignore, #PB_Ignore)
  
EndProcedure

OpenWindow(0, 0, 0, 400, 600, "Resizable EditorGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
EditorGadget(0, 10, 10, 380, 180)
ButtonGadget(1, 10, 200, 380, 30, "Button 1")
ButtonGadget(2, 10, 250, 380, 30, "Button 2")

SetGadgetText(0, "This is a multiline text to edit" + #LF$ +
                 "in the EditorGadget()." + #LF$ +
                 "Third line")

Define GID = GadgetID(0)
Define newWidth, newHeight

! $(v_gid.gadget.containerNode).resizable({ // see https://api.jqueryui.com/resizable/
!   resize: function(event, ui) {
!     v_newheight = ui.size.height;
!     f_movegadgets (v_newheight);
!   }
! });

! $(v_gid.gadget.containerNode).parent().css("padding", "0");
! $(v_gid.gadget.containerNode).css("resize", "")

With more than one EditorGadget() ... how can I send the coresponding GadgetID to the function?
Seems, it will only the last GadgetID stored..

Many thanks for your help!

Dirk
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: TextGadget with auto resize?

Post by Peter »

Dirk Geppert wrote:I tried it in this way, but in some cases , the resize will not triggered..
what do you mean by 'in some cases'? The code looks good to me.
Dirk Geppert wrote:With more than one EditorGadget() ... how can I send the coresponding GadgetID to the function?

Code: Select all

EnableExplicit

Procedure MoveGadgets(h)
  
  Protected offset
  
  offset = h - 180
  
  ResizeGadget(1, #PB_Ignore, offset + 200, #PB_Ignore, #PB_Ignore)
  ResizeGadget(2, #PB_Ignore, offset + 250, #PB_Ignore, #PB_Ignore)
  
EndProcedure

Procedure BindEditorGadgetResizeEvent(EditorGadget, Callback)
  
  If GadgetType(EditorGadget) <> #PB_GadgetType_Editor : ProcedureReturn : EndIf  
  
  Protected GID = GadgetID(EditorGadget)
  
  ! $(v_gid.gadget.containerNode).resizable({ // see https://api.jqueryui.com/resizable/
  !   resize: function(event, ui) {
  !     v_callback(ui.size.height);
  !   }
  ! });
  
  ! $(v_gid.gadget.containerNode).parent().css("padding", "0");
  ! $(v_gid.gadget.containerNode).css("resize", "")
  
EndProcedure


OpenWindow(0, 0, 0, 400, 600, "Resizable EditorGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
EditorGadget(0, 10, 10, 380, 180)
ButtonGadget(1, 10, 200, 380, 30, "Button 1")
ButtonGadget(2, 10, 250, 380, 30, "Button 2")

SetGadgetText(0, "This is a multiline text to edit" + #LF$ +
                 "in the EditorGadget()." + #LF$ +
                 "Third line")

BindEditorGadgetResizeEvent(0, @MoveGadgets())
Post Reply