ok here is an easy one.
I need to create a simple custom panel that will have a collapse functionality.
The thing is I need to control over the collapse button position, and I need to control the collapsed mode UI (that is I want the panel to show somethings in collapsed mode and not just the title.
for example :
I want to create a search panel that will be nested in a viewport above a the pages of the application. each page will have access to the search panel title and its advance search form which is collapsible. in a collapse mode only a simple search and the title are visible.
here is an image before the collapse: (once clicking the circled arrow the panel will expand to show the advance search)
here is an image after the collapse:
how would you go about to implement such functionality?
I would use two panels in a vbox layout, the top one contains the basic search, and the bottom one contains the advanced search.
In the top panel I would just add an image of a down arrow and handle the onclick event to toggle the bottom panel.
Related
I am using a DHTMLX 3T layout, in which topmost layout(a) has the bootstrap components(Drop down, search box, etc).
When I click on the dropdown, the menu is getting hidden behind the other layout(c) and I am unable to see the menu list. Can you let me know the solution for this problem so that i can see the menu items.
I have tried to set the z-index for the drop down but still unable to resolve the issue.
Your bootstrap menu is attached to the layout cell and designed so that it is not available to show it outside the current container.
You may only try to create your menu outside of the layout cell.
I added the fieldset into a panel row, and now I want to keep this panel visible when I scroll in my dashboard like this example
But like in the example, I want to keep the sidebar on the top when the wrapper text disappears.
i'm sure i need javascript instance to perform this
now i just use css code : position:fixed
You have to convert your XML dashboard to HTML and modify the CSS of the panel you want to have absolute positioning.
I am building a page where I have to panes (left/right). Left pane will show the list of items and right pane will show the detail of selected item from left pane. However, when same page being displayed in Mobile it should show only List of item first. When selected any item in the list, than list pane should be hidden and detail pane should be showing. Detail pane will have a back button, which show the Left(list pane) and hide the detail pane.
Question: How can I achieve this scenario in twitter bootstrap?
Okay so you can hide the panel right panel initially by using .hidden-md hidden-lg, but after that you would need to enable things and hide them again with JS .toggle() or just literally .removeClass("...") and .addClass("...")
on a wordpress custom theme, I'm using slicknav menu to create a responsive mobile menu.
It works great, so I decide to merge the second menu present on my site (category menu) in the mobile menu.
Using this codePen it's simple and easy, but I'd like to separate the menus in two floating columns, left category and right the global menu.
see image:
I currently can insert a "<hr>" between one menu and the other, using combinedMenu.append("<hr>");, but if I "append" to create the float combinedMenu.append("<div class='col-sm-6'>"); the resulting code is
<li><a>.....</a></li>
<li><a>.....</a></li>
<div class='col-sm-6'></div>
<li><a>.....</a></li>
so it closes the tag itself! GRRRRR
can anyone helps me?
bye, L.
Hello everyone it is me again with another question. The booking system located here
http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/divemaster-training.php?cat=16
There are 3 main collapsible panels controlled by the spry framework. There are then over a dozen more inside the first collapsible panel as you can see on that page. When you open one of those by pressing one of the 'learn more' buttons you will see that the main collapsible panel that it is in also expands to fit that content and the contracts if you close the smaller panel again.
However as soon as you go to the next main collapsible panel 'summery and quote' and then go back to the first main panel by pressing the button that says 'back' there are problems. Now if you open up one of the smaller panels inside the first main panel you will see that the main panel does not expand to fit the contents and in fact the content of the smaller panels spreads over the other content, floating above it. Does anybody know how to fix this?
Many Thanks,
Problem solved for anyone who is also stuck.
Open up the SpryCollapsiblePanel.js . Find the line that says
this.content.style.height = this.toHeight + "px";
And change it to .
this.content.style.height = "auto";
All problems solved with resizing content of collapsible panels where another collapsible panel is the content.