Dropdown pushes screen focus down using UIKit - javascript

I'm using UIKit to make a dropdown. The dropdown hovers over the content, which is wanted behaviour for me. When the button is so close to the bottom of the screen that it won't have enough space to show the dropdown itself totally, it pushes the screen focus down. I'm not quite sure what's causing this, the dropdown itself gets display:block; when the button is clicked, but it needs that to be visible.
Is there some way to open the dropdown, but without the screen jumping to the bottom? (So people can see they're missing content and their reaction should be to scroll down a bit?)
I made a Codepen to show what's happening. http://codepen.io/InstaK/pen/GWYwdM

Related

Angular 8 cannot get child panel to scroll properly to top of screen

I have a parent component that has 4 child components inside of it, each of them a primeNg panel with a form inside of them. The first 3 panels are expanded at all times(the collapse and expand icons are set to empty strings) and the last one is collapsed on load. On the last panel, I have a button that allows you to "Edit" the information which appears inside it and expands the panel.
What I would like is for this 4th panel to then get pulled to the top of the screen. However what actually happens is the panel expands and the scroll bar moves up, but the panel itself stays put.
I have tried several different options to get this working using various combinations of scrollTop, offsetTop, scrollIntoView, etc but nothing has worked. The scrollbar moves but the content does not, it stays where it was.
I even tried to set the id to an element half way down the form on the last panel and then used scrollIntoView: {block: 'center'} as an option...still nothing, same thing, it scrolls the scrollbar but not the content.
Can someone help me out with this and let me know what I am doing wrong?
in parent component:
<p-panel1></p-panel1>
<p-panel2></p-panel2>
<p-panel3></p-panel3>
<p-panel4 id='scrollToHere'></p-panel4> <---I want to scroll p-panel4 to top of the window
when the edit button is clicked
UPDATE:
Got it fixed by using setTimeout(document.getElementById('scrollToHere').scrollIntoView({behavior: 'smooth', block: 'start'}),0)
gotta be one of those weird DOM things where it tried to scroll before the panel was expanded...will try and change it to onAfterToggle but not sure if that will work because I am not using the icons and using a button to do it.
#Matte the scroll into view should work. But it seems that the scroll into view is triggered before you contents are expanded so try with some delay. And there should be more page content below your last panel if there is nothing and it is the last thing on page then the page would not scroll to the top of the height is smaller then the screen

How to scroll form panel at top?

I am working on a sencha touch mobile app. There is one form panel having many fields so I kept it as scrollable. when I open that screen (panel) and scroll down. and go back to other screens and again come back to that screen panel, it remains scrolled down at bottom position. I want to always set it at the top when I will open it. I have tried some code on activate event of that form, but it doesn't seem to be working.
I have tried to belove code in the activate event.
this.formPan.element.dom.scrollTo('top', 0);
//this.formPan.reset();
//Ext.getCmp('mainscreenpanelId').element.dom.parentElement.style['-webkit-transform'] = 'translate3d(0px, 0px, 0px)'
//--3rd commented line of code works, but after activate/on focus form again it comes to last scrolled position--
also, I checked if any method is there to scroll at the top, but didn't found.
Is there any way to do that.
below images more discribing my issue, screen is default when we open form first time
2nd Image remain srolled at bottom.
I have used window.scrollTo(0, 0) to scroll screen always top.
Try this.

datepicker/datetimepicker jQuery widget appearing on different div

So, the scenario is that I have a webpage with two divs, one main div and a sliding div panel implemented using mmenu, which appears on a button click from the main div. And now I have a text box on the right sliding panel, on which I am trying to use the datepicker widget (also tried the datetimepicker widget - http://trentrichardson.com/examples/timepicker/).
Now, the problem is that when I click on the text box and the datepicker/datetimepicker widget appears but not on top of the text box but it appears at a distance on the main div. It seems that if I have the right panel clicked and then I hover over the widget, then also the widget does not seem to show the on hover button color changes, but if i click on the main div and then hover over the datepicker widget, then all the changes expected on hover occurs. So, it seems that the datepicker widget is drawn over the main div.
I have been trying to debug this for hours now, can anyone think of any reason why this might be happening and how to make the widget appear on top of the textbox in the sliding div and not on the main div.

HTML5 slide menu form right to left

I am developing my first HTML5 page for mobile and desktop and I need to implement slide menu button! When you first click this menu button it will open menu which covers 50% of my screen and menu contain something similar to "log in bar"(some inputs and some text; like top right corener of FB), and after you click button menu, it will be hidden!
I have implemented some solutions but I'am not satisfied with them!
One variant of my menu is to do everything right but it is visible to user all the time! Animation works fine but when I want menu to be hidden, it becomes visible right of screen.
Other possible solutions : picture and buttons go under the menu! When it opens, it "push" pictures and buttons below.
P.S i tried to add image but it seems that I don't have more than 10 reputation! Also, I didn't watch tutorials for jQuery so if any solution is theer in jQuery, please suggets me..

How to make the dropdown in the top menu to appear without delay/animation?

I have a menu with a dropdown here. How do I make the dropdown to appear instantly, like on this site?
Edit: I figured out what causing the delay : dropdown wouldn't show up while the mouse is moving, it only shows when mouse is stopped.So if the mouse never stops on the menu item - dropdown would newer even showup...
Edit2: It appears, the problem is only presented in Chrome, FF and IE work as intended..
The problem is that the browser isn't loading your background image because it is initially hidden. The delay is caused by that image being requested from the server. I would pre-load it somehow-- maybe add a dummy pixel-wide div at the bottom of your page with that image as the background-image.

Categories