Each div will be repositioned according to the size of the largest div within the parent container

While developing my sorting visualizer app in React, I have encountered a slight issue with the rendering. The graph structure of my visualization appears to be a bit "jiggly" at the moment.

To provide some context, here is the current setup of my graph within the application (Bootstrap4 is being utilized):

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- -->
<div class="graph" style="height: 500px; width: 500px;">
  <div class="bar" title="56" style="height: 224px; width: 4px; background-color: rgb(0, 107, 160); display: inline-block;"></div>
  <div class="bar" title="104" style="height: 416px; width: 4px; background-color: rgb(42, 184, 255); display: inline-block;"></div>
  <div class="bar" title="65" style="height: 260px; width: 4px; background-color: rgb(0, 124, 186); display: inline-block;"></div>
  <div class="bar" title="6" style="height: 24px; width: 4px; background-color: rgb(0, 11, 17); display: inline-block;"></div>
  <div class="bar" title="51" style="height: 204px; width: 4px; background-color: rgb(0, 97, 146); display: inline-block;"></div>
  <div class="bar" title="31" style="height: 124px; width: 4px; background-color: rgb(0, 59, 89); display: inline-block;"></div>
  ...
</div>
<!-- -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2b2adb2b2a7b0eca8b182f3ecf3f4ecf2">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

The appearance of these bars dynamically changes based on updates to the list. The heights and colors are determined by calculations relative to the numeric values and container height.

An interesting observation is that all the bars seem to shift when there isn't one bar that spans the entire height of the container. Is there a way to address this issue effectively?

Your advice and suggestions would be greatly appreciated.

htmlcssbootstrap-4

Answer №1

For this specific case, it is advised to avoid using inline-block due to potential challenges with vertical alignment and linebox manipulation. A more efficient solution would be to leverage flexbox within Bootstrap and apply two classes to overcome these issues:</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.graph {
  border: 1px solid red;
}
.graph > * {
  margin: 0 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- -->
<div class="graph d-flex align-items-end" style="height: 500px; width: 500px;">
  <div class="bar" title="56" style="height: 224px; width: 4px; background-color: rgb(0, 107, 160); display: inline-block;"></div>
  <div class="bar" title="104" style="height: 416px; width: 4px; background-color: rgb(42, 184, 255); display: inline-block;"></div>
  <div class="bar" title="65" style="height: 260px; width: 4px; background-color: rgb(0, 124, 186); display: inline-block;"></div>
  <div class="bar" title="6" style="height: 24px; width: 4px; background-color: rgb(0, 11, 17); display: inline-block;"></div>
  <div class="bar" title="51" style="height: 204px; width: 4px; background-color: rgb(0, 97, 146); display: inline-block;"></div>
  <div class="bar" title="31" style="height: 124px; width: 4px; background-color: rgb(0, 59, 89); display: inline-block;"></div>
</div>
<!-- -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

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

Attempting to isolate just a fragment of the inner content

Option Explicit Sub VBAWebscraping2() Dim IEObject As Object Set IEObject = New InternetExplorer IEObject.Visible = True IEObject.navigate url:="https://streeteasy.com/building/" & Cells(2, 4).Value ...

htmlcssexcelvba

How to add vertical bars within ng-repeat in AngularJS

I attempted to retrieve values from an array variable using ng-repeat within unordered lists. Although the values are displaying correctly and everything is functioning properly, I added vertical bars after each value to represent sub-categories on my page ...

javascripthtmlcssangularjs

Listening for a click event on a newly added element using JQuery

I am relatively new to using JQuery and I have encountered an issue with adding a click event listener for a dynamically created button. When the user clicks on the first button, my function successfully adds a second button to a div. However, I am facing ...

jqueryhtmlonclick

Styling a Razor view using inline CSS and responsive media queries

I need to add some simple inline styling for print purposes to an .cshtml page I'm working on. I initially tried using the @media print media query, but it is causing issues with my cshtml page. Is there a workaround for this problem? The culprit see ...

asp.netasp.net-mvccssasp.net-mvc-4razor

Creating React-only multiline tooltips for enhanced user experience

I'm currently working on a multiline tooltip project and using [this particular example] as a reference due to its functional components. While the tooltip works well with short text, I'm encountering an issue when the text exceeds a single line, ...

javascriptcssreactjs

Adjust transparency according to the information extracted from the AnalyserNode

Currently, I am exploring ways to animate text opacity based on the volume of an audio file. While browsing online, I came across this specific codepen example, which showcases a similar concept. However, as I am relatively new to JavaScript, I find it ch ...

javascripthtmlcssaudio

Switch effortlessly between one animation and another with Angular.js

I have two animations named "prev" and "next". Upon clicking the prev button, the "prev" animation should play. Similarly, when you click on the "next" button, the "next" animation should be triggered. I am using ng-class to achieve this behavior. How can ...

javascriptcssangularjs

The width of the Div element cannot be consistently preserved in Safari when viewing on an iPad

I'm facing a peculiar issue that seems simple at first glance, but has me stumped. On a webpage using Bootstrap, there's a div with the following code: .appSection{ background-color: #000000; padding:20px; border:1px solid #67c1d ...

htmlcsstwitter-bootstrap

What is the best way to organize angularjs controllers and directives within one another?

When I structure my controllers like this: <body ng-app="app" ng-controller="ctrl"> <div ng-controller="app-get"> <app-get></app-get> </div> <div ng-controller="app-post"> <app-post">& ...

javascripthtmlangularjs

Adding a new element with Jquery when a dropdown option is selected

What is causing this issue to not function properly? <script> $(document).ready(function(){ $('#custom_field option').click(function(){ $('#custom_field_input').append('<tr><td></td> ...

phpjavascriptjqueryhtmlforms

Ways to retrieve and contrast the border style of an image utilizing javascript

I'm currently attempting to identify images on my webpage that have the style border: 1px #c6c6c6 solid; let images = document.getElementsByTagName('img'); for (let i = 0; i < images.length; i++) { if (images[i].style.border === "1px ...

javascriptcss

Display and conceal individual divs using jQuery

Despite my lack of experience with jQuery, I am struggling with even the simplest tasks. The goal is to display/hide specific messages when certain icons are clicked. Here is the HTML code: <div class="container"> <div class="r ...

javascripthtmljquerycssjquery-events

Choosing identical elements within comparable sub-divisions

How can I use JQuery to select an array of elements that are in separate sub divs? For example: <div class="panelWrap"> <div id="dvStage1" class="milestoneWrap" runat="server"> <div class="grid_1 ...

jqueryhtmlasp.net

Trouble assigning the 'data' attribute to the 'Object' tag using jQuery. [Limited to IE8]

I have encountered a problem when creating an object element dynamically in jQuery to display some content. The code functions perfectly in all browsers except for IE8. Here is the code snippet: j$(document).ready(function(){ j$('.ob ...

javascriptjqueryhtmlinternet-explorerinternet-explorer-8

Preventing browsing beyond subdirectories in web file management without relying on a web server

I am currently in the process of developing a command line application that generates an index.html file containing links to other HTML files as well as links to subdirectories within the filesystem. An example of such a link is shown below: <a href=. ...

html

Issues arise with Highcharts Sankey chart failing to display all data when the font size for the series is increased

I am currently working with a simple sankey chart in Highcharts. Everything is functioning correctly with the sample data I have implemented, except for one issue - when I increase the font size of the data labels, not all the data is displayed. The info ...

javascripthtmlhighcharts

What is the most efficient way to arrange a table using one-time binding in angularJS while ensuring optimal modal performance?

My ng-repeat loop has clickable headers for sorting, but once it reaches around 150 elements and 8000+ watchers, extreme latency occurs. Speed can be increased using one-time binding, but this causes the loss of sorting functionality. <table class="tab ...

javascripthtmlangularjs

A study of Cycle2 and Firefox's Image Blinking

Currently troubleshooting my jQuery Cycle2 slideshow issue on Windows 7 and FireFox. The problem only occurs in this specific scenario, where images load partially before fully displaying one second later. For a visual of the issue, check out this video: h ...

jqueryhtmlcssfirefoxjquery-cycle

The timer freezes briefly at 1:60 before switching to 1:01

I'm in the process of creating a website for Rubik's cube scrambling and timing, and everything seems to be working well so far. I have implemented a scrambler, a timer, and a list of recorded times (still a work in progress). The timer is functi ...

javascripthtml

develop a secondary menu using cascading style sheets

Seeking assistance to design submenus with CSS. As a newcomer, I am struggling with this HTML code and need guidance. <div class="nav-collapse collapse"> <ul id="nav-list" class="nav pull-right"> <li><a hre ...

csssubmenu