[CLOSED] Basic Layout problem

[machinableed]

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]

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>