Adjust the position of the div so that it remains visible as you scroll

Is it possible to position an element within a container that contains a wide table with overflow property so that the element remains visible while scrolling horizontally through the table data?

<div id = "mainContainer" style = "width:300px; overflow-x:auto">
    <div id = "floatingContainer" style = "border: 1px solid #ccc">Stay in the middle</div>
    <table>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
  // additional code removed for brevity
    </tr>
    </table>
</div>

Can this be achieved using CSS alone or is jQuery required? Perhaps utilizing position: fixed relative to the containing div...

jquerycss

Answer №1

Perhaps a different approach?

http://jsfiddle.net/abc123/9/

I encountered difficulties in achieving the desired result without using predetermined height values.

However, someone with more expertise may have a solution that does not require specifying heights for the elements (#mainContainer, #floatingContainer, table).

Answer №2

To ensure your table displays correctly, enclose it in a div element with defined width and height, and apply the CSS property overflow: auto.

<div id="mainContainer" style="width:300px; overflow-x:auto">
<div id="floatingContainer" style="border: 1px solid #ccc">Stay in the middle</div>
<div style"height:100px;overflow: auto">   
  <table>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </table>

If you prefer a scrollbar for the entire container, you can achieve this using jQuery.

var floatingContainer = $('#floatingContainer');
$('#mainContainer').scroll(function(event) {
    floatingContainer.css('margin-left', event.currentTarget.scrollLeft);
});

Check out this demo on jsFiddle.

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

What is the best way to create a line break in a flex div container to ensure that overflowing items wrap onto the next line using

Using material-ui popper to display a list of avatars. Trying to arrange the avatars horizontally within the popper. <Popper style={{ display: 'flex', maxWidth: '200px', }}> <div style={{ marginRight: '20px' }}&g ...

javascriptcssreactjsmaterial-ui

Node Express app issue: Only one page is not having CSS applied

I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS fil ...

cssnode.jsexpresshandlebars.js

Codepen is a great platform for writing and testing code, but it seems like the top tag

body { background-color: black; } .inner{ margin-left:400px; color:white; width:650px; height:450px; top:130px; position:fixed; padding-left:30px; padding-right:30px; text-align:center; background-color:grey; } .outer { height:50 ...

htmlcss

Having trouble with missing jQuery form serialize data in CodeIgniter when using TinyMCE?

I have encountered an issue while using tinymce. I am sending data through a jQuery ajax call like this: // update textarea from tinymce tinyMCE.triggerSave (false,true); $.post ('', $('#page_form').serialize (), function (x){ var ...

javascriptjqueryajaxcodeignitertinymce

Expand the width of the image to fill the entire screen

I have been working on trying to insert an image into my header element. However, when I test it using Live Server, the image doesn't fully fill the width of the container. Update: The dimensions of the image are 899.875 x 600. Below is my CSS and H ...

htmlcssimagecontainers

What could be the reason for the empty space between the upper and middle cuts?

I am working on these two web pages: http://slacklog.heroku.com/ http://slacklog.heroku.com/signup/date As you can see, there is a gap between the top and middle images as well as the bottom and middle images on both pages. Below is my HTML code: <d ...

htmlcss

Chrome experiencing conflicts with backstretch when using multiple background images

In order to dynamically apply fullscreen background images in a WordPress site, I am utilizing Backstretch.js along with a custom field. Everything is functioning properly for the body's background image. However, there seems to be an issue with anot ...

javascriptjqueryhtmlcssgoogle-chrome

The border-radius property in Bootstrap buttons causes unwanted white border artifacts to appear

Strange anomalies in the borders of my Bootstrap buttons caught my attention recently. Upon further investigation, I realized that this issue is not linked to my custom styles or theme, as the artifacts can also be seen on the Bootstrap button documentatio ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Can you explain the significance of the "style.css?ver=1" tag?

Recently, I noticed that certain websites incorporate a CSS tag such as style.css?ver=1. Can you explain the significance of this? What exactly is the purpose of adding ?ver=1 to the CSS tag? Could you provide instructions on how to implement this in cod ...

cssversion

Transferring Information between a Pair of Controllers

Currently, I am utilizing angular version 1.x and faced with the challenge of sharing data between two controllers. In my mainctrl, I am working with the above model. The radiotmplt.radiohead=='IRU600v3' is utilized in firstctrl. Unfortunately, ...

javascripthtmlcssangularjs

What is a global variable used for in JavaScript?

Here is the code snippet that I am currently working on: $(".link").each(function() { group += 1; text += 1; var links = []; links[group] = []; links[group][text] = $(this).val(); } ...

javascriptjquery

Ensuring maximum length validation on input

I am having an issue with the function "checkNumbers()". I am attempting to validate if my input does not exceed 10 numbers; while "isAllowedSymbol()" is functioning correctly, the other one is not. What could be causing this problem? function isAllowe ...

javascripthtmlcss

Using jQuery to exclude the title element within a contenteditable div from selection does not work effectively

Struggling to figure out how to save the content of a contenteditable div to a database using jQuery AJAX. The issue arises with the line page_body: selecting $(".class2").not('h2').html() grabs the title as well, when I only want the rest of the ...

jqueryajaxcontenteditable

Having Trouble with the Spacing Between Navbar and Page Content in Bootstrap?

Let's tackle the issue at hand: Here is the code snippet. A lot of it has been borrowed from examples and tutorials. <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <!-- Brand a ...

htmlcsstwitter-bootstrap

Outlook for Windows automatically sets the default font for HTML emails to Times New Roman

My email design looks great in Mac Outlook, but Windows Outlook is changing the font to Times New Roman. Below is the code for the email template. Can someone help me figure out what I'm missing? <style style="-ms-text-size-adjust: 100%;&q ...

htmlcssoutlooknewsletteroutlook-2016

Content within a Row of a Data Table

Hello! I am just starting to learn JavaScript and jQuery. Can you help me with an issue I am experiencing? Basically, I have a table and I need to identify which tr contains a td with the text "Weekly", "Daily", or "Monthly". Once I locate that specific t ...

javascriptjqueryhtmlcss

Tips for ensuring that the horizontal scroll bar remains consistently positioned at the bottom of the screen

There are two div sections on a page, with one positioned on the left and the other on the right. The div on the right contains multiple dynamically generated tags which necessitate a horizontal scroll bar (overflow:auto). This causes the div's height ...

javascripthtmlcss

Transforming jQuery into vanilla JavaScript in order to create a customized dropdown select functionality

I am struggling with converting jQuery code to pure JavaScript for a custom select element. https://codepen.io/PeterGeller/pen/wksIF After referencing the CodePen example, I attempted to implement it with 3 select elements. const select = document.get ...

javascripthtmljquery

The listener is not activating the AJAX function

It seems like the function validate() is not being called in the listener, causing an error and preventing data from being added to the database. Here is the code snippet from index.php: <!DOCTYPE html> <html> <head> <title>< ...

javascriptphpjqueryajax

Avoiding the use of apostrophes in jQuery or JavaScript

I need to show the text below for the <span> element. What's the best way to handle single quotes in this case? $("#spn_err").text($('#txt1').attr('value')+" is not valid"); The desired message format is 'ZZZ' is ...

javascriptjquery