What I am trying to do ?
I have a custom Menu in my app with some options (say 8 options)
Based on some logic I need to disable some options in the menu (say last 4 options)
If the user hovers over any disabled option, I need to show a popup explaining why the option was disabled
Issue :
Since the number of options in the menu are not known before-hand, the menu should be scrollable to accommodate for more options (if required)
However, the popup upon hovering on a disabled option should overflow the menu boundaries (if required)
This basically boils down to having overflow-x: visible and overflow-y: auto which is not possible as per the specs
Some of the posts that I referred use absolute positioning to get around this issue but that does not seem to help here
References :
How do I enable scrolling only in one direction in CSS?
Break out of overflow:hidden
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
I tried to create my dummy custom menu that reproduces the issue : https://codepen.io/adiltan/pen/BaJJzOb
I have tried using absolute positioning but I could not get it to work
A DOM method getboundingclientrect will solve this for you.
This method returns selected element's placement so you don't need to nest the tooltip inside your menu.
Make a wrapper that will contain your tooltips as direct child of body and give them placement you got from getboundingclientrect.
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
I am stuck on a HTML overlay issue. My page have a overlay container. It blocks the clicking of the dropdown behind it. I tried to set a very high z-index for the dropdown, but it doesn't work.
Fiddle for my issue:
> https://jsfiddle.net/ao4dLp3g/2/
Can I get some help? I want to have the original click behavior of dropdown. Is there a way to exclude the dropdown element from the overlay.
It may not be a good idea to create separate overlay containers to cover the rest of area since I may have many elements to exclude.
Thanks!
If you change the position property of the button to relative, you can set its z-index to be higher than the z-index of your overlay.
#dropdownMenuButton{
z-index:1001;
position:relative;
}
https://jsfiddle.net/u0p5fv8t/
I have a R Shiny application, but I believe my question requires a HTML/CSS (possibly jQuery?) solution in which I am not too familiar with. I produced two simple Shiny apps which exemplifies the issue I am currently facing.
https://sometesting.shinyapps.io/test/
https://sometesting.shinyapps.io/test_-_copy/
The first one does not contain the CSS property:
.sidebar {
height: 95vh;
width: 300px;
position: fixed;
overflow-y: scroll;
}
While the 2nd link does contain the above CSS property. You can see in the 2nd link, the drop-down menu gets clipped.
I would like to avoid this clipping issue, and have the drop-down menu go over the sidebar and scrollbar. I've researched for many hours and found a few jQuery solutions, but due to my unfamiliarity with jQuery plus how drastically different the R Shiny-generated HTML syntax is to me, I am not able to solve this.
Thanks!
Edit
Thanks to moose for helping me solve this! Check out this thread:
Rendering Shiny Selectize pull-down menu on top
Pretty much, I placed dropdownParent: "body" in my selectizeInput function as such:
selectizeInput("s1", h4("Select State:"),
options = list(dropdownParent = 'body'),
choices = state.name)
You may need to adjust the width and height of your selectize-dropdown. Thanks moose!
The issue is with the selectize dropdown. If you made the html list visible, the overflow works as expected, but I'm assuming you need something more powerful than the default select list.
There's a similar issue solved here:
https://github.com/selectize/selectize.js/issues/192
Even though it's overflow-x rather than y, the solution should be the same. Failing that, you can try Semantic UI's dropdown (or better yet, Fomantic UI)
I am trying to use the Pivot component from the Office UI Fabric JS library but I have found that it does not have functionality to deal with link items overflow.
The documentation shows the overflow as ellipsis however this does not have any functionality behind it. It is just for presentation.
As anyone modified this component so that it automatically resize and show all the links correctly?
There is a known issue with the Pivot control. In order to get it to work, you need to override the overflow-x: hidden that is set in the default stylesheet. Adding the following to your page's CSS seems to fix it:
.ms-Pivot{
overflow-x: visible;
}
You'll also need to make sure you wire up the JavaScript for Pivot and Context Menu. This includes the script to swap the is-hidden and is-open classes when clicking on the ellipsis.
At the moment there isn't any automatic sizing of tab or automatically moving the overflowed elements into a context menu.
Is there a way to display the vertical scrollbar immediately after the page loads using javascript? I have a jquery slide toggle animation that, when activated, makes the vertical scrollbar appear because the toggle animation makes the page longer. The problem is that when the scrollbar appears, the document elements "spasm" or "shake". If the vertical scrollbar appears before the jquery animation is activated then I won't have the problem.
Update: overflow-y:scroll; does the trick without much compatibility issues!
Depending on your current function, you can use jQuery (or plain JavaScript) to find the current max-height (that the element can expand to without making the page longer), and simply apply that height (or one that's smaller) with overflow: hidden. Once the new element has been successfully added, the overflow can be re-set to overflow: auto; (or overflow: scroll;).
Or you can set position to fixed on elements animated at begin to avoid scrollbars...
Can you create a jsfiddle.net with a little example of your code ?