I am having trouble creating dropdown menus using headlessui Listbox.
There are two listboxes, one at the top and one at the bottom of the page. The problem is that when the top listbox menu is opened, it interferes with the bottom listbox making it difficult to make a selection. The selection menu should be completely front layer. How can I fix this?
Before making selection:
Open the top listbox:
The bottom listbox is in the way:
The code sandbox is available here so you can try test the situation.
After a bit of research, I found a workaround to this problem.
We can set the following style option to the first listbox element.
(or make a div element that contains the first listbox and set the style.)
style={{ position: "relative", zIndex: 1 }}
You might not need position option or need to set it to "absolute".
Note that tailwinds "z-1" option didn't work.
The following issue helped me: https://github.com/tailwindlabs/headlessui/discussions/1583
Related
I have a Reach UI menu button inside an element with overflow-y: scroll. The menu already avoids the edges of the window, but I'd like it to apply the same behavior to the sides (specifically top and bottom) of the scrollable element. I know that the solution probably involves passing a function to the position, function, but i'm not sure what that should look like.
I've created a code sandbox with a fairly minimal setup to illustrate the issue. Each of the buttons shows a menu. Try scrolling while the menu is open.
https://codesandbox.io/s/angry-burnell-u4fjc
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'
}
}
Please, see picture bolow:
I cannot get rid of white paddings/margins in combobox popup. I have two custom containers in designer called DropdownItem and DropdownItemSelected, Fisheye renderer type for ComboBox renderer. As you may see in combobox selected item is displayed just fine. However, in I cannot get combobox popup displayed without white paddings. I have actually used PopupContentPane to add blue border around popup, I also have border set to empty, all margins/paddings set to 0 for following UIIDs: PopupItem, PopupFocus, DropdownItem and DropdownItemSelected. PopupContentPane has also all paddings/margins set to 0. Also see my contants:
I went through source code and cannot find any other useful UIID I can style in order to remove these white paddings. Can someone help me with this?
Update:
Might be helpful - see below how popup looks like when PopupContentPane border sickness is set to 2px:
Update 2:
Almost there. After setting listItemGapInt constant to 0 I managed to remove gaps between list items. See screenshot below.
I still cannot find out how to remove 2 pixel gap on the right and don't know where it's coming from. Would appreciate any thoughts/ideas.
Update 3:
I eventually found where two pixels are coming from.
com.codename1.ui.ComboBox class, lines 289-290
289 int listW = Math.max(getWidth() , l.getPreferredW());
290 listW = Math.min(listW + getUIManager().getLookAndFeel().getVerticalScrollWidth(),
parentForm.getContentPane().getWidth());
In my particular case, listW=630px and in line 290 listW is recalculated as Math.min(630 + 2, 768), where 2px is width of vertical scroll.
As far as can say, scroll bar should be a part ComboBox popup.
I managed to remove unwanted gaps. As I mentioned in 'update 2', listItemGapInt should be set to 0 in order to remove horizontal gaps.
Vertical gap was related to scroll bar however it was not clear that it's a vertical scroll bar that creates that gap. After I set paddings to 0 for Scroll UIID, vertical gap has gone.
In regard to update 3, this is a bug but not because it should be in the container. The list is scrollable so this should be a part of the list however the call should be to l.getSideGap() and not to getVerticalScrollWidth().
This will allow you to hide that by setting the scroll bars to visible false etc. We'll fix that for the next update.
This Radmenu is dynamically created in code behind.Please let me know how to add scroll bar in this menu to limit the items in the submenu.
Check out this post from telerik forums.
Though it's in silverlight, I'm pretty sure you can use it as is.
Try explicitly setting the Height property of the Menu for that has a lot of menu items and that should add (Up/Down) button I believe
While not a scrollbar, you can set the DropDownHeight property of the RadMenuItem. It limits the height taken by the child menu items, and has up/down arrows to enable the scrolling.
A combo's drop-down list gets the size of the Combo, and display of items with longer text just gets cropped.
I tried fiddling with Ext's CSS for combos with no luck.
Does anyone know how it can be done ?
Using ExtJS 3.2.0.
EDIT:
Alternative solutions to improve usability will also be appreciated, e.g. getting the list to expand with the content.
I don't know how you can add a scroll bar, but I know that you can change the list width with the well-named property :
listWidth : Number
The width (used as
a parameter to Ext.Element.setWidth)
of the dropdown list (defaults to the
width of the ComboBox field). See also
minListWidth
For an horizontal scroll, it would need lots of changes, because the list container width is forced, so "overflow" attributes in css are useless.
Edit : Another method
You can add this custom css, for me it seems to work well, as wrapping long lines.
.x-combo-list-item {
white-space:normal;
}
Of course, if you add this it will apply to all combos' lists.
You can set listClass : 'x-combo-list-wrap' on your Ext.form.ComboBox, and then apply the css only to these items :
x-combo-list-wrap .x-combo-list-item {
white-space:normal !important;
}
(I'm not sure the !important is useful here, not tested)