Panels inside panels


I was wondering if it's possible to create horizontal carousel arranger, so that some panels contain vertical carousel arrangers. What I want to archive with this, is that user can flip between pages (horizontal), but some pages need to have subpages which are below the original page.


  • This shouldn't be a problem. I've used various Panels-in-Panels combinations and the sampler app does, as well.
  • All the examples of arranger I have found so far are horizontal. Does this mean, that I'd have to create custom arranger, or am I missing something obvious :) ?
  • If you look at the Sampler app -> Layout -> Arranger sampler, there is a TopBottomArranger arrangerKind that does vertical panel transitions. It's probably like the horizontal one where you can set "margin: 0" as a property of the Panels kind to eliminate seeing portions of the previous/next panels.
  • Wow, thanks :)

    If anyone else is having the same problem as I, here's how I solved it:

    name: "App",
    kind: "FittableRows",

    components: [
    { kind: "Panels", fit:true, arrangerKind: "CarouselArranger", classes: "panels-sample1", components: [
    { content:"0", style: "background-color: red" },
    { content:"1", style: "background-color: gray" },
    { kind: "FittableColumns", components: [
    { kind: "Panels", fit:true, margin: 0, arrangerKind: "TopBottomArranger", classes: "panels-sample2", components: [
    { content:"3", style: "background-color: blue" },
    { content:"4", style: "background-color: green" },
    { content:"5", style: "background-color: yellow" },
    ] }
    and css:

    .panels-sample1 > * {
    min-width: 100%;
    max-width: 100%;

    .panels-sample2 > * {
    min-height: 100%;
    max-height: 100%;
Sign In or Register to comment.