DumpContainer inline display not work

rovingwind

I want to show 2 container inline, but below code not work.

I find a tricky way to achieve my function like below.

Why the first code is not work?

i2van

Dumping direction is intrinsically vertical (top -> down), so everything works as expected (remove dcMain and you will get the same result). It you need horizontal dump, use Util.HorizontalRun as you did.

PS Could you please post code for code and not screenshots?

rovingwind

Code 1 which not work

var dcMain = new DumpContainer().Dump();
var dc1 = new DumpContainer();
var dc2 = new DumpContainer();
dcMain.AppendContent(dc1, true);
dcMain.AppendContent(dc2, true);

dc1.AppendContent("Container1 111");
dc1.AppendContent("Container1 222");
dc1.AppendContent("COntainer1 333");

dc2.AppendContent("Container2 AAA");
dc2.AppendContent("Container2 BBB");
dc2.AppendContent("Container2 CCC");
dc2.AppendContent("Container2 DDD");

Code 2 My tricky way

var dcMain = new DumpContainer().Dump();
var dc1 = new DumpContainer();
var dc2 = new DumpContainer();
dcMain.AppendContent(Util.HorizontalRun(null, dc1, dc2));

dc1.AppendContent("Container1 111");
dc1.AppendContent("Container1 222");
dc1.AppendContent("COntainer1 333");

dc2.AppendContent("Container2 AAA");
dc2.AppendContent("Container2 BBB");
dc2.AppendContent("Container2 CCC");
dc2.AppendContent("Container2 DDD");

because by document, DumpContainer.AppendContent() set second parameter to true will make inline dump.
and it work for other object.
But while object is DumpContainer, it's not work.

DumpContainer dc = new DumpContainer().Dump();
dc.AppendContent("abc",true);
dc.AppendContent(new Button("Run"),true);
dc.AppendContent("def",true);

i2van

This

var dcMain = new DumpContainer().Dump();
var dc1 = new DumpContainer();
var dc2 = new DumpContainer();
dcMain.AppendContent(dc1, true);
dcMain.AppendContent(dc2, true);

dc1.AppendContent("Container1 111");
dc1.AppendContent("Container1 222");
dc1.AppendContent("COntainer1 333");

dc2.AppendContent("Container2 AAA");
dc2.AppendContent("Container2 BBB");
dc2.AppendContent("Container2 CCC");
dc2.AppendContent("Container2 DDD");

renders to

<div id="final">
    <div id="c1">
        <!-- dc1 -->
        <div id="c2">
            <div>Container1 111</div>
            <div>Container1 222</div>
            <div>COntainer1 333</div>
        </div>
        <!-- dc2 -->
        <div id="c3">
            <div>Container2 AAA</div>
            <div>Container2 BBB</div>
            <div>Container2 CCC</div>
            <div>Container2 DDD</div>
        </div>
    </div>
</div>

which is correct because container itself is a block element (div), and not inline (span). You can change it by modifying the Style property. However, I think that using Util.HorizontalRun is better solution than this one.

var dcMain = new DumpContainer().Dump();
var dc1 = new DumpContainer { Style = "vertical-align: top; display: inline-block" };
var dc2 = new DumpContainer { Style = "vertical-align: top; display: inline-block" };
dcMain.AppendContent(dc1, true);
dcMain.AppendContent(dc2, true);

dc1.AppendContent("Container1 111");
dc1.AppendContent("Container1 222");
dc1.AppendContent("COntainer1 333");

dc2.AppendContent("Container2 AAA");
dc2.AppendContent("Container2 BBB");
dc2.AppendContent("Container2 CCC");
dc2.AppendContent("Container2 DDD");