Automatic change of Row Height with WordWrap ?

Post

Posted
Rating:
#1 (In Topic #659)
Regular
Doctor Watson is in the usergroup ‘Regular’
Hi.
In my search for a suitable way to display HTML rich text I discovered that a nice solution for my project would be to ‘abuse’ a GridView control for that purpose. The formatting possibilities of the grid itself and it’s cells, combined with the Rich Text displayed in those cells are manifold.
I  have created a small project to demonstrate this.
It uses a GridView with only one column to display differently formatted text in each cell.
Attachment
Works fine for me, but there is one problem that – if solved – would make it really ideal: how to fit text in each cell. To do this, I have to set each cell’s height so that the text will be visible as it should. That can of course be done, but the intention is to use this to display help text or instructions in different languages. As we know, some languages need more words to explain things. And that will or can ruin the layout.
The solution would be that Rows[x].Height changes automatically when any cell in that row ‘WordWraps’ it’s content.
Either I don’t find it, or it’s not possible (yet). I found a topic about this here:
https://gambas-user.na…bas-3-grid-table-question
where Benoit Minisini writes:
“In Gambas 3, WordWrap is a property attached to the cell. And to adjust the
width of a row or a column, you must set its height (or width) to "-1". But,
if I remember well, it is not implemented in gb.gtk yet.”
However, that post is 10 years old ….
It didn’t work when I tried. Has a solution been found since then?

 Old african saying:
You eat an elephant one small bite at a time.
Online now: No Back to the top

Post

Posted
Rating:
#2
Regular
Doctor Watson is in the usergroup ‘Regular’
Sorry, forgot to mention: when you run the project, clicking on the grid will toggle grid lines on and off.

 Old african saying:
You eat an elephant one small bite at a time.
Online now: No Back to the top

Post

Posted
Rating:
#3
Guru
BruceSteers is in the usergroup ‘Guru’
You can do it manually using RichTextSize command

Code (gambas)

  1.  
  2. Dim hRect As Rect
  3. hRect = Me.Font.RichTextSize(sText, iWidth)
  4.  
  5. iTextWidth = hRect.W ' we don't need this as we know the width
  6.  
  7. iTextHeight = hRect.H ' this will be the height you need
  8.  
  9.  
Online now: No Back to the top

Post

Posted
Rating:
#4
Avatar
Guru
cogier is in the usergroup ‘Guru’
I think you would be better off with a TextLabel. I have looked at your code and modified it, hopefully this will help. See what happens when the form is resized.

<IMG src="https://www.cogier.com/gambas/TextLabel1.png"> </IMG><IMG src="https://www.cogier.com/gambas/TextLabel2.png"> </IMG>

Code (gambas)

  1. TextLabel1 As TextLabel
  2.  
  3. Public Sub Form_Open()
  4.  
  5.   With Me
  6.     .H = 500
  7.     .W = 600
  8.     .Arrangement = Arrange.Vertical
  9.     .Padding = 15
  10.  
  11.   With TextLabel1 = New TextLabel(Me) As "TextLabel1"
  12.     .Expand = True
  13.     .text = GetText()
  14.     .Background = Color.LightBackground
  15.     .padding = 5
  16.  
  17.  
  18. Public Sub GetText() As String
  19.  
  20.   Dim sText As String
  21.  
  22.   sText &= "<Div align = center><h1><b><u>Welcome</h1></b></u><Div align = left>"
  23.   sText &= "<b><i>This line uses HTML Bold & Italic</i></b><br>and switches them of in the next line<p>"
  24.   sText &= "<i>And now let's see what happens with some very long text.</i><br>" "</br><br><b>WordWrap does work, but it would be ideal if the row's height could change with it.</b><p>"
  25.   sText &= "<b><font color =red>I chose the title because it seems to touch on so much of what’s exciting and what’s threatening, too, about blogging and all the other changes that we call, collectively, the digital revolution. “Say everything”: the phrase suggests the thrill of the universal project the Web sometimes seems to be, in which everyone gets to contribute to a vast collective conversation and pool of knowledge. “Say everything” also raises all kinds of questions about this new world. If we say everything, how will we have time to listen? And, “Aren’t some things better left unsaid?” So these are some of the things I’m going to look at today.</font></b><br><p>"
  26.   sText &= "<p><h3><Div align = center>Don't use<b> GridView </b> just use a <b>TextLabel</b></h3><p>."
  27.   sText &= "<h2><s>Gridview</s>  H<sub>2</sub>SO<sub>4</sub> - 9<sup>th </sup>May</H2><p>"
  28.   sText &= "<h2><Div align = right>Right align!<Div align = left></h2>"
  29.   sText &= "<H4><font color =#FF00FF>This text is in pink</font><br />"
  30.   sText &= "<font color =blue>This text is blue</font></h4>"
  31.  
  32.   Return sText
  33.  
Online now: No Back to the top

Post

Posted
Rating:
#5
Regular
Doctor Watson is in the usergroup ‘Regular’
Cogier : Thanks for the HTML demonstration. It seems that a lot more is possible than mentioned in the Gambas manual (/doc/richtext - Gambas Documentation) .
I will however need the best of both worlds and use a GridView when I want to display graphics and text in one or more columns.

Bruce : Sorry, seems that doesn’t work. I suppose I’ve added the necessary declarations and copied your code.

Code (gambas)

  1. ' Gambas class file
  2.  
  3. Public iHeight As Integer
  4. Public iTextWidth As Integer
  5. Public iTextHeight As Integer
  6.  
  7. Public Sub Form_Open()
  8.  
  9. sText = "Peter Piper picked a peck of pickled peppers. How many pickled peppers did Peter Piper pick?"
  10.  
  11. Dim hRect As Rect
  12. hRect = Me.Font.RichTextSize(sText, iWidth)
  13. iTextWidth = hRect.W   ' we don't need this as we know the width
  14. iTextHeight = hRect.H  ' this will be the height you need
I got an error : Unknown symbol ‘RichTextSize’ in class ‘Font’ in Form ….
I tried to figure out what was wrong – typing error perhaps – so I started to enter that line ‘manually’  ;)
And was presented with this when I arrived at …
Image

(Click to enlarge)

There is no RichTextSize.
One more question – provided RichTextSize can be made to work : I suppose I can use
hRect = MyGrid[0,0].Font.RichTextSize(sText, iWidth)
If so, I can indeed determine the hight to set Row 0 to.

 Old african saying:
You eat an elephant one small bite at a time.
Online now: No Back to the top

Post

Posted
Rating:
#6
Guru
BruceSteers is in the usergroup ‘Guru’
Odd , i copy and pasted the text straight from the Label.class in gb.gui.base…

I just checked and have Font.RichtextSize on Form, Me, and Gridview using gambas 3.16


Also i noticed in your code example That iWidth was not given a value

RichTextHeight should do the same then.
(no need to use Rect just use an integer)

Maybe this one liner…

Code (gambas)

  1.  
  2. MyGrid.Rows[0].Height = MyGrid[0,0].Font.RichTextHeight(MyGrid.Rows[0, 0].Text, MyGrid.Rows[0, 0].Width)
  3.  
  4.  
Online now: No Back to the top

Post

Posted
Rating:
#7
Regular
Doctor Watson is in the usergroup ‘Regular’
 I just found something, but it’s way beyond my pay grade.
I checked the project properties and noticed that in ‘Components’ ‘gb.qt4’ is disabled.
I tried to enable it, but got a message that gb.gui and gb.qt4 are incompatible.
So I disabled gb.gui and now RichTextSize no longer gives an error.
But many controls have now diappeared.
Does this mean anything to you?

 Old african saying:
You eat an elephant one small bite at a time.
Online now: No Back to the top

Post

Posted
Rating:
#8
Guru
BruceSteers is in the usergroup ‘Guru’

Doctor Watson said

I just found something, but it’s way beyond my pay grade.
I checked the project properties and noticed that in ‘Components’ ‘gb.qt4’ is disabled.
I tried to enable it, but got a message that gb.gui and gb.qt4 are incompatible.
So I disabled gb.gui and now RichTextSize no longer gives an error.
But many controls have now diappeared.
Does this mean anything to you?

gb.gui is a switcher component.  it checks your system and loads either gb.gtk2 gb.gtk3 gb.qt4 or gb.qt5 depending on your system.
so you can't have gb.qt4 and gb.gui together

independently they can lack some features.
I think gb.gui loads gb.gui.base and translates some gtk/qt things for overall compatibility.
but loading one or the other explicitly will limit you to only the components in the gui class.

i am only using gb.gui and i have RichTextSize()
Just use RichTextHeight()
it's less complicated and you are able to see that command.
Online now: No Back to the top

Post

Posted
Rating:
#9
Avatar
Enthusiast
PJBlack is in the usergroup ‘Enthusiast’
for me RichTextSize works perfect with qt4 qt5 gtk2 gtk3 …

if you want to use Font.RichTextSize("BlahBlubb") you need an object too ->

Code (gambas)

  1. SomeObjectWithFontProperty.Font.RichTextSize("BlahBlubb")
  2.  
or you can do like

Code (gambas)

  1. Dim Test as New Font
  2. Test.Font.RichTextSize("BlahBlubb")
Online now: No Back to the top

Post

Posted
Rating:
#10
Regular
Doctor Watson is in the usergroup ‘Regular’
Hi everybody
I’ve been rather busy to get this project working. As Cogier pointed out, it could perhaps be written entirely in HTML, but there are options – for me at least – can be achieved easier with GridView, combined with it’s option to edit cells with HTML.
I suppose things would be easier if I could use RichTextSize but – PJBlack – I tried it once more and no result on this machine. Or is it me ?  :?
I have now a new version of a grid that really works after much trial & error.  :P
First, RichRextHeight only sets the cell’s height to fit text ‘written’ with a choosen Font. When a long text gets wrapped, the cell’s height just stays the same. But you can use the text width and the cell’s width. Now the tricky part was how to count the number of text lines in the cell.
Then you just multiply cell height with the number of lines.
Have a look and play with a different font and size in line 64 and the text in lines 86 to 94.
I only tested what happens with HTML markup I want to use. Do not use <p> or <h1> as that will ruin things.
It would be nice if everything worked already perfectly. Not so. With some font sizes or certain text lenghts, the lines routine counts one or two lines where it shouldn’t. When gridlines are turned off, this is hardly noticed but I would like to get this completely right.
Back to the drawing table …
Attachment

 Old african saying:
You eat an elephant one small bite at a time.
Online now: No Back to the top

Post

Posted
Rating:
#11
Avatar
Guru
cogier is in the usergroup ‘Guru’
1/. The reason the panel you wanted did not work is that you needed to 'Arrange' it so the GridView could expand.
2/. It took some experimentation, but I think you will find that the cells will now auto adjust.
3/. The .Font.Underline works for me.

<IMG src="https://www.cogier.com/gambas/GViewProject.png"> </IMG>

Here is the modified code: -

Code (gambas)

  1. ' Gambas class file
  2.  
  3. Public MyPanel As Panel     'Something for later ...
  4. Public MyButton As Button
  5. Public Edit$ As New String[20]
  6.  
  7. Public Sub Form_Open()
  8.  
  9.   With Me
  10.     .Center
  11.     .Height = 500
  12.     .Width = 400
  13.     .Arrangement = Arrange.Vertical
  14.     .Padding = 50
  15.  
  16.   With MyPanel = New Panel(Me) As "MyPanel"
  17.     'Trying to use a panel and placing MyGrid on it
  18.     'to create a border around MyGrid. Didn't work ...
  19.     .Border = Border.Etched     ''***************************
  20.     .Expand = True
  21.     .padding = 2
  22.     .Arrangement = Arrange.Fill ''***************************
  23.     .Background = &H00FF00FF&
  24.  
  25.   With MyGrid = New GridView(MyPanel) As "MyGrid"  'New GridView(Me.MyPanel) ???
  26.     .rows.Count = 20
  27.     .columns.Count = 1
  28.     .ScrollBar = False
  29.     .NoTabFocus = True
  30.     .expand = True
  31.     .Background = &HFFFFFFFF&
  32.     .border = True
  33.     .Grid = False
  34.     .Padding = 6
  35.  
  36.   With MyButton = New Button(Me) As "MyButton"
  37.     .NoTabFocus = True
  38.     .width = 60
  39.     .height = 20
  40.     .text = "Click to activate grid"
  41.  
  42.  
  43.  
  44. Public Sub MyButton_click()
  45.  
  46.   With MyGrid
  47.     Number = 0
  48.     .[0, 0].Alignment = Align.Center  'This takes care of the 'no center' HTML problem
  49.     .[0, 0].Font = Font["Arial,16,Bold"]
  50.     .[0, 0].RichText = GetText()    'RichText can be used, even if there's no HTML markup
  51.     .Rows[0].Height = -1           ''***************************
  52.  
  53.     Number = 1
  54.     .[1, 0].Font = Font["Comic sans,8"]
  55.     .[1, 0].WordWrap = True
  56.     .[1, 0].RichText = GetText()
  57.     .Rows[1].Height = -1           ''***************************
  58.  
  59.     Number = 2
  60.     .[2, 0].Font = Font["Arial,12"]
  61.     .[2, 0].Font.Underline = True   'This doesn't seem to work, but doesn't produce an error either
  62.     .[2, 0].WordWrap = True
  63.     .[2, 0].RichText = GetText()
  64.     .Rows[2].Height = -1           ''***************************
  65.  
  66.     Number = 3
  67.     .[3, 0].Font = Font["Times,9"]
  68.     .[3, 0].WordWrap = True
  69.     .[3, 0].RichText = GetText()
  70.     .Rows[3].Height = -1           ''***************************
  71.  
  72.  
  73. Public Sub GetText() As String
  74.  
  75.   'The data to be used in the GridView will be read from an external file.
  76.  
  77.   Edit$[0] = "Welcome"
  78.   Edit$[1] = "<b><i>This line uses HTML Bold & Italic</i></b><br>and switches them of in the next one</br>"
  79.   Edit$[2] = "Lorem ipsum ... Yeah, I know ..."
  80.   Edit$[3] = "<i>And now let's see what happens with some very long text.</i><br>" "</br><br><b>WordWrap does work, but it would be ideal if the row's height could change with it.</b></br>" "</br><br><b>WordWrap does work, but it would be ideal if the row's height could change with it.</b></br>" "</br><br><b>WordWrap does work, but it would be ideal if the row's height could change with it.</b></br>"
  81.  
  82.   Text$ = Edit$[Number]
  83.   Return Text$
  84.  
  85.  
  86. Public Sub MyGrid_Click()
  87.  
  88.   MyGrid.Grid = Not MyGrid.Grid
  89.  
  90.   ' If MyGrid.Grid = False Then
  91.   '   MyGrid.Grid = True
  92.   ' Else
  93.   '   MyGrid.Grid = False
  94.   ' End If
  95.  
  96.  
Online now: No Back to the top

Post

Posted
Rating:
#12
Regular
Doctor Watson is in the usergroup ‘Regular’
Well I’ll be damned!  All hail Cougier!
Let’s go back to the very beginning of this topic:
The solution would be that Rows[x].Height changes automatically when any cell in that row ‘WordWraps’ it’s content.
Either I don’t find it, or it’s not possible (yet). I found a topic about this here:
https://gambas-user.na…om/CSTpFWV … e-question
where Benoit Minisini writes:
“In Gambas 3, WordWrap is a property attached to the cell. And to adjust the
width of a row or a column, you must set its height (or width) to "-1". But,
if I remember well, it is not implemented in gb.gtk yet.”
Right there I got it wrong. As I wanted all of the GridView cells to adapt their Hight, I did put the command with the ‘general’ properties of MyGrid:
With MyGrid = New GridView(MyPanel) As "MyGrid"
    .Rows.Count = 20
    .Rows.Height = -1
And as this doesn’t produce an error, I assumed Benoit was right with “if I remember well, it is not implemented in gb.gtk yet”.
Only it had been, but I hadn’t cosidered setting Row Height at Cell level.
I have played a bit with the possibilities this property offers, such as applying it to a whole GridView. Just run the code below.
PS :

Code (gambas)

  1. MyGrid.Grid = Not MyGrid.Grid
: Thanks once more Cogier. Never heard about that method before.

Code (gambas)

  1. ' Gambas class file
  2.  
  3. Public Sub Form_Open()
  4.  
  5.     .Center
  6.     .Height = 500
  7.     .Width = 600       'Try with different widths if you like
  8.  
  9.   With MyGrid = New GridView(Me) As "MyGrid"
  10.     .width = Me.width - 20
  11.     .left = 10
  12.     .top = 10
  13.     .rows.Count = 4
  14.     .columns.Count = 3
  15.     .height = .Rows.height * .Rows.Count + .Rows.height
  16.     .Columns.Width = .width / 3
  17.     .ScrollBar = False
  18.     .NoTabFocus = True
  19.     .border = True
  20.     .Grid = True
  21.     .Padding = 4
  22.  
  23.   MyGrid[0, 0].RichText = "Please click here"
  24.    
  25.   End
  26.  
  27. Public Sub MyGrid_Click()
  28. Dim X, R, C, H As Integer
  29. H = 0
  30.  
  31. With MyGrid[0, 0]
  32.   .ColumnSpan = 3
  33.   .Alignment = Align.Center
  34.   .Font = Font["Arial,18,bold"]
  35.   .RichText = "Welcome !"
  36.  
  37. With MyGrid[1, 0]
  38.     .Font = Font["Comic sans,10"]
  39.     .RichText = "<b><i>This line uses HTML Bold & Italic</i></b><br>and switches them of in the next one</br>"
  40.  
  41. With MyGrid[1, 1]
  42.     .Font = Font["Comic sans,9"]
  43.     .Alignment = Align.TopRight
  44.     .RichText = "As you will notice, the row's "
  45.  
  46. With MyGrid[1, 2]
  47.     .Font = Font["Comic sans,9"]
  48.     .Alignment = Align.TopLeft
  49.     .RichText = "height gets set by the largest content in any of the cells in the row"
  50.  
  51. With MyGrid[2, 0]
  52.     .Alignment = Align.TopNormal
  53.     .font = Font["Utopia,11,underline"]
  54.     .RichText = "This Works with 'spanned' cells as well</br>"
  55.  
  56. With MyGrid[2, 1]
  57.     .ColumnSpan = 2
  58.     .Alignment = Align.TopNormal
  59.     .RichText = "Susie works in a shoeshine shop. <br>Where she shines she sits, and where she sits she shines</br>"
  60.  
  61. With MyGrid[3, 2]
  62.     .Font = Font["Comic sans,8"]
  63.     .RichText = "Peter Piper picked a peck of pickled peppers<br>A peck of pickled peppers Peter Piper picked</br><br>If Peter Piper picked a peck of pickled peppers</br><br>Where’s the peck of pickled peppers Peter Piper picked?</br>"
  64.  
  65. ' This part has to be placed after the cell contents have been set.
  66. For R = 0 To 3
  67.   For C = 0 To 2
  68.     MyGrid[R, C].WordWrap = True
  69.     MyGrid.Rows[R].Height = -1
  70.   Next
  71.   H = H + MyGrid.Rows[R].Height
  72.  
  73. MyGrid.height = H
  74.  
  75.  

 Old african saying:
You eat an elephant one small bite at a time.
Online now: No Back to the top

Post

Posted
Rating:
#13
Avatar
Guru
cogier is in the usergroup ‘Guru’
I'm glad it helped. I have tried your code which works well.

Before publishing code I suggest you run from the Project menu Compile all. This would have told you about the unused variables. Also, there is no need to make H = 0 as it is that when you create it.

<IMG src="https://www.cogier.com/gambas/CompileAll.png"> </IMG>
Online now: No Back to the top
1 guest and 0 members have just viewed this.