I am trying to work with an HTML table that has a scroll feature. When a cell is clicked, a custom component opens. However, I am having trouble getting the custom component to scroll as well.
Take a look at my jsfiddle here:: https://jsfiddle.net/rujz69nq/4/
I am hoping to achieve a result where the custom component opens over the table, so that when clicking on the last row it won't take up extra space inside the table. Does anyone have any suggestions on how to achieve this?
$(document).ready(function () {
$("#test").click(
function () {
appendContainer();
}
);
});
function appendContainer() {
$('#test').after("<div class='floatContainer'><div>test1</div></br><div>test2</div></br><div>test3</div></br><div>test4</div> </div>");
}
$(document).mouseup(function(e)
{
var container = $("#test");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$('.floatContainer').hide();
}
});table, th, td {
border: 1px solid black;
padding:5px;
}
.positionRelative {
position:relative;
background-color: yellow;
}
.floatContainer{
position: absolute;
background-color: red;
margin: 5px;
padding: 0 5px;
height:60px;
overflow-y : scroll;
}
#container{
border: 1px solid blue;
height: 100px;
overflow-y:scroll;
}<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<h2>Test table:</h2>
<div id="container">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td class="positionRelative">
<div>
<div id="test"> test
</div>
</div>
</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
</div>
</body>
</html>I recently encountered a problem in my web app where my Glyphicons in Bootstrap suddenly stopped working, appearing as empty squares for no apparent reason. Even after ensuring that the font files were intact and replacing them with fresh ones from versi ...
While utilizing a Map to populate the Struts2 tag <s:select >, I have noticed that when the form is submitted multiple times, a blank line is added at the end of the list. For example, if the Map contains 2 key-value pairs, it displays 3 records and ...
When deciding between 1x and 2x options: Firefox will opt for 2x if devicePixelRatio is less than 1 Chromium will choose 2x if devicePixelRatio is less than 1.5 Testing this in Safari is tricky as devicePixelRatio remains constant even when scaling t ...
I've been trying to add some popovers to my webpage, but I'm facing a hurdle. I added a few button popovers in the footer, but nothing happens when they're clicked. I created a js file for initialization and imported it at the end of my pa ...
I'm interested in enhancing the appearance of the source code on my WordPress website. Currently, it looks cluttered with unnecessary empty lines and alignment issues. Is there a way to optimize the source code so that everything is left-aligned and ...
We are facing a peculiar issue in our React application involving a sidebar and a bootstrap modal. The problem arises when we click the "X" button in the modal, causing the sidebar to momentarily drop down the page before the modal closes. This strange be ...
Recently, I completed the Getting Started with Flask on App Engine Standard Environment tutorial. If you are interested, you can find the source code here. During my testing using Firefox and Chrome, I noticed that both browsers did not render the HTML te ...
Looking for a way to align multiple divs inside another div vertically with even spacing between them? They should all start at the top. Currently, my solution has the child-divs positioned at the top-left corner of the parent div (see the first picture): ...
from selenium import webdriver import unittest, time, re import HTMLTestRunner class TestAutomation(unittest.TestCase): def setUp(self): self.errors = [] self.driver = webdriver.Chrome() self.driver.get("http: ...
Imagine you have an element like this... <math xmlns="http://www.w3.org/1998/Math/MathML"> <mo class="symbol">α</mo> </math> Is there a method to retrieve the Unicode/hex value of alpha α, which is α, using JavaScrip ...
Hey there, I am trying to create an animation that involves drawing three circles and having one of them move from right to left. The circles should appear randomly in yellow, blue, or orange colors on the canvas at different intervals (3 seconds between ...
How can I ensure the header columns in my Bootstrap 3 table maintain a fixed width, regardless of the content in the regular rows? I want to avoid the messy look of content splitting onto multiple lines. Here's an example: I'd prefer not to adju ...
Here is the code snippet I am working with: <TableCell sx={{ borderBottom: { xs: 0, lg: 1 } }}> <Typography variant="body2">{account.name} ({account.currency})</Typography> </TableCell> I am facing an issue where the ...
Working with TinyIMCE, I am looking to incorporate a border around all images within the textarea whenever a user submits the form. $("form").submit(function() { var content = $("#edit-message1-value").val(); // Afterwards, I want to manipulate the cont ...
After enabling application cache for my web application, I want to ensure that the cache manifest file's version is automatically updated every time I generate the war or deploy the application. This will ensure that the browser fetches content from t ...
Our team is working on an HTML5 application that includes a Google map feature for changing search locations. Recently, we've added an offline version of the app as well. Is there a way to cache the Google map so that when the app is offline, it can s ...
HELP NEEDED: I have been searching for a solution to my problem extensively, both here on StackOverflow and through Google. However, none of the suggested posts or examples seem to address my specific issue. As a beginner, I am struggling to adapt the solu ...
Recently, I created a custom JSON file and wanted to populate a select>option using this data. However, I encountered an error message saying: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/.../p ...
Throughout my experience, I have never encountered this particular issue with the reliable old create-react-app However, on this occasion, I decided to use npx create-react-app to initiate a new react app. Below is a screenshot depicting the progress o ...
After animating elements into view on a page, I want to defer further animation through CSS classes. However, Velocity keeps all animated properties in the style= tag, hindering CSS transitions. My solution involves resetting the CSS upon completion, but ...