fiddle here.
If there are many panels in the accordion they vertically just start bumping up against each other and can't be expanded. I would like to make the total height of the accordion the height of the headers plus the height of one panel body (expanded). And then the parent panel should just have a scrollbar to show that amount of height. This way there is always an open accordion and you can scroll down to any header and instead open that one.
Is this not possible?
If I turn the layout of GroupListView to vbox intead of accordion I then get what I want but unfortunately when you expand/collapse the panels, the animations are all messed up (doesn't work like the accordion)
In ExtJS 5.1.1, setting fill: false on the layout declaration seems to produce the desired result.
Related
Is there a way to make the fluent ui panel smaller in height? https://developer.microsoft.com/en-us/fluentui#/controls/web/panel
My page has two divs. One header div and one content div. I would like the panel to occupy/open only the same height as the content div. Thank you
enter image description here
I couldn't find any examples
I am facing an issue where the tabs don't fit the entire width of the panel, and the user has to scroll to the right to view the rightmost tabs.
To see what I mean, please can go to this Sencha example, add enough tabs to enable the scrolling in the tab header.
My questions:
Is there a way to make the tabs wrap rather than having the scrolling effect?
Is there a plugin that can be used to create a dropdown menu/list with all the tabs or perhaps with the tabs that are not visible on the top right corner?
Is there a way to configure the table panel such that when I click on the > button on the right side to scroll the tab items, they scroll enough to make the next item visible instead of scrolling in small increments?
Ultimately, I could simulate the tab panel by adding a toolbar and buttons, and using the cardlayout. That would be my plan B.
Thank you
Update: I can set the flex: 1 property for each tab (inside tabConfig). I still have to figure out tooltips and enable the elipsis on the longer tabs that get chopped off.
There is a tabBar config for tabpanels, see here. Within this you can set layout properties, including overflowHandler, and one possible value is menu. This will do what you asked for in question 2. Add this config to tabpanel definition:
tabBar: {
layout: {
overflowHandler: 'menu'
}
}
I incorporated an accordion in my sidemenu as seen in the image. The Home and Logout are not in the accordion, so their height differs. I request for help on how to reduce the height of the accordion header.
I also request for help on how I can remove the border of an accordion. I tried setting the border to empty in the accordion's UIID but it didn't work.
You can reduce the padding and font of the elements in the accordion to reduce the height of the accordion. This also lets you control the border.
You can find the applicable UIIDs in the component inspector tool. Specifically UIIDs to look at would be AccordionArrow and AccordionItem.
Normally, the expand/collapse functionality in extjs works as the panel/grid header stays in a position and the body of the panel/grid moves down/up. But I need the panel header to be in a position and on expand, the header has to move up showing the panel/grid body. On collapse, the header has to move down and come to the original position. This is just like expand and collapse in accordian layout inner panel. But I want it with a single panel. Any code samples or pointer would be very helpful.
Note: Please note that I cannot use any third party plugin..
This sample in ExtJs 4.2.1.
One way to do what you are trying to achieve is by injecting "expander" div in afterrender event of parent panel before collapsible children. This means items are at the bottom of parent body after expander div so there is space to expand them up. When children are collapsed/expanded or parent is resized, injected div gets height of parent minus children.
You can see it here: https://fiddle.sencha.com/#fiddle/44c
Edit: I don't really get 1 panel part - if you want single panel to behave like that, expander could be injected into wrapper before header and content, but than you are left with panel of same size but collapsed - the only scenario this makes sense to me is by reversing collapse of children in sample I provided
I have this narrow panel which is basically a list of thumbnails, and i need to be able to scroll over them using buttons.
We have a panel (anchor layout), with containers in it, and each container contains the image.
there isn't space for a scrollbar, and anyway we don't want one.
I thought it would be as easy as in the listener for my button calling panel.getEL().scroll('b',20)
but this isn't working because the scrollHeight === ClientHeight so scroll does nothing.
Is there a technique I am missing or should this work?
So you're using a button to scroll through the images? What about having the button's listener remove/hide the containers/images at the front of the panel to allow the others to use the space?