Basic horizontal arrangement of stocks.

[arvindarya]

Just one thing, I cannot get three stocks to align side by side it just does not follow any basic css. I have three stocks, Tilestack, MarketPlace1 and MarkePlace2 How can I arrange them horizontally cannot wrap it in a div with flex it just doesn't work. How to do it, It is a very question, but the documentation does not make it clear and it is not working.

This is my one ebg.stock

this.tileStack = new ebg.stock();
this.tileStack.container_div = "230px"; // enought just for 1 card
this.tileStack.autowidth = false; // this is required so it obeys the width set above
this.tileStack.use_vertical_overlap_as_offset = false; // this is to use normal vertical_overlap
this.tileStack.vertical_overlap = 0; // overlap
this.tileStack.horizontal_overlap = 0.5; // overlap
// this.tileStack.horizontal_overlap = -1; // current bug in stock - this is needed to enable z-index on overlapping items
this.tileStack.item_margin = 0; // has to be 0 if using overlap


Similary have two more
//Connecting
dojo.connect( this.tileStack, 'onChangeSelection', this, 'onTileStackCall' );
dojo.connect( this.marketPlace1, 'onChangeSelection', this, 'onMarketPlace1Call' );
dojo.connect( this.marketPlace2, 'onChangeSelection', this, 'onMarketPlace2Call' );

//Creating
this.tileStack.create( this, $('tileStack'), this.tilewidth , this.tileheight );

this.marketPlace1.create( this, $('marketPlace1'), this.tilewidth , this.tileheight );
this.marketPlace1.image_items_per_row = 8;

this.marketPlace2.create( this, $('marketPlace2'), this.tilewidth , this.tileheight );
this.marketPlace2.image_items_per_row = 8;

They align vertically if I use <br> but it just fails tremendously when arranged horixontally, tell me how to do it.

Thank you.

[LeSteffen]

Does it work when you align them as inline blocks?

Code: Select all

#tileStack, #marketPlace1, #marketPlace2 {
	display: inline-block;
	width: 33%; /* optional */
}

[Victoria_La]

This does not make any sense: this.tileStack.container_div = "230px";
container_dir is the Node (dom object corresponding to stock).
Why do you think setting it to this string will have any impact? Where you getting this idea from? (just curious if we jave issues in docs)
If you not using autowidth you have to deal with width using css, since stock does not use normal layouts for elements inside - it has to be set directly (via css or js)

[arvindarya]

Victoria the doc is not at all beginner friendly, They don't make anything clear. I made the entire game but moving anything anywhere is a nightmare, The tpl, js, css they are not explained how they work together. I can get them to work but how can I do it. I threw everything and it is working but now I have to move things around.

I just want to put these stocks horizontally, how to do it.

Cannot attach image coz board attachment quota is over.

Three stocks I just want to arrange them horizontally.

[Victoria_La]

You still did not explain how you get idea of using of container_div
But the suggestion from LeSteffen above should work - you set the width by css
If you do actually want to use it - after create call you can set width
this.tileStack.container_div.style.width = "230px";