Scenario: I have created a simple 2 columns jQuery accordion with 56 <li> elements. In reality it may have 200 or many more items who knows ;) It's repeating <li> in a loop
Try the fiddle. It's cool! https://jsfiddle.net/srmahmud2/smtn6gt0/9/ demo here
Way I have done it: made li float left, with 15px padding to make some space in between.
Target: Make a proper behaved multi column jQuery accordion
Problem:
For example the clicking on number 1 item on the left will expand but most of the items form left will automatically go to right which is not desired.
Now click on number 3. While expanding and after finished expanding this will again come back to left. So you will not have it under your mouse pointer to click again to collapse or click again to expand any of its child items. Try all the odd number before the last item.
Clicking on any items on right before the last item will expand it; but this will open a white/blank space on the left as well.
Related
I'm adding a page to a site (with BeTheme), and it's going under a new menu item. Now the menu is wrapping to a new line for this single item. If I move the menu item, the menu still wraps. There were 7 items, I'm adding an 8th.
Looking at the code generated, a class of "last" is being added, and that seems to control the wrapping.
There's plenty of room for the item, the wrapping seems arbitrary. I can't see where this attribute is set.
Thanks in advance.
I am trying to fix an issue with my CSS where I am trying to create a three tiered horizontal list.
The intended result is that it looks like a three tiered menu.
When the list gets too long, instead of creating wrapping directly below itself, it wraps below the submenu. This is very obvious once the Horizontal window size becomes smaller (1024 instead of 1920).
https://www.w3schools.com/code/tryit.asp?filename=GI4O70ZXQWZ9
Above is the link to the sample code.
White is the main menu, blue is the submenu and green is another sub-submenu.
I have a link/button that moves down when clicked but upon doing so all other menu items move as well. How does one keep the other items in place while the button move down?
http://www.llcinpa.com/ click on Form Your LLC Now
the easy answer is this:
#menu-main-nav li{margin-left:28px !important}
this way no matter what, you'll keep your margins, which are the root of the problem
Updated to add:
I have fixed this, after a fashion. First, I tried calling MySubmenu -> clear() and rebuilding the sub-menu whenever the parent menu was clicked. Surprisingly, this didn't work. So I brought in the big guns: delete MySubmenu followed by MySubmenu = new QMenu (MyMainWindow) and rebuilding the sub-menu. It works now, without much noticeable delay. So I'm happy, I suppose.
Original question:
I have a sub-menu with about 1000 items in it (it's a list of C functions in a debugger). By default, Qt displays the sub-menu in columns, but this sub-menu is too big to fit on the screen, and I have no way to access the items that don't fit.
So I made the sub-menu scrollable, using a style sheet:
MySubmenu -> setStyleSheet ("* { menu-scrollable: 1 }") ;
It looks like this:
Note the scroll buttons at the top and bottom. But now if I select an item (PopRecordLength in this example), then the next time I open the sub-menu, all items above PD_DecryptCommand have disappeared:
The scroll button at the top has disappeared (the little line you can see is an underscore from what used to be the previous item.) And if I scroll down to the bottom, there is a large empty space. The total size of the sub-menu hasn't changed, but the items above PD_DecryptCommand have disappeared off the top, and I can't access them with mouse or keyboard.
However...I have just discovered, in the process of preparing this post, that if I click on this large empty space, the sub-menu disappears, but the next time I open it, it has been restored to its original state. So there is a work-around. But it's not very friendly.
Is this a bug in Qt? Or am I not setting the style sheet correctly?
Probably, since you have so many items that the menu takes the whole screen height, when you select an item its height increases a bit and the scroll button on top gets out of view.
I would try to connect the triggered signal of the menu with the update slot in order to get the menu repainted every time an action has been triggered
connect(MySubmenu , SIGNAL(triggered(QAction*), MySubmenu , SLOT(update()));
You could also try changing the max-height of your menu (max-height stylesheet property).
I'm sorry, not really an answer to your question, but do you really think it's a good idea to put 1000 items into a menu? The usability of this is just terrible. You should find a better way to present so many actions to the user, such as alphabetical submenus ("p" -> "PopRecordLength", "PopShort" ... ). This would also solve your problem with the menu.
I have a ReorderList on my page and it works just great, but...
Now, I have almost 100 items that I'd like to be able to reorder and they flow off the page, even at 8pt. When dragging, the page does not scroll as I approach the bottom (or the top) so I have to drop my item, scroll down, then drag some more. When I drag and drop in Word, as I approach the bottom of the window, the window scrolls so I can move to where I want to drop.
Alternately, it would be fine with me to have the items show up in multiple columns - their width would allow at least 3 columns. But none of the CSS solutions I have found which allow a <ul> to have multiple columns seem to work as they require multiple <ul>s which I don't think I can do with the ReorderList control.
Any ideas?
Here is an idea: Check if the left mouse button is being hold down, and also check for the position of the pointer on the page. If the coordinates are down at the bottom of the page at a position that you think is down enough for the page to be scrolled, then you could use the window.scrollBy() Method, and stop it when the Mouse button is released. You could also set a bool value when a Reorder item is clicked and while the button is down, and set it to false when it is released, and again the same idea, check for the position of the pointer.
Sample window.scrollBy()
Good luck!