The built-in map and predefined frame image appear to be both centered in the interface, causing them to overlap, making them somewhat mutually exclusive features.

Is there a straightforward way of realigning these features of the interface?

Ideally, I would like the map and frame image to display side-by-side.

I (and the students I'm working with) would very much appreciate any feedback and support!

You should be able to do it with some CSS, but I don't have the ability to work it out right now. I'll take a look when I get home (unless someone else jumps in!).

I looked at it a little bit, but I didn't yet arrive at a working solution.

The map is in an HTML element with id "gridPanel". The room image is an HTML element with id "gamePanel". Playing with the CSS (using the built-in HTML Tools), I was able to get them side by side, but resizing the window didn't do the right thing.

I may give it a try again later, but I wanted to let you know where I got to anyway.

jaynabonne wrote:I looked at it a little bit, but I didn't yet arrive at a working solution.

The map is in an HTML element with id "gridPanel". The room image is an HTML element with id "gamePanel". Playing with the CSS (using the built-in HTML Tools), I was able to get them side by side, but resizing the window didn't do the right thing.

I may give it a try again later, but I wanted to let you know where I got to anyway.

Thank you for looking in to this and thank you for the update!

I was able to finally get something reasonable. The code you can drop into your game is this:

  <object name="PaneCssHolder">
  	<css type="string">
  	<![CDATA[
  		<style>
  			div#gamePanel img {
				max-width: 100%;
				max-height: 100%;	
			}
			#newGamePanel {
				position: fixed;
				top: 32px;
				height: 300px;
				width: 700px;
			}
  		</style>
  	]]>
  	</css>
  </object>
  <function name="InitUserInterface">
  	JS.eval("$('#gameBorder').append($('&lt;div&gt;', {id: 'newGamePanel'}))")
  	JS.eval("$('#newGamePanel').append($('#gamePanel'))")
  	JS.eval("$('#newGamePanel').append($('#gridPanel'))")
  	
  	JS.eval("$('#gridCanvas')[0].width=340")
  	JS.eval("paper.view.viewSize.width = 340;")
  	
  	JS.eval("$('div#gamePanel img').css('max-height', '100%')")
  	JS.eval("$('div#gamePanel img').css('max-height', '100%')")
  	
  	JS.eval("$('div#gamePanel').css('margin-left', 'auto')")
  	JS.eval("$('div#gamePanel').css('left', '0px')")
  	JS.eval("$('div#gamePanel').css('top', '0px')")
  	JS.eval("$('div#gamePanel').css('width', '340px')")
  	JS.eval("$('div#gamePanel').css('height', '300px')")
  	JS.eval("$('div#gamePanel').css('position', 'absolute')")
  	
  	JS.eval("$('div#gridPanel').css('margin-left', 'auto')")
  	JS.eval("$('div#gridPanel').css('top', '0px')")
  	JS.eval("$('div#gridPanel').css('right', '0px')")
  	JS.eval("$('div#gridPanel').css('width', '303px')")
  	JS.eval("$('div#gridPanel').css('height', '300px')")
  	JS.eval("$('div#gridPanel').css('position', 'absolute')")
  	
  	OutputTextNoBr(PaneCssHolder.css)
</function>

I've also attached a sample game (without the image).

Let me know if you have any issues.