We Keep Coding

Maintain responsive image height

I am attempting to create a CTA component at the top of my react application, that contains the navbar and the CTA text. After successfully completing the component, I am noticing a minor bug that I would like to resolve. I am only providing my image with a width of 100% and no defined height. This causes the divs beneath the image to flicker upwards until the image has fully loaded. I know not providing the image with a defined height is causing it because the bug goes away when I provide the image with a random height. I am wondering if there is a way to provide the image with a responsive height that would behave in a similar way to just providing my image with 100% width.
my css code is as follows:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .container-background {
opacity: 0.25;
}
.container-background-img {
width: 100%;
position: relative;
}
.container .content {
position: relative;
z-index: 1;
}
.app-outer {
max-width: 1170px;
margin: 0 auto;
position: relative;
padding: 0rem 1rem;
}
#media only screen and (max-width: 1170px) {
.container-background-img {
height: 656px;
object-fit: cover;
}
}
#media only screen and (max-width: 768px) {
.container-background-img {
height: 653px;
object-fit: cover;
}
}
/* CODE ADDED */
#navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#content {
position: absolute;
top: 20%;
}
my jsx code is as follows:
import React from "react";
import "./styles.css";
export default function App() {
return (
<>
<div className="container">
<div className="container-background">
<img
id="rob"
src="https://i.imgur.com/iyFtMNA.jpg"
alt="bg"
className="container-background-img"
/>
</div>
<div id="content" className="content">
I am the CTA
</div>
<div id="navbar">
<div
style={{
backgroundColor: "white",
height: 100,
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
I am the navbar
</div>
</div>
</div>
<div>I am beneath the cta</div>
</>
);
}
the following link I have provided contains a code sandbox: https://codesandbox.io/s/issue-react-forked-4lsdm?file=/src/App.js:0-868
Please Note: *** within the code sandbox the issue is not very apparent, but within my react application it is much more noticeable

As you mentioned, the issue is not really clear to see from your sandbox code.
I am not sure this would fix your issue but instead of using image tag try setting your CTA component to have background-image() instead.
Make sure to add other background css attributes too such as
background-repeat: no-repeat;
background-size: cover;
background-posistion: center;
padding-bottom: 60%;
Make sure to add padding-bottom: 60% (Your image seems to have a 3:2(w:h) ratio);
Hopefully, this works for you!

Is there a way to override z-index

I am working on making a Google Chrome extension. Part of this extension injects some HTML into whatever webpage it is loaded with. That HTML is displayed supposed to be displayed on top of the rest of the HTML. The problem I am having is when I load some pages I can not see the injected HTML while on other pages it does show up. I did some research and tried setting the z-index to the maximum value of 2147483647 based on this post. Even when I did that, on some of the webpages it still did not show up. I am wondering if there is a way I can get the HTML to show up. I looked at the styles on the pages and I might have missed something but I did not see any z-index styles.
The following code is:
#reading-lines-injected {
position: fixed;
z-index: 2147483647;
width: 100%;
}
#top-bar-reading-line, #bottom-bar-reading-line {
position: relative;
height: 20px;
background-color: black;
opacity: 70%;
}
#gap-reading-line {
position: relative;
height: 15px;
}
<div id="reading-lines-injected">
<div id="top-bar-reading-line"></div>
<div id="gap-reading-line"></div>
<div id="bottom-bar-reading-line"></div>
</div>
Some of the webpages that don't display the HTML: digitalocean.com, schoology.com, hashbangcode.com. It does work on [stackoverflow.com5.
Thank you for all of your answers.

Just for future reference, evolutionxbox said that when there is no position applied the element might get pushed off of the screen. To prevent that I just added top:0 to the #reading-lines-injected div.
#reading-lines-injected {
position: fixed;
z-index: 2147483647;
width: 100%;
top: 0;
}
#top-bar-reading-line, #bottom-bar-reading-line {
position: relative;
height: 20px;
background-color: black;
opacity: 70%;
}
#gap-reading-line {
position: relative;
height: 15px;
}
<div id="reading-lines-injected">
<div id="top-bar-reading-line"></div>
<div id="gap-reading-line"></div>
<div id="bottom-bar-reading-line"></div>
</div>

React whole page scrollbar when component goes offpage

I have an app like this:
as you can see the middle component continues down out of page and that's why I need a scrollbar to scroll down to it. but I can only make it work if I attach it directly on the middle component but I want a regular whole page scrollbar.
here is my app.js
import React, { Component } from 'react';
import OysterView from './components/OysterView.js'
import './uikit/uikit.css';
import './App.css';
import logo from './uikit/assets/images/hrm-white.svg';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<header>
<img src={logo} className="App-logo" alt="HRM"/>
</header>
</div>
<div className="OysterView">
<OysterView />
</div>
</div>
);
}
}
export default App;
I have tried setting it on different places but it does not recognize that the component is out of bounds so cant scroll down the <OysterView /> component is the component that is out of bound so I have tried in CSS
.App {
overflow-y: scroll;
background-color: #fafafa;
position: fixed;
height: 100vh;
width: 100vw;
z-index: -2
}
tried this as well:
html{
height: 100%;
overflow-y: scroll;
margin: 0;
padding: 0;
}
which doesn't add anything at all and that is probably because .App has no height but if I add height the rest of the content gets pushed down so it solves nothing. I have tried adding it to the index.css html as well and that gives me an scrollbar but it cant be scrolled down. so I am al out of ideas here. how should I attack this? z-index on .App?

You do have to scroll the component itself, just make its container full-screen so that the scrollbar will be on the right side of the window.
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba( 0, 0, 0, .5 );
overflow-y: scroll;
}
.modal-content {
background: red;
margin: 20%;
height: 2000px;
}
Page content
<div class="modal-container">
<div class="modal-content">
Modal content
</div>
</div>

page loading icon from css not showing

I have css file like this
.mask {
display: none;
}
#mask.loading {
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 1000;
background-image: url('/icon.gif')
background-position: center;
background-repeat: no-repeat;
}
table.loading {
opacity: .5;
}
And I want to show icon until table loads so I'm calling it like
$('#tableDisplay,#mask').addClass('loading');
$('#tableDisplay,#mask').removeClass('loading');
And in my html I added as
<div id="mask"></div>
<table id="tableDisplay">
</table>
And when I load page I can see table opaque but I do not see icon and my icon file is in same dir as css file

With your use of:
background-image: url('/icon.gif')
The slash is telling it to look in the web-root for the icon ... Remove the slash or give the full path IE
background-image: url('icon.gif')
background-image: url('/your/path/to/css/icon.gif')
This should also be apparent when you look in your console and see the 404 for the icon, you'll see the directory that the CSS file is "trying" to find icon.gif in

Your first CSS rule has a class selector but it should be an ID:
#mask { /* instead of .mask */
display: none;
}
And your icon URL contains a slash which shouldn't be there if the icon is in the same directory:
background-image: url('icon.gif');

JPanelMenu does not create the JPanelMenu-Menu class

The JpanelMenu will not create the additional class and I can't figure out why.
I placed linked to the site with this HEAD
<script type="text/javascript" src="http://jpanelmenu.com/js/lib/jquery.jpanelmenu.min.js"></script>
I then placed the script to enable the sidebar directly underneath it in the HEAD
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
I then placed the code for the nav within the HEADER
<a class="menu-trigger" href="#menu">Click Me</a>
<ul id="menu" style="display: none;">
<li>Overview</li>
<li>Usage</li>
<li>About</li>
</ul>
But then when I run the page inspector, the "click me" works and opens but the sidebar is empty. It will NOT create the following class:
<ul id="jPanelMenu-menu" style="width: 250px; display: block; z-index: 1;">...</ul>
I think there may be something wrong within my CSS but I do not have any elements created for JPanel Menu but I do have a left and right panel within the body like so:
body {
height: 100%;
max-width: 100%;
min-width: 960px;
min-height: 600px;}
right-panel, .left-panel {
height: 100%;
min-height: 600px;}
.left-panel {
background: url('Images/side-bar-parchment.png') no-repeat fixed center;
background-size: cover;
position: absolute;
width: 170px;
z-index: 1;}
.right-panel {
margin-left: 170px;
max-width: 100%;
z-index: 1;}

write a div in last of html or before html with same id.
1. Jpanelmenu should create it automatically but it does not.
<div id="jPanelMenu-menu"/> this will work.
and might be your html element is not enclosed properly.

Figured it out! I am not exactly sure how it got fixed but I decided to update the jQuery package to 2.0 from 1.8 and now it works! Thank you everyone!