We Keep Coding

Adjust top of div after load

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.

Position react-modal relative to an element in the background

I have an input box in my main App element (id= "inputBox") and a react-modal that pops up when some input is given to this input box(via onChange event).
I want to position the react-modal just below this input box when it pops open but am being unable to do so.
I have so far only been able to position it relative to the viewport by calculating the offset of the input box and accordingly setting the style.top/style.left of the modal overlay.
But this is causing some other problems,so I need to be able to set the position relative to the input box.
Any suggestions on how to do this will be highly appreciated.

I think you're creating something like a search dropdown where some results appear on users search query. The most simple solution I can think of is to create a new component and include the popup inside that so it will be relative to it no matter what.
Your component will need to have its own state

On scrolling manually capture by alerting its id/class when div which is within container comes at its topmost position using jquery

I want to capture the event when div which is placed within container reaches to the topmost position using jquery (without using scrollspy)
Require pure javascript/jquery logic
Please refer the attached screenshot:
https://snag.gy/xoPVv5.jpg
Wherein the below part boxes are placed within container.
When i scroll within that container, as div comes to the topmost position, please alert it's specific id/class.

Select text in contenteditable after it has changed

I am about to write a input system for a web application that is a bit more complex. We have Labels in our text that are weather displayed as a bootstrap label (when the contenteditable div is blured) or displayed as handlebars e.g. {{firstname}} when the text is focused.
The changing in states is done by jQueries $().html(content) where I change the content based on the source when I focus the text field.
The problem is: if I click the text, I don't want to need to click a second time to place the cursor, because the text changed. It works as long I don't click inside of a tag but inside the contenteditable root element. but if I click inside of a tag inside the contenteditable, the cursor is not set.
my idea was to get the mouse position when clicking the contenteditable and then set the text cursor to exact that position when I have changed the text. But while I know, how I set the cursor to a specific offset inside a text node, I have no clue how to get this necessary offset when clicking. any ideas?
Edit: Here is the behaviour in a little screencast: https://youtu.be/RZvHxxM6wsQ
Edit2: Here is the problem reproduced on the smallest kind of working example:
https://jsfiddle.net/8z5Lnxef/3/

Making jQuery Popbox visible outside of its parent

Using the jQuery popbox library (http://gristmill.github.io/jquery-popbox/index.html) I encountered the following problem:
I have a huge div which has it's overflow set to auto. It is actually a tournament grid displaying a lot of matches to be played. Each match (separate divs) has a small info icon and upon clicking, I'm using the Popbox to display additional information in the window that comes up.
This is all working correctly, however, whenever I press the info icon on a div that's close to the bottom side or the left side of the parent div which has it's overflow set to auto, part of the popbox window is not visible as it ends up outside of the parent div. I'm looking for a user-friendly way to solve this issues.
Setting the parent's div overflow to visible is not an option as I need the scroll bars to appear if it gets too large. It would be nice though if I could make the Popbox window go outside of the parent div and be completely visible.
The other idea that I can think of right now is to set special classes to the info icons close to the edges and adjust the popbox window to the right/top so it is visible in the parent div regardless of its overflow.

I suggest you to use some special classes and make the popover "pop" on top/right.
You can see an example here: http://getbootstrap.com/javascript/#popovers
If you want to use Bootstrap you can make a custom build here: http://getbootstrap.com/customize/?id=6493526
Popover css+js is only additional ~ 10k min+gzip