Is there a way to make the X-editable datepicker appear next to the date field rather than in the same spot every time?

When utilizing X-editable, I encountered a problem where specifying the datepicker field mode as "popup" results in the popup displaying correctly. However, when dealing with a long table (either vertically or horizontally), the position of the date/datetime picker popover becomes an issue. It consistently pops up at a fixed location on the page (top left).

For instance, if there are 50 records and I click on one towards the end of the list to trigger the date picker, the popover might appear off-screen. In such cases, I have to scroll all the way back to the top of the table just to see it.

The situation worsens when working with tables that extend far to the right on smaller screens. To view the opened popover, you would need to scroll all the way back to the left. This behavior might lead to confusion and make it seem like the script is malfunctioning.

Here is how I have defined it - could I be missing something here? Or is it perhaps related to CSS?

$('.time').editable({
    type: 'datetime',
    url: 'post.php',
    format : 'yyyy-mm-dd hh:ii',
    viewformat : 'yyyy-mm-dd hh:ii',
    inputclass : "datepick",
    emptytext: '...',
    datetimepicker : {
        weekStart : 1
    },
});

Answer №1

Indeed, there is a longstanding issue with tooltip and popup positioning.

Here is a helpful trick you can try:

$('.time').editable({
    type: 'datetime',
    url: 'post.php',
    format : 'yyyy-mm-dd hh:ii',
    viewformat : 'yyyy-mm-dd hh:ii',
    inputclass : "datepick",
    placement: function (context, source) {
      var popupWidth = 336;
      if(($(window).scrollLeft() + popupWidth) > $(source).offset().left){
        return "right";
      } else {
        return "left";
      }
    },
    emptytext: '...',
    datetimepicker : {
      weekStart : 1
    },
});

Feel free to check out a working example here: http://jsfiddle.net/giftedev/yo0ztmkr/1/

Answer №2

Issue Explanation

To clarify, it seems that you are dealing with a lengthy table filled with fields that users need to complete (similar to this demonstration page). As you scroll through this table and click on a field, the corresponding pop-up appears far above on the page. Is my understanding correct so far? If it is...

I have examined how X-editable generates these pop-ups. The primary method it utilizes is as follows:

  • It creates a div (the primary container) and attaches it right after the node that triggers the pop-up.
  • This div uses an absolute position with specified top and left values.
  • The values for top and left are calculated by a recursive function that adds the offsetX and offsetY of its parent elements recursively.

This approach of displaying a pop-up div is quite common and functions effectively in all scenarios.


Possible Reasons for this Issue

Where might the problem lie?

  • Library Codes: It seems unlikely that the bug resides in the X-editable codes, as I modified the HTML codes in the demo page using Firefox Developer Tools and changed the row heights to a significantly large number (1000px), yet the pop-ups continued to appear in their correct positions.

  • Your Custom Codes: This is the more probable culprit. I observed that this library employs several class names for its main pop-up div, such as popover, editable-container, editable-popup, fade, in, and right. These names could potentially clash with your own defined classes and result in unexpected behavior in the pop-ups, such as overriding the absolute position with a relative one. Therefore, ensure that your CSS class names differ from those set by X-editable.

I am unable to provide more specific guidance without reviewing your HTML codes. If my insights did not address your issue, please furnish additional information about the problem at hand.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Creating a link to a button with the type of 'submit' in HTML - a step-by-step

Found the solution on this interesting page: In a list, there's a button: <form> <ul> <li> <a href="account.html" class="button"> <button type="submit">Submit</button> ...

Navigate to a new webpage using a string of characters as a legitimate web address

When a user performs a search, I pass the search term as a string to direct them to a new page. How can I create a valid URL (e.g., remove spaces from the string)? It's crucial that the next page can recognize where any spaces were in the search word ...

Is it possible to navigate to a different section of a webpage while also jumping to a specific id within that section seamlessly?

I'm trying to create a navbar link that will take me directly to a specific section of a page, but I'm having trouble getting it to work. Here's what I've tried: <a href="home#id" class="nav-link text on-hover"></a> Where ...

The alignment between the view and controller in Salesforce (Visualforce) is not effectively synchronized

Currently, I am utilizing a visualforce page to input scores for a series of questions. Within the controller, there is a map that stores these values and then saves them to the Database once the save button is pressed. However, upon clicking the button f ...

Issue with displaying Favicon on staging server

I need assistance with this issue. I am working to show a title and logo on a tab. It is functioning correctly on my local machine, but the logo is not appearing on the staging server. <title>Global</title> <link type="image/png" href ...

Items vanish when hovering over them

Creating nested links in the sidebar navigation bar with CSS has been a challenge for me. While hovering over main links, I can see the sub-links being displayed. However, when I try to hover/click on the children of the sub-links, they disappear. Note: M ...

JS script for clicking various icons on a webpage that trigger the opening of new tabs

I am working on a webpage where I have 9 icons with the same class. I am trying to write JavaScript code that will automatically open all 9 icons when the webpage loads. I tried using the code below, but it only clicks on the first icon and stops. let ...

JavaScript Function Not Executed in Bottom Section

I've implemented AngularJS includes in my project. Below is the code snippet from my index.html: <!DOCTYPE html> <html ng-app=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> ...

Activate a click event on an element using Simple HTML DOM

I need assistance in triggering a click on the element below and then retrieving its innertext. <a class="btn btn-sm btn-default" href="javascript:;" onClick="score(238953,this)">Show result</a> Once the "onClick" event is triggered, the elem ...

Combining the value of $(this) to create an identifier name

I am attempting to create a hover effect on an h1 element that triggers the glowing effect on a span element with an id that corresponds to the value of the h1. While I have successfully set up a glowing effect for a sentence, I am struggling to replicate ...

Align button text vertically in the middle using Flexbox with Bootstrap 4

Why is the text in the button displaying at the top instead of the center when using internet explorer? button { height: 100px; } <div class="container"> <button class="w-100 f-default-f btn btn-primary d-flex justify-content-between px-3"& ...

Is there a way in Angular2 to append a class name from a variable to the host element without removing the current classes?

I am facing a challenge where I have a class name stored in a variable and I need to apply it to the host element of my Angular2 component. However, I am struggling to find a solution for this. While I can easily add a constant string as a class using Hos ...

Obtain the content enclosed by HTML tags

Looking to extract text between html tags? Imagine having a list of cities in California, each within paragraph tags. Can you retrieve only the text inside the paragraph tags? <div class="cities"> <div><p>Los Angeles</p><h5 ...

Convert a multidimensional array into a string using JavaScript

Currently, I'm in the process of generating an invoice for a collection of books and my intent is to submit it using ajax. However, when attempting to json encode the array of books within the invoice, I am encountering a setback where the value keeps ...

Sticky footer with overlapping DIV

I am working on a container with three nested divs: header, content, and footer <div class="note"> <div class="header">Title</div> <div class="content" contenteditable="true">Some content</div> <div class="fo ...

"Utilizing Bootstrap to create a visually appealing image and text combination in the

I need to arrange the image, first span, and second span in a vertical stack for xs devices. The alignment should be centered for xs devices. If you want to see my code: CLICK HERE <div class="row"> <div> <div class="col-md-9 c ...

Comparing HTML5 Drag and Drop to jQuery UI Drag and Drop: What's the Difference

In the ever-evolving world of web development, what is the most effective method for creating a drag and drop builder in 2017? While this question has been posed in the past (as seen here), technology changes rapidly. Is HTML5 still the go-to option, or ha ...

Utilizing MVC Razor and Ajax.BeginForm to dynamically update elements upon successful form submission

In my MVC search form, there is a date field that includes "-" and "+" buttons to navigate to the previous or next day, triggering a search each time. The issue I am facing is that when the -/+ button is clicked, it sends the current form data to the cont ...

How to make background color transparent in CSS for Safari browser

Does anyone know how to make the background color transparent in Safari? Right now, my PNG file is showing with a white background instead of being transparent. I have attempted: background-color: transparent; background-color: rgba(255,255,255,0); appe ...

Creating a List Item with Equal Height as Its Parent Container

<nav> <ul id="navUl"> <li> <div class="settingsDiv"> hey </div> </li> </ul> </nav> I am trying to adjust the height of the div element to match the height of the nav. My g ...