This project is read-only.

Displaying a list horizontally (in a container widget)

Topics: Writing themes
Jun 22, 2011 at 8:52 PM
Edited Jun 22, 2011 at 8:54 PM


(new to orchard, so excuse me)

I would like to display a list in a horizontal manner. Currently, all the items in my list display as full width blocks. Can I add a shape template to my theme to manage how these items display? I have added a shape template for my actual items which works fine, but when displaying it in a container widget it only lists them vertically.

I have tried adding the file "Parts.ContainerWidget.cshtml" to my theme with the following content, but this did not work. (It did however affect the display by changing the height, so I know the file was used/compiled)

    IEnumerable<object> items = Model.ContentItems;
@foreach (object item in items)
    <div style="display:inline;width:100px">@Display(item)</div>


Thanks in advance for any help.

ps. I got the above code of the net, so don't ask me what the "Classes.Add" parts are for...

Jun 22, 2011 at 8:55 PM

You should be able to do this entirely in your style sheet;

.zone-foo .my-list-type li { float:left; }

Jun 22, 2011 at 9:16 PM

Got it. Thanks for the quick reply!