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
Related
this is the website I am trying to set up: http://koralhassan.com
I have adjusted the template to make the CV section a hover-dropdown section. However, when I scroll down, the dropdown menu no longer appears when hovering. I am trying to find a way to either make the it appear, or make the dropdown expand to the right of the CV section instead of below it (which I think would also solve the problem). I have very little programming knowledge so please don't throw me in the deep end. Thank you!
Your class .w3-bar has property overflow: hidden.
Remove it and it should be fine.
I'm using select2.full.min.js in my Ruby on Rails project in order to give one of my select tags search functionality. I'm initializing it in the most vanilla way possible: $( 'select.select2' ).select2();.
The select2-ified tag seems to work fine, except for one issue - the "modal" when the select is clicked opens over the select element under my mouse cursor as soon as the select is clicked. The problem is, an object is immediately selected and on mouse release, committed to the select tag.
I've seen plenty of examples where the modal always pops up below the select tag, and I'm trying to achieve this functionality, but I'm not really sure what I need to do in order to make that happen. I'm following the examples at the Select2 web site, but don't really see what's wrong here.
Can anyone tell me how I might achieve this? Thank you!
[EDIT] After some investigation, it looks like the problem happens when the viewport is beyond a certain vertical size. If I shrink the browser window enough, the select2 modal pops up above the element. Expanding the viewport size again does not cause the problem to resurface until I refresh the page.
[EDIT2] This appears to have something to do with the calculation select2 uses to decide how to position the modal. It's placed with the following style:
position: absolute;
top: 350px;
left: 472px;
Dragging the bottom of the viewport up to the bottom of the modal moves it up above the select2 element, and the top value changes accordingly. I can override this with my own CSS to fix it.
I'm having issue with jumping scroll bar .I have logic to show Hide section within my form dynamically. But whenever I show sections and scroll down to last section within form and again dynamically hide first two section scroll just jump and again set to field on which I was.
Actually it is working good that setting focus again to same field where I was, but for a moment it feels like scroll jumping and again coming back due hide/show logic.I have used Ext.suspendLayouts() and Ext.resumeLayouts() within my show/hide code, but still I am seeing a small jumping moment of scroll bar. What actually I am missing ?
Add this line after you show the sections.
document.getElementById('ID of section you want to scroll to').scrollIntoView();
I have looked all over for a solution but can't find anything specific and I know it is very doable but I think my lack of experience with JavaScript is limiting me here.
Essentially I have 5 divs, each one acts like a button. I want each button to make another div unrelated to the 5 buttons to appear. I called them "Menubox1/2/3/4" and each one is linked to each one. My first idea was to have all the menus stacked on top of each other with a blank one on top with a z-index of 5.
And then by using the "onclick" method on the div button, I would tell it to get the element of its respective menu and increase its z-index to 6, to go on top of the pile. I would also tell it to make all the other menus go to 4, to go below the rest.
So effectively each button would make the menu associated with it appear on top with the highest z-index and also hide the other menu boxes so that no other box is on the same level.
I have found a way to make it work with this JS
//Shows the current menu on top
function showstuff(boxid) {
document.getElementById(boxid).style.zIndex="5";
}
//Hides the rest of them.
function hidestuff(boxid) {
document.getElementById(boxid).style.zindex="3";
}
<div onclick="showstuff('Menu1'); hidestuff('Menu2'); hidestuff('Menu3');" ;style="cursor:pointer;">
And by putting the respective boxid in the "onclick" , it all works but the problem is it only works once, and I need it to work every time each one is clicked.
If anyone needs more information I an provide.
Why don't you just use visibility:hidden/visible on the panes you want to hide/display? It would require resetting that attribute on each pane on each click, but you don't have to worry about how browsers render z-index, or if there are any times in rendering where you get a weird display of multiple divs rendering when only one should.
I have a website where I want to achieve the following behavior:
if someone clicks on a particular item (image or swf) everything else on the page would either disappear or blur out.
this way the only thing left on the page that is visible is the thing that was just clicked
Is this possible to make everything change except this one div?
Generally speaking, this effect is achieved by setting the z-index of the 'selected' item to a very high value, then adding a position:fixed div to the page that covers the entire page and has a z-index just lower than the selected item. It's generally referred to as a 'modal div'. Searching for 'modal' along with your JS framework of choice will return you a number of usable solutions almost out of the box.
I think you want a modal. Check out the jqueryui dialog widget's modal option:
http://jqueryui.com/demos/dialog/#modal