I am using a DHTMLX 3T layout, in which topmost layout(a) has the bootstrap components(Drop down, search box, etc).
When I click on the dropdown, the menu is getting hidden behind the other layout(c) and I am unable to see the menu list. Can you let me know the solution for this problem so that i can see the menu items.
I have tried to set the z-index for the drop down but still unable to resolve the issue.
Your bootstrap menu is attached to the layout cell and designed so that it is not available to show it outside the current container.
You may only try to create your menu outside of the layout cell.
Related
I have encountered this strange issue where the dropdown will jump to the top left if scrolling with overflow: scroll or if it's bigger than the body.
I'm trying to "dynamically" change a dropdown button to an input on keypress, and have it share the same dropdown box. The content of the dropdown changes as you type.
I think it's better to illustrate the issue by showing a direct example, (because it's a bit big): https://jsfiddle.net/eno4v9kL/
The issue occurs if you scroll down, and then start typing something. It will then jump to the top left.
I have kind of tried to control the behavior of the dropdown but I don't understand how it should be handled;
dropdown = new bootstrap.Dropdown(elm);
I'm not quite sure how to handle this properly in JavaScript, because bootstrap initializes the dropdown automatically. How does one control this automatic behavior?
I think a possible solution would be to have 2 dropdowns, one for each element instead of sharing the same dropdown, but I would like to only use this one dropdown if possible
We are using a react-select dropdown and react-table grid below the dropdown. The issue I'm facing is, when I try to select a value from the dropdown, the cursor is trying the resize the table header when the dropdown values overlap with the table header.
I tried to create a sandbox code to explain the issue better but I found the issue in one of the existing examples here Sandbox example.
Please see the image below to understand the issue.
Image showing the issue
When the user clicks at the exact point on UI as shown in the pic above, instead of selecting a value from dropdown, the user ends up resizing the table header.
Is there any way to avoid this issue and ensure that the cursor stays on menu list?
Any help is appreciated.
add style={{ zIndex: "-1" }} to your ReactTable component
I am trying to figure out how to use a filtering js such as isotope inside of a dropdown menu.Let me explain in detail.
I would have a set of Dropdown menus that a user would click through, in the end producing a link that is specific to what they have chosen in the dropdown menus. As the user chooses options in the dropdown menus, I would like some options in the following dropdown menus to either grey out or disappear.
On another note, I would also like to be able to filter a list of links based dropdown menu choices from the user. I was wondering if this is possible?
I am trying to do this with only HTML, CSS, and jQuery. Can someone put me in the right direction?
(hopefully what I've said makes sense...)
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.
I dont know what it is called but you can see on this page http://carleypelletier.deviantart.com/gallery/#_browse if you click on a category you'll get a list and if there is a subcategory there will be a > at the end. When clicking this the menu text moves left off the menu and the new categories are in. How do i do this type of menu? i'm open to any libs. It would be nice if i can fill it using json or a config file.
Check this Chinese menu of jQuery drop downs, you are looking for a "drill down style of menu, on the menu you will see a "jQuery iPod-style Drilldown Menu" which is pretty close to what you want, they just used multiple ones.
A working example of one is here