I have a page with a set of tabs, two of which contain accordions. I have several AJAX functions that reload the content of both sets of accordions, and once complete, I refresh both of them.
While the accordion of the currently active tab refreshes just fine, the one in the inactive tab does not. It opens the top accordion panel, and its height is just fine. But when you activate any other panel, it only has the minimal height and adds a scroll bar.
How can I get the accordions in the inactive tabs to maintain the proper height?
Hi i believe ur issue is similar to this thread, pls check out these links. JQuery Accordion Auto Height issue http://jqueryui.com/accordion/#no-auto-height
Related
I am using the react-select package for our menu dropdowns. However, I've noticed that if a dropdown menu is open and you scroll the page down or up, the menu moves with the page. Expected behavior is that the dropdowns position should stay static. This expected behavior can be seen here on the "single" dropdown. Any ideas what could cause this issue?
wrap react-select inside the container with some height & relative position.
I have a React App where the user can toggle between different views of the same data structure. When toggling from one view to another, the browser window sometimes automatically scrolls vertically. Instead I am expecting the window to not scroll when possible.
The CodeSandbox here reproduces the issue:
https://codesandbox.io/embed/magical-chebyshev-otlpu?fontsize=14&hidenavigation=1&theme=dark
If you scroll down, then click on "CLICK TO SWITCH VIEW BELOW", you will notice that there's an automatic scroll to the top happening.
I suspect this is an issue with MUI TextField. If I change the MUI TextField to a div, the issue does not show up, so I don't think this is due to React.
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'm using extjs 4.0.7 library. I have created UI as follows.
Landing page is a panel with border-layout.its north region have a panel with id: 'filterPanel'. This panel have a 'multiselect' component. Center region of landing page a tab panel, each panel having a grid.
Landing page has a listener, afterrender, on this listener I made filterPanel as collapsed by using Ext.getCmp('filterPanel').collapse().
The issue is, system not showing vertical scroll-bar when I expand 'filterPanel'.
If I remove panel collapse code from listener, scroll-bar is displaying.
Our requirement is filterPanel should be collapsed while rendering the UI, that's why I tried to collapse filter panel on landing-page afterrender listener.
Is this approach correct?
Regards,
Ajil
I got a work around for this issue. The steps which i followed is given below,
Add an expand listener for the panel here its 'filterPanel'
Remove all element from multiselect component store.
Reload multiselect store.
I'm sure its not a good fix , but time being its work for me.
Thank you all.
I am looking for align the Angular Multiselect from the bottom.
Problem is activating that dropdown will display it beneath the clickable trigger, no matter where on the screen it is. If the trigger is at the very bottom of the page, when clicked the dropdown will increase the page height, and the user will have to scroll down again to see the rest of the dropdown
code link
Thanks.
There is a dropup feature in bootstrap.
Referece: http://getbootstrap.com/components/#btn-dropdowns-dropup