To create a split center panel like this with a sidebar, the north and "south" panel need to be nested inside an outside center panel. View source to see how it all comes together.
Center Panel With "ixf-container", "margin-md" and "padding-md" around it.
The system we are using for the panels is extremely robust. Likewise it can be quite daunting to configure deeper then what we provide out of the box. If you want to take it to the next level, this will help you do that.
To configure the layout script insert the following either in your project.js if you want it to be a global customization, or on the specific page where you want it to occur. The following MUST NOT BE in an onload (ie: $(function(){STUFF HERE})). Just put it on the page so it runs as it is loaded. If this doesn't make sense, maybe you shouldn't be trying this out ;)
ixf.layoutDefaults = {
west:{
size: 500
},
defaults:{
size:400
}
}In the above, set anything you want to be applied to ALL PANES in the defaults section. If you want it to be applied only to a specific pane use the west section (changing west to the direction you want to apply to).
You can also set options directly on a given pane using data- attributes. Set it on the wrapping elements for defaults for all sub-panes, or on the individual panes to target that pane specifically.
| Name | Type | Default | Options | Description |
|---|---|---|---|---|
| boolean | true | Can the user close the pane | ||
| boolean | true | Can the user resize the pane | ||
| number | Minimimum size the pane can be resized to | |||
| number | Maximum size the pane can be resized to | |||
| number | Size the pane starts out at | |||
| boolean | Should the pane start closed | |||
| string | You can pass any additional options you want to set custom for the panels via this. Must be formated with single quotes wrapping the value and double quotes used inside (ex: data-layout-options='{"size":"150"}') |
Options Column = The script only recognizes these values
To see what all you can configure see the plugin documentation page. Good luck, it's pretty crazy in there.
The panel system will automatically detect what panels you have on your page. The classes you give each pane are as follows, hopefully their relative location on the page is obvious:
Pages are not required to have a ui-layout-center for their content if they aren't using multiple panels.
The panel system doesn't care about what content is in each panel. So you can make it have padding or be all the way out to the edge (full bleed). If the content is taller then the available space it will automatically get a scrollbar for that pane.