[CLOSED] Can a Panel be rendered as a ?

[randy85253]

I'd like to have the Panel (or something else) to use as a container for other controls, but I want the container to act as an inline/ rather than a block/.

I've tried changing the AutoEl to a Span as follows, but it still renders as a block element.

panel.AutoEl.Tag = HtmlTextWriterTag.Span;

How can this be achieved?

[Ben]

Is a span actually being output in the code though?

Regardless of whether it is a div or span, you can change the display to inline by applying your own CSS class - http://www.w3schools.com/css/pr_class_display.asp

Ben

[Vladimir]

Hi,

According W3C standard the 'span' tag can't contains any block element like 'div' (you can get unexpected result in some browsers and you page doesn't pass W3C validation)


Therefore change AutoEl tag to the 'span' is incorrect


Can you explain what you try to accomplish?

[randy85253]

I need a container that has multiple other child-controls, and the container needs to flow and wrap the children as if they were . ie: Fit as many on each row as possible, and when resized, re-wrap all lines.

Like the way the DataView flows and wraps photos in the example. (I know this uses a Template that has a span - but I don't think I can place other Ext.Net controls in a Template, can I?).

I tried the CSS trick, but adding 'display:inline' CSS to a panel didn't work. The Panels still render as block elements.

[Vladimir]

Hi,

Just add the "float:left" to the panel container


1. Add css class

.ct-inline{float:left;}

2. Add for panels

CtCls="ct-inline"

Also it can be required (depends from your code) to add the following 'div' after those panel to clear floating

<div class="x-clear" />

[randy85253]

Vladimir;

The float on the container class seems to work, so this is promising.

I didn't seem to need the extra in my case however your comment concerns me about the reliability of using this approach. Is this a browser specific issue? Would I need the extra sometimes and not others, and if so, how to I tell? And how do I add it if needed?

BTW - I think what I'm looking for is a new type of Layout, an InlineLayout, that flows all its items this way automatically.

[Vladimir]

Hi,

That div requires if you have content/controls after those panels (clear floating for those content/controls)


By the way, ColumnLayout is floating layout. Just don't set ColumnWidth (not sure about automatically clear floating in this case)

[randy85253]

Vladimir,

I think I get it. In my case, the containing Panel will only have floating panels; it wont contain any additional block panels. So in this case, I don't need to worry about the extra , right?

[Vladimir]

Hi,

Yes, right

[randy85253]

Great, then this can be closed.

Thanks for the great support, again.