Automatic change of Row Height with WordWrap ?
Posted
#1
(In Topic #659)
Regular

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.
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.
You eat an elephant one small bite at a time.
Posted
Regular

Old african saying:
You eat an elephant one small bite at a time.
You eat an elephant one small bite at a time.
Posted
Guru

Posted
Guru

<IMG src="https://www.cogier.com/gambas/TextLabel1.png">
</IMG><IMG src="https://www.cogier.com/gambas/TextLabel2.png">
</IMG>Code (gambas)
- .H = 500
- .W = 600
- .Arrangement = Arrange.Vertical
- .Padding = 15
- .text = GetText()
- .Background = Color.LightBackground
- .padding = 5
- sText &= "<Div align = center><h1><b><u>Welcome</h1></b></u><Div align = left>"
- sText &= "<b><i>This line uses HTML Bold & Italic</i></b><br>and switches them of in the next line<p>"
- 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>"
- 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>"
- sText &= "<p><h3><Div align = center>Don't use<b> GridView </b> just use a <b>TextLabel</b></h3><p>."
- sText &= "<h2><s>Gridview</s> H<sub>2</sub>SO<sub>4</sub> - 9<sup>th </sup>May</H2><p>"
- sText &= "<h2><Div align = right>Right align!<Div align = left></h2>"
- sText &= "<H4><font color =#FF00FF>This text is in pink</font><br />"
- sText &= "<font color =blue>This text is blue</font></h4>"
- Return sText
Posted
Regular

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)
- ' Gambas class file
- sText = "Peter Piper picked a peck of pickled peppers. How many pickled peppers did Peter Piper pick?"
- iTextWidth = hRect.W ' we don't need this as we know the width
- iTextHeight = hRect.H ' this will be the height you need
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 …
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.
You eat an elephant one small bite at a time.
Posted
Guru

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)
- MyGrid.Rows[0].Height = MyGrid[0,0].Font.RichTextHeight(MyGrid.Rows[0, 0].Text, MyGrid.Rows[0, 0].Width)
Posted
Regular

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.
You eat an elephant one small bite at a time.
Posted
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.
Posted
Enthusiast

Posted
Regular

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.
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 …
Old african saying:
You eat an elephant one small bite at a time.
You eat an elephant one small bite at a time.
Posted
Guru

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)
- ' Gambas class file
- .Center
- .Height = 500
- .Width = 400
- .Arrangement = Arrange.Vertical
- .Padding = 50
- 'Trying to use a panel and placing MyGrid on it
- 'to create a border around MyGrid. Didn't work ...
- .Border = Border.Etched ''***************************
- .padding = 2
- .Arrangement = Arrange.Fill ''***************************
- .Background = &H00FF00FF&
- .rows.Count = 20
- .columns.Count = 1
- .Background = &HFFFFFFFF&
- .Padding = 6
- .width = 60
- .height = 20
- .text = "Click to activate grid"
- With MyGrid
- Number = 0
- .[0, 0].Alignment = Align.Center 'This takes care of the 'no center' HTML problem
- .[0, 0].RichText = GetText() 'RichText can be used, even if there's no HTML markup
- .Rows[0].Height = -1 ''***************************
- Number = 1
- .[1, 0].RichText = GetText()
- .Rows[1].Height = -1 ''***************************
- Number = 2
- .[2, 0].RichText = GetText()
- .Rows[2].Height = -1 ''***************************
- Number = 3
- .[3, 0].RichText = GetText()
- .Rows[3].Height = -1 ''***************************
- 'The data to be used in the GridView will be read from an external file.
- Edit$[0] = "Welcome"
- Edit$[1] = "<b><i>This line uses HTML Bold & Italic</i></b><br>and switches them of in the next one</br>"
- Edit$[2] = "Lorem ipsum ... Yeah, I know ..."
- 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>"
- Text$ = Edit$[Number]
- Return Text$
- ' If MyGrid.Grid = False Then
- ' MyGrid.Grid = True
- ' Else
- ' MyGrid.Grid = False
- ' End If
Posted
Regular

Let’s go back to the very beginning of this topic:
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: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.”
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”.With MyGrid = New GridView(MyPanel) As "MyGrid"
.Rows.Count = 20
.Rows.Height = -1
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)
Code (gambas)
- ' Gambas class file
- .Center
- .Height = 500
- .Width = 600 'Try with different widths if you like
- .top = 10
- .rows.Count = 4
- .columns.Count = 3
- .height = .Rows.height * .Rows.Count + .Rows.height
- .Columns.Width = .width / 3
- .Padding = 4
- MyGrid[0, 0].RichText = "Please click here"
- H = 0
- .ColumnSpan = 3
- .Alignment = Align.Center
- .RichText = "Welcome !"
- .RichText = "<b><i>This line uses HTML Bold & Italic</i></b><br>and switches them of in the next one</br>"
- .Alignment = Align.TopRight
- .RichText = "As you will notice, the row's "
- .Alignment = Align.TopLeft
- .RichText = "height gets set by the largest content in any of the cells in the row"
- .Alignment = Align.TopNormal
- .RichText = "This Works with 'spanned' cells as well</br>"
- .ColumnSpan = 2
- .Alignment = Align.TopNormal
- .RichText = "Susie works in a shoeshine shop. <br>Where she shines she sits, and where she sits she shines</br>"
- .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>"
- ' This part has to be placed after the cell contents have been set.
- MyGrid.Rows[R].Height = -1
- H = H + MyGrid.Rows[R].Height
- MyGrid.height = H
Old african saying:
You eat an elephant one small bite at a time.
You eat an elephant one small bite at a time.
Posted
Guru

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>
1 guest and 0 members have just viewed this.



