Align content distributed evenly will not display a division

I am currently using React to code and learning by doing so. I have two different images displayed, each followed by a div element with a height of 20px and a brown background color. I have set the height to "100%" and justifyContent to "space-between", but for some reason, the div is not showing up below the images. Can someone help me understand why?

Try it out here: https://codesandbox.io/s/amazing-http-6bdt88?file=/src/App.js

Here's the code:

import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";

export default function App() {
  return (
    <div className="App">
      <div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
      <div style={{ display: "flex", height: "100%", background: "darkblue" }}>
        <div
          style={{
            border: "1px solid orange",
            width: "100px",
            height: "100%",
            background: "gray"
          }}
        >
          side content
        </div>
        <div style={{ width: "100%", height: "100%" }}>
          <div
            style={{
              width: "100%",
              height: "100%",
              background: "red",
              border: "3px solid yellow"
            }}
          >
            <Allotment>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "100%",
                    flexDirection: "column",
                    justifyContent: "space-between"
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./the-mandalorian.jpg")}
                      alt="cat"
                    />
                  </div>
                  <div style={{ height: "20px", background: "brown" }}></div>
                </div>
              </Allotment.Pane>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "100%",
                    flexDirection: "column",
                    justifyContent: "space-between"
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./nature.jpg")}
                      alt="cat"
                    />
                  </div>
                  <div style={{ height: "20px", background: "brown" }}></div>
                </div>
              </Allotment.Pane>
            </Allotment>
          </div>{" "}
        </div>
      </div>
    </div>
  );
}

javascripthtmlcssreactjsmaterial-ui

Answer №1

<img
    style={{ width: "100%", height: "auto" }}
    src={require("./the-mandalorian.jpg")}
    alt="cat"
 /><div style={{ height: "20px", background: "brown" }}></div>

give this a shot, it might be of use

Answer №2

The issue lies within the <Allotment.Pane> tag.

In the second <div> element inside <Allotment.Pane>, change the style from height: "100%" to height: "auto".

You may not be able to see the brown div element because the parent div of your images is taking up the entire column with a height of 100%, causing the element below it to be pushed out of view.

If you add border: '1px solid white' to the images' parent container, you will visually understand the displacement.

Give this a shot:

<Allotment>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "85%",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    border: "1px solid white"
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./the-mandalorian.jpg")}
                      alt="cat"
                    />
                  </div>
                </div>
                <div
                  style={{
                    height: "15%",
                    background: "brown",
                    border: "1px solid white"
                  }}
                ></div>
              </Allotment.Pane>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "85%",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    border: "1px solid white"
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./nature.jpg")}
                      alt="cat"
                    />
                  </div>
                </div>
                <div style={{ height: "15%", background: "brown" }}></div>
              </Allotment.Pane>
            </Allotment>

Answer №3

I have made a few minor corrections, pay attention to the section marked as ***********HERE

Experiment with adjusting the sizes of your containers. Keep in mind that Bottom

and Right extend infinitely. So if you utilize 100% of the height and there is no bottom

import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";

export default function App() {
  return (
    <div className="App">
      <div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
      <div style={{ display: "flex", height: "100%", background: "darkblue" }}>
        <div
          style={{
            border: "1px solid orange",
            width: "100px",
            height: "100%",
            background: "gray"
          }}
        >
          side content
        </div>
        <div style={{ width: "100%", height: "100%" }}>
          <div
            style={{
              width: "100%",
              height: "100vh",// ***********HERE
              background: "red",
              border: "3px solid yellow"
            }}
          >
            <Allotment>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "50vh", // ************HERE
                    flexDirection: "column",
                    justifyContent: "space-between",
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./the-mandalorian.jpg")}
                      alt="cat"
                    />
                  </div>
                  <div style={{ height: "20px", background: "brown" }}></div>
                </div>
              </Allotment.Pane>
              <Allotment.Pane>
                <div style={{ height: "40px", background: "brown" }}></div>
                <div
                  style={{
                    display: "flex",
                    height: "50vh", // *********************HERE
                    flexDirection: "column",
                    justifyContent: "space-between"
                  }}
                >
                  <div>
                    <img
                      style={{ width: "100%", height: "auto" }}
                      src={require("./nature.jpg")}
                      alt="cat"
                    />
                  </div>
                  <div style={{ height: "20px", background: "brown" }}></div>
                </div>
              </Allotment.Pane>
            </Allotment>
          </div>{" "}
        </div>
      </div>
    </div>
  );
}

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

Discover the method to display only valid information

Within my database, I am attempting to locate an element labeled "newUser". The total number of elements stored in the database is 2. However, I am perplexed as to why I receive a result of true initially followed by false. Shouldn't the find method o ...

reactjs

Incorporating grids for a flickering drag and drop effect in Javascript

I have been working on developing a selection system for a tilemap image where users can select multiple tiles by dragging the mouse to increase the size of the selection container. However, I've noticed a flickering effect while holding down the mous ...

javascriptjquerymousemove

Using Vue.js to handle asynchronous functions with undefined variables

My Vue.js application is facing a problem where an async function is passing a variable as undefined even though it's properly defined before the function call. The async function FETCH_DATA in my Vue.js application is defined like this: async [FETCH ...

javascriptvue.jsasync-await

Looking for assistance with overriding kendo UI validation requirements

I'm looking to customize the date validation in my code to validate the date as DD/MM/YYYY. Here's my current code snippet and I'm getting an error message that says: Unable to get property 'methods' of undefined or null referen ...

javascriptjqueryvalidationkendo-ui

Tips for concealing a dynamic table element in Angular 9

I have dynamically generated columns and rows in a table. Here is my HTML for the table component: <table id="tabella" class="table table-striped table-hover"> <thead class="thead-dark"> <tr> <th *ngFor="let header of _ob ...

javascripthtmlangularfrontend

Instructions on creating a Superfish menu with a vertical layout in the first level and a horizontal layout in the second level

Currently, I am using the Superfish menu in Drupal7 and have designed my first item level to be vertical. However, I now want to style my second item level horizontally. I have tried various CSS approaches and added some class names via jQuery like $(&apo ...

javascripthtmlcssmenusuperfish

What is the best way to update a JSON object in a file using the file system module in Node.js?

Recently, I've been learning about read and write operations using the 'fs' module in Node.js. Here's my specific situation: I have a file containing data structured like this: [ { "Pref":"Freedom", "ID":"5545" }, { "Pref" ...

javascriptnode.jsfs

Angular - Implementing service worker to extract dynamic ID from route in "Notificationclick" event?

I have integrated push notifications into my code to notify users when an action is taken. The backend was developed using lib.net.webpush 3.1.0 with .net 4.5.2 in C#. The notification system is functioning well, but I am facing a challenge: Within my ser ...

javascriptangularservice-worker

Accessing a JSON key using a JavaScript variable

Is there a way to dynamically replace the key "Argentina" in a JSON object with a javascript variable string? jQuery(document).ready(function() { $.getJSON('countries.json', function(data) { var output= data.Argentina[0].countryPho ...

javascriptjson

Server nearby designated to handle requests to the api

Currently, I am working on a project involving automation. Within Adobe CEP, there is a local server that operates on Node.js/Express. My goal is to send an API request from a cloud server to this local server. How can I establish a connection between my l ...

javascriptnode.jsapiexpressserver

Manipulate a nested array in MongoDB with JavaScript array functions

Having trouble updating a field with mixed types in my mongoose schema. Although I acknowledge this may not be the ideal schema setup, there are specific reasons why it's structured this way. My goal is to perform array-like operations using JavaScrip ...

javascriptarraysmongodbexpressmongoose

ridiculing callback within parameter

I have a model setup in the following way: export class MyClass { grpcClient: MyGRPCClient; constructor(config: MyGRPCClientConfig) { this.grpcClient = new MyGRPCClient( config.serverUrl, grpc.credentials.createInsecure(), ); ...

javascripttypescriptjestjs

Discover the process of retrieving all workday dates using Angular

Currently, I am working on a project in Angular that involves allowing employees to record their work hours. However, I am facing a challenge in figuring out how to gather all the work dates and store them in an array. Here is what I have attempted so fa ...

javascriptangulartypescript

The React Query devtools are failing to display

I am currently working on a project using React Query, but for some reason, the DevTools icon is not appearing on my screen. I have checked the console for errors, but there are none. I am following a tutorial on YouTube to help me with this. Here is a sn ...

javascriptreactjsreact-queryreact-state-managementweb-developer-toolbar

How can I use AngularJS to filter ng-repeat values based on the input ng-model value of another field?

Can I Repeat Values Based on Another Input NG-Model Value in AngularJS? There is one input value, let's say Social Psychology, and the corresponding ng-model for this value is kpcategory. I am using ng-repeat="question in questions" to list all ...

htmlangularjsmeanjs

Using a physical device for testing the app instead of relying on Expo Go

Recently, I followed a tutorial on how to use React Native geolocation to get postal addresses from this link: The tutorial worked flawlessly when I tested it on the Expo Go iOS simulator in Visual Studio Code. Now, I am eager to try it out on my actual p ...

reactjsexpo

The JavaScript program for the shopping list is experiencing issues with the formatting of list items

I have been working on developing a shopping list program using JavaScript. The program includes an input box and an "add item" button, which adds the text entered in the input field to an unordered list as a list item. Each list item also contains an imag ...

javascripthtmlcssimagehtml-lists

Do all links need an href attribute?

I'm inquiring about this because I have specific links that function as buttons to retrieve content through ajax, eliminating the need for href tags. (This inquiry is driven by SEO considerations) ...

htmlhyperlinkseo

How to retrieve properties of the final item in an array using Vue.js

Struggling with Vue.js JavaScript implementation. This is the current code: <div id="app"> <h1>Items</h1> <div v-for="item in items"> <input v-model="item.val"> </div> <button @click="addItem"> Ne ...

javascriptarraysjsonvue.jsjavascript-objects

Implementing Ajax to Load Template-Part in Wordpress

Hey there! I'm currently working on enhancing my online store by adding a new feature. What I'd like to achieve is that when a customer clicks on a product, instead of being taken to the product page, the product details load using AJAX right on ...

javascriptphpjqueryajaxwordpress