HTML + SmartClient

[moonlight]

Hi!

how can i insert, for example button, into html table cell without setting exact button position?
i mean, if i change table's size(height, width) loading there different image, i would still have this button in same table cell.

i hope it is clear what i wrote.

thanks in advance!

[moonlight]

i've already solved it ;)

[Diether]

Hi there,

I'm currently facing a similar problem, so it would be helpful if you could post your solution.

I'm trying to build a rather complex HTML table with SmartClient Labels that accept drag & drops. I can position the Labels where I want them using the position : "relative" property.

However, this table is in a scrollable DIV and when scolling , only the HTML table moves, while the SmartClient Labels stay in place.

Any ideas?

Best regards,
Diether

[moonlight]

Hi!

As You said, i just use "relative" property, and it works fine, but i've no idea what to do to solve Your problem, sorry,

Hope You'll find solution quickly,

Regards

[Isomorphic]

Diether can you show sample code?

[Diether]

It is just a table with labels in its cells that is placed in a scrollable div.
It is placed in a page with a fixed width. So when this gets to large, a horizontal scrollbar appears.

Here is a part of the code:

<div style="overflow-x:scroll;" >
<table width="100%">
	<tr>
		<td>
			<script>
				isc.CellLabel.create({id:'<c:out value="${currentNode.id}"/>', contents:'<c:out value="${currentNode.id}"/>   <c:out value="${currentNode.description}"/> '})
			</script>
		</td>
			
		<c:if test="${currentNode.leaf}">
			<td align= "right">
				<html:text name="advancedTechSpecOverviewForm" property="value[${currentNode.id}]"/>
			</td>
		</c:if>
	</tr>
</table>
</div>

And this is the CellLabel:

isc.defineClass("CellLabel", "Label").addProperties({
		height:10,
		width: "100",
		align: "center",
		showEdges: true,
		position:"relative",
		canAcceptDrop: true,		
		drop: "onCellDrop(this)",
		dropOver: "this.setBackgroundColor('#ffff80')",
    	dropOut: "this.setBackgroundColor('#CCCCCC')"
})

Everything works fine as long as you don't have to scroll.
Let me know if you need some more information.

[Isomorphic]

Hi Diether
The problem is to do with how the edges for the canvas are rendered out.
You can solve this issue by enclosing your label in a parent, and setting position:"relative" on the parent (and leaving the label position:"absolute").

Something like this

<script>
isc.defineClass("CellLabel", "Label").addProperties({
		height:10,
		width: "100",
		align: "center",
		showEdges: true,
		canAcceptDrop: true,		
		drop: "onCellDrop(this)",
		dropOver: "this.setBackgroundColor('#ffff80')",
    	dropOut: "this.setBackgroundColor('#CCCCCC')"
})
</script>

<div style="overflow-x:scroll;width:300px;" >
<table width="800">
	<tr>
		<td>
			<script>
                                isc.Canvas.create({
                                    position:"relative", width:1, height:1, 
                                    overflow:"visible",
                                    autoDraw:true,
                                    children:[
                                        isc.CellLabel.create({id:'foo', contents:'moo'})
                                    ]
                               });
			</script>
		</td>
			
		<td align= "right">
                   SOME CONTENT FOR THE CELL
                </td>
	</tr>
</table>
</div>

[Diether]

Thanks for the reply.
But I can't seem to get it to work (neither with my code or a copy/pase of the code you posted).
The labels still don't scroll.

If you use align left instead of right:

<td align= "left">
         SOME CONTENT FOR THE CELL
</td>

You see that the 'SOME CONTENT FOR THE CELL' scroll over the label.

[Isomorphic]

It's unclear how to proceed on this - it's working for us against the 6.5.1 build in both Internet Explorer and Firefox.
This is a pretty fundamental example of relative positioning and would be very surprising if it didn't work.

Here's a complete HTML page you can try (ensure you replace the paths with paths to your SmartClient modules if necessary)

<HTML><HEAD><TITLE>Simple RelPos Test</TITLE>

<SCRIPT>window.isomorphicDir='../../isomorphic/';</SCRIPT>
<SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>

<SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
<SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
<SCRIPT SRC=../../isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY>

<script>
isc.defineClass("CellLabel", "Label").addProperties({
    height:10,
    width: "100",
    align: "center",
    showEdges: true,
    canAcceptDrop: true,		
    drop: "onCellDrop(this)",
    dropOver: "this.setBackgroundColor('#ffff80')",
    dropOut: "this.setBackgroundColor('#CCCCCC')"
})
</script>

<div style="overflow-x:scroll;width:300px;" >
<table width="800">
    <tr>
        <td>
            <script>
                isc.Canvas.create({
                    position:"relative", width:1, height:1, 
                    overflow:"visible",
                    autoDraw:true,
                    children:[
                        isc.CellLabel.create({id:'foo', contents:'moo'})
                    ]
                });
            </script>
        </td>
        <td align= "left">
            SOME CONTENT FOR THE CELL
        </td>
    </tr>
</table>
</div>

</BODY>
</HTML>

[Diether]

That example is indeed working fine.
Butif I place it inside our existing page it doesn't work anymore.
So perhaps there is conflict in the css somewhere.
I'll look into it.
Thanks for the help!

[edit]

It's the doctype that is causing this behaviour.
Try this and you'll get what I get:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML><HEAD><TITLE>Simple RelPos Test</TITLE>

<SCRIPT>window.isomorphicDir='../../isomorphic/';</SCRIPT>
<SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>

<SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
<SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
<SCRIPT SRC=../../isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY>

<script>
isc.defineClass("CellLabel", "Label").addProperties({
    height:10,
    width: "100",
    align: "center",
    showEdges: true,
    canAcceptDrop: true,		
    drop: "onCellDrop(this)",
    dropOver: "this.setBackgroundColor('#ffff80')",
    dropOut: "this.setBackgroundColor('#CCCCCC')"
})
</script>

<div style="overflow-x:scroll;width:300px;" >
<table width="800">
    <tr>
        <td>
            <script>
                isc.Canvas.create({
                    position:"relative", width:1, height:1, 
                    overflow:"visible",
                    autoDraw:true,
                    children:[
                        isc.CellLabel.create({id:'foo', contents:'moo'})
                    ]
                });
            </script>
        </td>
        <td align= "left">
            SOME CONTENT FOR THE CELL
        </td>
    </tr>
</table>
</div>

</BODY>
</HTML>

[Diether]

Hi,

I was wondering if there is any update on this?
In this post you mentioned that it was fixed.
But was it the same situation that I was having?
And is there a way around it without upgrading to a new version of smartclient?

Thanks for the help.

[Diether]

Sorry to bump this again.
But I was wondering if there is still no news on this?
If nothing can be done about it we'll have to find a way around this I'm afraid.
Currently it is blocking our development a bit.