PDA

View Full Version : [CLOSED] Basic Layout problem



machinableed
Apr 27, 2012, 2:58 AM
I'm not sure I understand the way the layout modes work and think that now I have confused myself. My code is as follows:

Main page:


@(Html.X().Panel()
.Collapsible(true)
.ID("pnlBasicServiceDetails")
.Layout(LayoutType.Container)
.Title("SERVICE DETAILS")
.AutoHeight(true)
.Items(sections =>
{
sections.Add(Html.X().Container()
.ID("BasicServiceDetails")
.Layout(LayoutType.Column)
.ContentFromPage(this, "/Views/Shared/_BasicServiceDetails.cshtml"));


})
)


partial view:



@(Html.X().Container()
.ID("BasicServiceDetails")
.Layout(LayoutType.Column)
.Padding(10)
.AutoHeight(true)
.Margins("0 0 0 10")
.Items(containers =>
{

containers.Add(Html.X().Panel()
.ID("pnlServiceDetails")
.Layout(LayoutType.Anchor)
.Title("BASIC SERVICE DETAILS")
.Cls("form-label")
.Padding(4)
.Width(800)
.Height(100)
.Margins("4 0 4 4"));

containers.Add(Html.X().Panel()
.ID("pnlCustomerDetails")
.Layout(LayoutType.Anchor)
.Title("CUSTOMER DETAILS")
.Cls("form-label")
.Padding(4)
.Width(800)
.Height(100)
.Margins("4 0 4 4"));

containers.Add(Html.X().Panel()
.Draggable(true)
.ID("pnlPlaceDetails")
.Layout(LayoutType.Anchor)
.Title("PLACE DETAILS")
.Cls("form-label")
.Padding(4)
.Width(800)
.Height(100)
.Margins("4 0 4 4"));

})
)


Now I want to make the panels fit into the containing panel depending on the screen size, so if it's wide enough the panels are arranged horizontally but on a smaller resolution the panels are underneath each other. How can I alter the layout attributes to make this happen?

Daniil
Apr 27, 2012, 10:40 AM
Hi,

I don't think such behavior is possible with ColumnLayout.

I can suggest the following.

1. Remove

.Layout(LayoutType.Column)
for the BasicServiceDetails container.

2. Add an additional CSS class for each panel.

.Cls("form-label my-float")

The "my-float" CSS class definition:

<style type="text/css">
.my-float {
float: left;
}
</style>