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

MUI: Set the height of the div element to dynamically expand based on its content

I am currently working on styling a React app with MUI and I need help figuring out how to make a div's height adjust to its content. Specifically, I have a Card component that contains a Button. Upon clicking the Button, the content below the Card ge ...

cssreactjsmaterial-ui

What is causing the warnings for a functional TypeScript multidimensional array?

I have an array of individuals stored in a nested associative array structure. Each individual is assigned to a specific location, and each location is associated with a particular timezone. Here is how I have defined my variables: interface AssociativeArr ...

javascriptreactjsarraystypescriptassociative-array

The navigation bar remains fixed while the section heading fails to display properly

================================= My webpage acts like a homepage on the web. The issue arises when clicking on a new link, as my navbar is fixed and covers the section heading. I need the page to display the section heading properly even after clicking o ...

javascripthtmlcss

Is there a way to trigger an interact.js event that will reset all draggables back to their original position at coordinates (0, 0)?

I am trying to figure out how to trigger an onmove or drag move event to reset the position of a draggable div to x:0 y: 0. Despite looking at various sources like help topics here and on interact.js main page, I haven't found the right solution yet. ...

javascriptjqueryinteract.js

JQuery class for swapping elements upon scrolling

I am currently working on a navigation bar that changes classes to create a fading effect for the background. The approach I have taken involves targeting the window itself and monitoring the scroll position of the user. If the user scrolls down more than ...

javascriptjqueryhtml

Changing the rotation of an object in THREE.js to match Canvas rotation

Hello amazing minds of stackoverflow. I am in the process of converting three js mesh positions to html5 canvas positions. While I have successfully converted vector3 position to canvas position, I am facing difficulties with converting mesh rotation to ca ...

javascriptcanvasthree.jshtml5-canvas

Determine if a specific value is present within an array consisting of multiple objects using Mongoose

In my collection, I have a scenario where I need to utilize the $in operator. Person = { name: String, members: [ {id: String, email: String}... {}] } Currently, I am using the following: Person.find({members: {"$in": [id1]}}) However, I am aware of ...

javascriptarraysnode.jsmongodb

The AngularJS element fails to display on the screen

I am currently learning AngularJS and I am struggling to understand how components are linked to the view in the tutorial. I have created a component that is quite similar: angular.module('phonecatApp').component('nameList', { temp ...

javascripthtmlangularjs

Sorting an array of strings in JavaScript with the help of another array of strings

I am looking for a way to rearrange array1 based on array2. var array1 = ["cat","dog","mouse","elephant","ant","cow","goat","hen"]; var array2 = ["mouse","cow","goat"]; Expected output: var another_array = ["mouse","cow","goat", "bird"--- then rest of ...

javascriptarrayssorting

Using JavaScript to modify the text of a label seems to be a challenging

UPDATE: After carefully reviewing my code once again, I have identified the issue. The problem lies in the positioning of a certain function (unfortunately not included here), but rest assured that I have rectified it! Allow me to provide a brief summary ...

javascripthtmllabel

Tips on providing validation for either " _ " or " . " (select one) in an Angular application

I need to verify the username based on the following criteria: Only accept alphanumeric characters Allow either "_" or "." (but not both) This is the code snippet I am currently using: <input type="text" class="form-control" [ ...

javascriptangulartypescript

Send the information to MongoDB in the form of an object, utilize it as a query, and then perform

I have a document stored in my mongoDB database. When a user types something into an input field on the frontend, for example 'test', the object passed looks like this: {'countdown': 'test'} This object is then sent to the ...

javascriptnode.jsmongodbexpressmongoose

Error: Unable to access the 'rotation' property of an undefined object in the animate function on line 266 of index.html, at line 287 of index.html

I am facing an error when trying to animate a model with rotation or position in my code. I attempted to create an init function to run everything, but it did not resolve the issue. The error only appears during animation; once the animation stops, the e ...

javascriptthree.js

ng-select will solely output the term 'collection'

i am having an issue with a ng-select in my contact form. everything is being received correctly except for the value of the ng-select. Instead of getting the selected option from the ng-select, the system just returns the word "array". Below is the port ...

javascriptphpangularjs

Utilizing Various Perspectives in Angular with the ng-view Directive

Can anyone assist me with a challenge I'm facing regarding views? While this is a hypothetical scenario and there's no code available to review... Let's imagine a simple site with three routes: /signin /users /users/:id Upon accessing t ...

javascriptangularjsurl-routingnested-views

What is the best way to integrate new entries into the data source of a Kendo UI grid?

After successfully creating a kendo.data.dataSource, I managed to bind it to the KendoUI Grid on my page. However, when attempting dataSource.insert(0, [a : "b"]);, it surprisingly removes the existing data. The code snippet that illustrates this issue i ...

javascriptgridkendo-ui

Exploring the possibilities of combining AngularJS with a Bootstrap modal for a

Hello, I am currently attempting to update a modal select box using Angular and Bootstrap modals. Unfortunately, when I click the button, I am having trouble getting it to update the related select box value in the Bootstrap modal. I've tried differ ...

javascriptangularjstwitter-bootstrapselectangular-ngmodel

Running JavaScript from Markdown - Dynamically generated webpage

Can JavaScript be run in a MarkdownRemark programmatically created page from .md? I want to include a photogallery from EmbedSocial, which requires a div with a specific classname and a script tag following it. This is how it looks in the .md file: <d ...

javascriptreactjsmarkdowngatsby

What is the best way to position text below an image icon in a menu?

I am having trouble creating a menu that has the same style as shown in this image: . Unfortunately, my menu ends up looking like this instead: . Can someone please help me fix this issue? Here is the HTML code I am working with: <header> ...

htmlcssmenu

Acquiring JSON-formatted data through the oracledb npm package in conjunction with Node.js

I am currently working with oracledb npm to request data in JSON format and here is the select block example I am using: const block = 'BEGIN ' + ':response := PK.getData(:param);' + 'END;'; The block is ...

javascriptjsonnode.jsoracletypescript