LiveCode Forums.

Hi there. I just downloaded the demo of Revolution Studio last week and managed to have a fiddle with it over the weekend. It looked quite fun and I think I'll go ahead and purchase it later tonight. As I was fumbling around with all this newness I usually found solutions to any issues I was having by going through the tutorials and searching through this forum, so thanks to all those who help out around here.

One issue I had which I couldn't find an answer to was this:

Lets say I have a list field and I'm going to populate it with a bunch of lines. Each line will have an image and then some text next to it. My images are all the same size so I set the line height in the list field to say 30. Then I go and populate the list, using that imageSource or whatever to change the first character of each line to the image I want.

This all works fine, except that...the text in each line of the list field is vertically aligned to the bottom of it's corresponding image, which is the base of the line height. I would like it to be centered with the image instead (the middle of the line height). Is there a way to do this?

Apologies if this is a stupid question or has been answered before - I did a search but only found a post about centering the entire content, not the text of each line.

As far as i know, there's no way to change that, unless you add white space at the top of your image, with your image editor. Fields are generally not very good at layouting stuff.
However, it's easy to use fields and other objects within groups to create what you want (for example the tutorial listings are made like that).

edit: changed bottom to top in text above, but not sure if it even would work

Thanks for the reply BvG.

I don't think adding whitespace to the top of the image would help in this case, because the text would still be vertically aligned to the base of the row. So if we forget about images for the moment and just set the line height of the list field, then the text would still be at the bottom for each row…yeah? With a line height of 100 you would get 80 something pixels of whitespace at the top of each row, and then the text at the bottom.

I'm trying to think of how I would go about using groups to solve this. I could ditch the list field altogether and instead have an initial group and then dynamically create new groups to put inside that group (each new group containing the image and text), but then I would have to implement the selection behaviour myself and presumably all the positioning and so forth. This seems needlessly complex for what I thought would be a trivial issue on an otherwise acceptable list field control. I guess I could give it a shot if there's no alternative…

Perhaps the runrev people should look at providing a vertical alignment property for the text contents of such controls?

Hello Twit,

Sounds like a great idea for a new feature. I know I've had some problems along the same lines and haven't found a smart way to fix it yet, but I'm still somewhat new at programming, so it's not saying much.

Just wanted to let you know that at the very top of the forum index, you'll find a forum called, "Feature Requests," which the Revolution people look at right away to see what new ideas they might incorporate into future editions.

Now might be a good time to put your idea in there since it sounds like they will be coming out with Version 2.9 soon, and Version 3.0 will be hot on its trail... most likely well in time for the Conference.

Cheers, deeverd

For me, the only solution I could find was using a html file in the list itself which has the images on the left of the list, and each image using the "<sub>" subscript html tag. Mind you, my images are only 16x16 and the line height is near the same.
But it seems to have done the job for me. The icons are now with the text to the right.

This might work for you, but you'll have to play with that and see if the image size you are using, the text size and line height all work out for you.

If you're unsure how to set a list to use html, look up "htmltext" in the documents.

It'll be something like
With the ...... representing which method you decide to use to get the data for your list. You can load it from a local file or from a variable that you may have just created the html text with.

Hi,

Like Garrett, I too had small pictures (22x22 px) to add to a list. In an image editore, I added transparent space to the top of the pictures. That made them sit nicely on the bottom of the line.

I believe, however, that Twit should make an invisible template group containing an image object, or maybe just a button, and a field. Clone the group, set its dimensions, set the imagedata or filename of the image object or set the icon of the group to the id of the original image object and make the group visible. Repeat this as often as necessary.

If you want to have a scrolling list of groups, use the copy command to copy the template group into another existing group. Set the lockLoc of that main group to true and set the vScrollbar of that group also to true. You will need to do a little tweaking, you need to set the scroll after adding a new group for instance. Post more questions if you need help.

Best,

Mark

The solution I thought of doing was to just write my list in a proper external html file with all the formatting I want and a little bit of javascript for row selection, and then load it in a browser and trap dummy navigation to urls that I placed in the html to determine what was clicked. I thought this was rather clever until I learned that someone may have already written a tutorial about it (haven't looked at it yet).

I need to get back to this though. Hopefully I'll have some time for it soon, but I was also planning to use some XML functionality and was a bit turned off by the goings on here. Given that every OS has in-built XML support, why would you make your own that doesn't even support basic xpath? I'm assuming I won't be able to use XSLT either, which is going to make what I was intending to do a bit fiddly and annoying.

Don't forget the textShift property.
This just worked in a quick test.

Best,

Mark