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.
Related
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
I am currently using the Intersoft Webgrid 9 for a bunch of our pages. Some of the columns use the built in Calendar popup to edit the date.
The calendar is suppose to popup just under the textbox for editing. In Chrome, this works fine but in IE the popup shows up quite a bit above the textbox.
The calendar popup is a div that is added to the page when the calendar image is first clicked. After the initial click, the div remains on the page but either the visibility changes to hidden when no longer being used or the position changes based on the textbox being edited.
Since we are using Intersoft's resources, I do not have direct access to the javascript for the image click event. I have however been able to add an additional click event to the calendar image but it fires before the div is drawn. After that since the div is now on the page, I am able to adjust the top of the div with jquery through this click event.
So I guess if anyone knows of a way to adjust the calendar control through Intersoft's built in javascript that would be great. Otherwise, I guess I was wondering if there was a way to adjust the top of the div after it has initially been added to the page.
I have attached two images.
Incorrectly displayed
Correctly displayed in Chrome
Thank you so much in advance for any help!
Is the text input element which the calendar is appended to relative or absolute positioned? If the calendar is being positioned absolutely then its parent needs to have relative positioning in order to work as expected. If you append an child with absolute positioning to an element with absolute positioning then they will both use the closest parent with relative positioning to calculate where they should be rendered.
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
I want a image gallery similar to the design as show in fiddle example. It has been customized to look more what we are looking for but i have two issue with this right now
Popup is not aligned in the middle of the page. i tried changing few properties but that didnt work
How can i add working Next Prev button functionality to this gallery so that users dont have to click each time to view the next phone. I had looked at other galleries but each had one of the other problem when i tried to customize them.
I had tried to customize this gallery but i had same it i need to show image in a fixed box 600x300 pixel with image on left & text on right of the image.
I also tried to modify Magnific popup almost change the script to work but this also had an issue as it always start the galley from first image itself irrespective of which image users click on http://codepen.io/anon/pen/LvFxH
I altered the bootstrap tabs to work on hover and made some changes to hide the content tabs correctly.
I want it to function as a dynamic popup/flyout layer.
Now the problem is that it does not work properly when you dont hover over any content after hovering over the menu. I want it to be visible when hovering over the respective tab or over the content itself. The problem with my quick change of the original script is that it will still show the content when you leave the Tab to the left (1st menu item) or to the right (3rd menu item).
It is illustrated in the following jsFiddle:
http://jsfiddle.net/WnQvF/27/
A simple, clean solution would be appreciated.