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("...")
Related
I am facing a problem with the horizontal tab. If we make zoom in the webpage the tabs are going out of view.
Can we make a dropdown list which is in out of view in GWT?
Currently menu items expanded by clicking on arrow at right side. But I want to expand the list by clicking the item name. For example, in below image, I need to expand/collapse list by clicking on Settings instead of clicking on marked arrow head.
By default, it's only possible to expand the side navigation menu children submenu by clicking on the corresponding down arrow.
Maxime Tremblay described a solution and a demo.
I have a Bootstrap navbar on my site with a collapsed menu that toggles on/off. I would like it so that when a user clicks one of the links in the menu (which is a dropdown, by the way), that active link should jump to the top of the menu. This way they can see a more expanded list of the dropdown items.
Here's a regular Bootstrap navbar. I want that when I click on "Dropdown", bring that active link to the top under "project name".
If I understand what you want to do correctly, from a user interface point of view I would strongly recommend against doing this. This is highly unexpected behaviour for the user who is likely to get confused as to why the thing they just tapped has moved. It could also cause mistakes from people opening the menu, then (since their finger is probably still close to the screen) accidentally clicking one of the menu items and being moved to a new page.
If you are worried about users not being able to see all the items maybe you should consider a different menu interface for your mobile devices such as an off-canvas menu (click the little 'toggle nav' button rather than the hamburner menu to see the off canvas menu). This would give you more space to play with for your menu items.
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.
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.