Show text in two columns

[magosk]

I have a couple of pages in my mobile web application where I want to display several rows of type "<title>: <value>" (e.g. "Active: 47"), where I would like the value texts to have a common left position. Also, I should mention that the value texts could have varying (font) color. For an example how it looks today (without the value text left alignment I would like), see the images in

http://www.cgdevtools.com/cgforum/viewtopic.php?f=85&t=843

How would you easiest do this using your components? Can you e.g. use the TIWCGJQMGridPanel? (I have not figured out how to use it, so an example would be appreciated). Or can you simply do it with TIWCGJQMLabel controls with a specially formatted Text string? (my HTML skills are unfortunately not that good, I have mostly worked with web frameworks like IntraWeb, so an example would be needed in this case as well)

[Alexander Bulei]

Hi magosk,

You can use TIWCGJQMLabel .Text property to insert html table element.

Example:

.css code

myvaluecss{
	color: green;
}

delphi code

TIWCGJQMLabel .Text:= '<table><tr><td>Text:</td><td class="myvaluecss">Value</td></tr><tr><td>Text:</td><td class="myvaluecss">Value</td></tr><tr><td>Text:</td><td class="myvaluecss">Value</td></tr><tr><td>Text:</td><td class="myvaluecss">Value</td></tr></table>'

my HTML skills are unfortunately not that good, I have mostly worked with web frameworks like IntraWeb, so an example would be needed in this case as well

You can find a lot of examples of usage of table at web.


You can also use the TIWCGJQMGridPanel.
Add panels with "right click"->"add panel" and then drop the labels at each panel.

Best Regards.

[magosk]

Thanks, excellent!

Just a couple of follow-up question on the grid panel:
1. If you have two columns of panels, must they always have equal width?
2. Can you affect the padding inside the panels (I would like to lower it a bit in order to fit more content)?
3. When I add a label to a panel and have a long text, the text gets cut off rather than wrapped, despite having AutoHeight = True for the label. Does the "panel rows" not autosize themselves?

/Magnus

[magosk]

Hi again!

Do you have any answers for the above follow-up questions on TIWCGJQMGridPanel?

[Alexander Bulei]

Hi magosk

1. If you have two columns of panels, must they always have equal width?

Yes, you can read more about this widget here: http://jquerymobile.com/demos/1.3.0/docs/widgets/grids/

2. Can you affect the padding inside the panels (I would like to lower it a bit in order to fit more content)?

From documentation:

Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.

3. When I add a label to a panel and have a long text, the text gets cut off rather than wrapped, despite having AutoHeight = True for the label. Does the "panel rows" not autosize themselves?

Look at first answer.

Best Regards.