SpiderBasic

- a basic to master the web -
https://forums.spiderbasic.com/

TextGadget with auto resize?

https://forums.spiderbasic.com/viewtopic.php?t=2024

Page 1 of 2

TextGadget with auto resize?

Posted: Mon Nov 02, 2020 2:14 pm
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?

Re: TextGadget with auto resize?

Posted: Mon Nov 02, 2020 8:22 pm
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))

Re: TextGadget with auto resize?

Posted: Tue Nov 03, 2020 7:44 am
by Dirk Geppert
Great!! :D Once again many thanks, Peter!

Re: TextGadget with auto resize?

Posted: Thu Nov 05, 2020 10:28 am
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..

Re: TextGadget with auto resize?

Posted: Thu Nov 05, 2020 11:04 am
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", "")

Re: TextGadget with auto resize?

Posted: Thu Nov 05, 2020 11:24 am
by Dirk Geppert
Thank you Peter!

I've tried already a lot of known things, but .containerNode is new to me :-)

Re: TextGadget with auto resize?

Posted: Mon Nov 09, 2020 5:53 pm
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

Re: TextGadget with auto resize?

Posted: Mon Nov 09, 2020 6:49 pm
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()

Re: TextGadget with auto resize?

Posted: Tue Nov 10, 2020 4:13 pm
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

Re: TextGadget with auto resize?

Posted: Tue Nov 10, 2020 7:40 pm
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())
All times are UTC
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited