Tagged: Angular docking layout, Angular layout, docking layout, hide header, hide title, jQuery docking layout, jQuery layout, jqxDockingLayout, jqxLayout, jqxsplitter, layout, resize, restrict resize, splitter
AuthorProblem with layout Posts
Hello, I’ve been trying without success for a couple of days to make this layout.
Any help would be appreciated.
The lauout consists in 3 vertical parts, from left to right:
A: a part, collapsed by default, with a “fixed” width when it’s collapsed.
B: a part that is composed by 2 parts (top & bottom) divided by a vertical splitter
C: a part that occupes the 100% of the available height.
When the icon in the A part is clicked, A part extends until a fixed width (no splitter between A & B parts) Part A can be collapsed or expanded, but no splitter between A & B.
When the A part is expanded and button clicked, A part collapses.
I would prefer the parts A, B & C don’t have any “title”. They should be only conaiteners of the DIVs data content.
I attached an image as example.
Unfortunately, jqxLayout is not a suitable widget to achieve this layout because panel titles cannot be removed. It would also not be possible to restrict the resize behaviour only of section A. We suggest you use jqxSplitter for parts B and C and for part A use a custom div. You can also probably try using a vertical jqxRibbon for A if that suits your purposes.
Just it was one of my tries, but I couldn’t get it work. Would you mind to show me a minimal skeleton?
Sorry for to ask so simply and silly question, but I’m stucked. I can post all of my previous tries if you prefer.
Got it. I’ve tried again with Ribbon and Splitter, and I finally managed to get it work.
What failed here was the combination between Ribbon & Splitter. Ribbon should be created after the Splitter, as you saind in other forum post.
You must be logged in to reply to this topic.