Preventing the horizontal scrolling of my application's sticky header

My application layout can be viewed here: http://jsfiddle.net/rhgyLjvx/

The layout includes a main header (red), sticky section header (dark blue), fixed footer (grey), and fixed left side nav (green). The application should have full scroll bars on both sides, scrolling only the main section (yellow).

Vertical scrolling works as intended. However, the sticky section header (dark blue) scrolls horizontally with the section.

Is there a way to fix the sticky header to the left and right sides and prevent it from scrolling sideways?

I am also facing another issue where the entire application scrolls on mobile devices, including the fixed position divs. Please test it in a mobile emulator.

Array.from(document.querySelectorAll('.Sticky')).forEach((stickyEl) => { console.log("&&&&&&&&& ", stickyEl) Stickyfill.add(stickyEl); }); #root, body, html { height: 100%; width: 100%; } .app { height: 100%; width: 100%; } .main { padding-top: 70px; height: 100%; box-sizing: border-box; } .header { width: 100%; float: left; min-height: 70px; max-height: 70px; background-color:red; padding: 20px; box-sizing: border-box; position: fixed; z-index: 999; } .sidenav { background-color:green; width: 250px; float: left; overflow-y: auto; position: fixed; height: 100%; z-index: 999; } .landing { height: 100%; background-color: black; position: absolute; left: 250px; } .content { padding: 5px; height: 100%; background-color: grey; } .view { width: 100%; background-color: aqua; } .page-header { background-color: #0c004a; height: 50px; z-index: 999; position: sticky; top: 70px; right: 0; left: 250px; margin-left: 5px; margin-right: 5px; } .page-section { flex: 0 1 auto; margin-bottom: 50px; background-color: purple; } .page-content { width: 100%; background-color: pink; } .page-panel { display: block; background-color: yellow; margin-bottom: .5rem; width: 75rem; min-height: 43.8rem; } .page-footer { height: 50px; background-color: #979797; opacity: 1; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; position: fixed; bottom: 0; right: 0; left: 250px; }
javascripthtmlcss

Answer №1

HTML Code Cleanup After reviewing the HTML code provided, I noticed a lot of unnecessary nested DIVs that were not serving any purpose. Additionally, there were references to classes in the CSS file that did not exist, and the JavaScript (jQuery) code seemed irrelevant to the content you have shared with us.

Code Preview I took a look at the code in a larger preview window and everything seems to be working fine. However, you may need to adjust the CSS to set the desired height.

#root, body, html {
  width: 100%;
  margin: 0
}
header {
  background-color:red;
  position: fixed;
  width: 100%;
  min-height: 70px;
  max-height: 70px;
  box-sizing: border-box;
  padding: 20px;
  z-index: 2; 
}

.pro-main {
  padding-top: 70px;
  box-sizing: border-box;
}

nav {
  background-color:green;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  width: 250px;
  z-index: 2; 
}

.pro-landing {
  position: absolute;
  left: 250px;
  background: #979797;
  padding: 5px;
}

.objectview {
  width: 100%;
  background-color: aqua;
}

.card-header {  
  background-color: #0c004a;
  position: fixed;
  top: 70px;
  height: 50px;
  width: 100% ;
  z-index: 5;
  border-top: 5px solid #979797;
}

.card-section {
  margin-bottom: 50px;
  width: 100%;
}

.card-panel {
  display: block;    
  background-color: yellow;
  margin-bottom: .5rem;
  padding-top: 50px;
  width: 75rem;
  min-height: 43.8rem;
}

.card-footer {
  background-color: #979797;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 250px;
  height: 50px;
  text-align: right;
  line-height: 3em;
  padding-right: 1ex;
}
<div id="root">
  <header id="app-header" class="pro-header"></header>
<div class="pro-main">
    <nav id="side-nav"></nav>
    <div class="pro-landing">
      <div id="deb/m10mast/debtor-maint" class="objectview">
          
          <div class="card-section">
<div class="card-header"></div>
        <div class="card-panel" style="width: 75rem; min-height: 43.8rem;">
        

              <label>Customer WWDSSD:</label>
              <label style="margin-top: 750px;display: block;">Last Change skdjskdq :</label>
            </div>
          </div>
          <div class="card-footer">
            <div>
              <button name="OK" class="ok">OK</button>
              <button name="Cancel" class="cancel">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer №2

If you want to improve your CSS skills, look into utilizing display: flex and similar techniques. Check out this helpful Tutorial

Alternatively, you can access a practical example by clicking here

An added benefit is that these methods automatically adjust for changes in page size and orientation.

Answer №3

 /* All you have to do is modify it as shown below */
 .card-panel
 {
position: absolute;
}

.card-header {

position: fixed;
top: 78px;
right: 0;
left: 254px;

}

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

The Angular model does not automatically refresh when the Space or Enter key is pressed

Having an issue with my editable div and the ng-trim attribute. Even though I have set ng-trim to false, pressing SPACE or ENTER does not increment the string length by one in the div below. Using Angular 1.3.x and wondering if anyone has any ideas on how ...

javascriptangularjsangularjs-scope

Is my approach to CSV parsing correct if I am receiving the error "Unable to assign property 'processing' to undefined"?

In our database, we store words along with their categories. I have a new requirement to enable the word administrator to upload multiple words at once using a CSV file. Currently, our system only allows for single-word additions at a time. My solution was ...

javascriptangularcsvtypescriptcallback

I'm struggling to find a way to turn off the scroll bar

I'm having trouble disabling the scroll bar on my website for specific reasons. Can anyone provide me with some guidance? <iframe src="video" width="960"height="540" frameborder=0 ></iframe> ...

html

What could be causing my jQuery to malfunction with version 1.9.1?

I am facing an issue with my website which primarily operates on jQuery version 1.9.1. However, I need to integrate a plugin that specifically requires version 1.4.1. Is there a simple modification that can be made within the plugin code to ensure compatib ...

javascriptjquery

Can you provide the regular expression that will reject the character "?"

Can you help me verify that my form does not accept double quotes? Validators.pattern(/^(?!").*/g) The current solution is not functioning properly. I want to allow all characters except for double quotes. ...

javascriptregexangular5

Use Typescript in combination with React/Redux to showcase a dynamic table on the

Looking to create a React TypeScript Redux application that showcases a table using an API endpoint provided at https://example.com/users The goal is to construct a table with 4 columns: Name, Email, City, and Company, utilizing the API response to popula ...

javascriptreactjstypescriptreduxjestjs

Error in test runner: Cannot convert type 'Cucumber' to type '? extends Runner' in Java cucumber

I'm currently working on setting up the Cucumber framework using Java for running my tests, but encountering a type mismatch error in the Test Runner. package cucumbertest; import org.junit.runner.RunWith; import cucumber.api.CucumberOptions; import ...

javascriptselenium-webdrivercucumber

Shift the sleek navigation arrows to the interior of the slides

Is there a way to relocate the navigation arrows on the slider images? I have tried various methods found online with no success. Currently using ASP.NET, but doubt it matters. Employing the latest version of SLICK. Here is the HTML code snippet: <%@ ...

javascripthtmlcssasp.net

Utilizing checkboxes for toggling the visibility of buttons in Angular

I want to dynamically show or hide buttons based on a checkbox. Here is the HTML code I am using: <input class="form-check-input" [(ngModel)]="switchCase" type="checkbox" id="flexSwitchCheckChecked" (change)=" ...

htmlangulartypescripttwo-way-binding

Tips for displaying a PNG image correctly within the navbar

I'm facing an issue with adding a logo to the navigation bar, as the logo I want to use doesn't display correctly. Even after trying to adjust the width and height, it continues to stretch inappropriately and the text on the image remains unread ...

htmlcssbootstrap-5

Having trouble running the d3js example on Ionic 2

I am having trouble running the example provided in this link: https://github.com/abritopach/ionic2-d3js-example Even after installing the latest Ionic 2 version and npm, I encounter an error when trying to run the app, as shown in the browser console. p ...

javascriptangularjsnode.jsd3.jsionic-framework

Implementing dynamic element selection with jQuery: combining onClick and onChange events

I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, ...

javascripthtmljquerycss

Creating a regular expression to match special characters using JavaScript

I'm making an attempt to verify certain characters in my code. If the input field contains specific characters for each character, it will return true; otherwise, it will return false. function isChar(value) { //Creating a regex pattern to permit ...

javascriptregex

Should property paths be shortened by utilizing new variables for better organization?

Yesterday, someone asked me why I would introduce a variable to shorten the property path. My answer was simply that it feels easier to read. Now I am curious if there are any objective reasons to choose between the two options listed below (such as memory ...

javascriptnode.js

Having difficulty implementing dynamic contentEditable for inline editing in Angular 2+

Here I am facing an issue. Below is my JSON data: data = [{ 'id':1,'name': 'mr.x', },{ 'id':2,'name': 'mr.y', },{ 'id':3,'name': 'mr.z', },{ & ...

javascriptangulartypescript

Is a Text-Only View Possible with WebView?

Could someone help me figure out how to restrict a WebView to only load text in my WinRT XAML App? I am looking for a simpler solution than having to download the source and manually editing img tags. ...

htmlxamltextwebviewwindows-runtime

PHP file containing an HTML input type tag

I am working on displaying a record from a database in a table using a PHP file. However, I am encountering an issue with a specific line of code that I need help with. This line of code involves using a checkbox to delete a row in the database. Here is t ...

phpmysqlhtmlcheckbox

No information was retrieved from the Wikipedia server after sending an HTTP request

I have been trying to fetch HTML using code. It works perfectly fine when fetching from "http://www.google.com," but when attempting to fetch from "http://en.wikipedia.org/w/api.php," I am not getting any results. Any ideas on what might be causing this i ...

javahtmlhttp

Transferring data from a JavaScript variable to PHP using AJAX

I’m currently working through the tutorial at http://www.w3schools.com/php/php_ajax_database.asp and I think I have a good grasp of how it all operates. This is my code: PHP: <?php include('./db.php'); $PM = mysqli_query($con, "SELECT DIS ...

javascriptphpjqueryajax

"Implementing a responsive full-screen menu using Bootstrap for optimal user experience

I've implemented navbar-fixed-top and I want my menu items to expand to full width below the navbar when the user clicks on the burger-icon. The expanded menu should cover the entire height of the screen, and the burger-icon should transform into an ...

csstwitter-bootstrap