Here is my code snippet.
table#projectTable > tbody , table#productTable > tbody{
height: 300px;
overflow: auto;
}
The scrollbar is functional when clicking the top part, but not the bottom. It's quite odd.
Upon using Firefox inspect element, I suspect the issue lies with the TR element overlapping. The scrollbar works perfectly just above the (imaginary extended line from) second row (Edit product info).
My suggestion is as follows:
.innerDiv{position:absolute;top:80px;left:185px;z-index:10;}
This solution should resolve your issue.
You may already be aware, but I would like to recommend considering a tableless design approach when creating layouts.
For instance - here is an improved sample -
HTML
<div id="container">
<div id="left">
<a href="#" onclick="hide('table1')">Edit branchInfo</a>
<a href="#" onclick="hide('table2')">Edit branchInfo</a>
<a href="#" onclick="hide('table3')">Edit projectList</a>
</div>
<div id="right">
<div id="table1"> ...1... </div>
<!--#table1-->
<div id="table2"> ...2... </div>
<!--#table2-->
<div id="table3"> ...3... </div>
<!--#table3-->
</div>
<!--#right-->
<div class="clear"></div>
</div>
<!--#container-->
CSS
.clear {
clear: left;
}
#container {
border: 1px solid #666;
padding: 5px 5px 0 5px;
}
#left, #right {
float: left;
}
#left a {
display: block;
width: 100px;
height: 200px;
font: 12px/200px arial;
border: 1px solid #999;
margin-bottom: 5px;
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #666;
}
#left a:hover {
background: #efefef;
}
#left a:active {
background: #c0c0c0;
}
#right {
border: 1px solid #999;
margin-left: 5px;
padding: 10px;
height: 654px;
width: 900px;
}
I've been struggling to make a responsive image fit inside a panel while maintaining its aspect ratio and ensuring none of it gets cut off. I've attempted various CSS tweaks with no success. My setup involves Bootstrap along with React.js using r ...
I am passing a parameter from HTML to JSP, but when I try to retrieve the value in JSP, it returns null. Can someone help me figure out what's wrong with my code and provide any suggestions? The value is successfully displayed in an alert using JavaS ...
I have organized my files in the following structure: - index.html - css/styles.css This is the HTML code I am using: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> & ...
I have encountered an issue where three rows of text links near the top of a page shift up to the very top when a link is pressed, causing them to obscure a line of text that was already at the top. How can I keep the position of these three rows anchored? ...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <span class="fake_h">Too</span> </body> <script> $('.fake_h').click(function() { $(this).addClass( ...
I'm attempting to set up a customized checkout integration with Stripe on my Flask web application and I've encountered some issues. After copying the code from the Stripe documentation (located at https://stripe.com/docs/checkout#integration-cu ...
Attempting to center the image using margin-left: auto and margin-right: auto properties in the code snippet above has proven unsuccessful. The image is not aligning as desired. What could be causing this issue with the code? Are there any other techniq ...
Is there a way to utilize JavaScript in determining the value set for auto height in CSS? My development stack includes Grails and jQuery. For instance, consider the following CSS: .tool-preview { height: auto; } ...
I have set up a webform for users to request access to my CV. After submission, I aim to save their details in a phpMyAdmin database. As a PHP beginner handling databases within an HTML file, I received some code that needed modifications to fit my form fi ...
Not sure if browsers support this feature. It works fine in a div, but that's not very semantically correct. Here is a rough mockup of what I'm trying to achieve: Mockup Link /* CSS for select elements on page */ select { position: relative ...
I need the select option dropdown values to display employee names along with their titles in a lined up format. For instance, if my values are: Bob Smith Director Mike Kawazki HR Jane Doe Manager I want them to be shown as: Bob Smith Director Mi ...
I have recently created a gallery with navigation buttons in jQuery. As a newcomer to jQuery, I wrote a small script that adjusts the margin of a div container by a fixed amount. The script is functioning properly, but it extends beyond the top and bottom ...
My website features buttons for zooming in and out, labeled as A + and A-. I wanted to make sure that the entire body of the website could be magnified easily. That's why I came up with this code: <html> <body> <style> .cont ...
I am currently using the latest version of bootstrap and bootswatch united theme to build and explore a standard website. The website is live at this link live site, featuring an embedded section on the right side as shown. My choice for the view engine is ...
I recently implemented a mod_rewrite rule on my website that transforms example.com/en/about/topic into example.com/en/view.php?p=pages/about/topic.php The specific rule I used is: RewriteRule ^en/([a-zA-Z0-9/]+)$ en/view.php?p=pages/$1.php In view.p ...
I have a structured data in MongoDB as shown below: var Person = new Schema({ "Name": { type: String, required: true }, "DOB": { type: Date, "default": Date.now } }); An instance of this schema is created using NodeJs with mongoose ODM: { "N ...
Similar Question: Is there a W3C compliant method to disable autocomplete in an HTML form? How can I stop a browser from remembering the text field's content? The issue arises when the field has a value like 100, followed by a currency symbol suc ...
I am currently retrieving data from an API that provides information in a specific format. Here is an example of the JSON data I receive: { "total":1, "launches":[ { "name":"Falcon 9 Full Thrust | BulgariaSat-1", "net":"June 23, 2017 1 ...
I'm currently developing a basic webpage that has a feature allowing users to download the final result as an image file in the last step. To achieve this, I've added a hidden HTML button for downloading the result image and used CSS to set its ...
I am faced with an issue involving two modals. My goal is to have the "Novo Avatar" button close the modal with the ID #modal_debug and then open the modal #modal_newAvatar. However, instead of closing the current modal, it simply opens the new one on top. ...