Balanced arrangement of components

As I work on my first electron app, I've created the initial layout. My goal is to have elements resize when the user adjusts the window size:

  • The red part should change in both width and height
  • The blue part should only adjust in height, not width
  • The green part should only adjust in width, not height

In .NET WinForms, this would be a simple task:

  • Set anchors for the red element to Left, Top, Right, Bottom
  • Anchor the blue element to Top, Right, Bottom
  • And anchor the green element to Left, Right, Bottom

How can I achieve this same effect using HTML and CSS?

I'm considering using a table element, but I've heard that tables are not recommended for page layout.

javascripthtmlcssreactjselectron

Answer №1

Here is a potential solution for your issue:

.main {
  min-height: 100vh;
  display: flex;
}
.blue {
  background: blue;
  flex: 1;
}
.sub {
  margin-right:5px;
  flex: 3;
  display: flex;
  flex-direction: column;
}
.red {
  flex: 1;
  background: red;
  margin-bottom:5px;
}
.green {
  background: green;
  flex: 0 0 10%;
  }
<div class="main">
<div class="sub">
<div class="red"></div>
<div class="green"></div>
</div>
  <div class="blue"></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

Strategies for resolving memory leaks in Next JS

I ran into an issue while trying to fetch the API which resulted in the following error message: Warning: Can't update a React state on an unmounted component. Although this is harmless, it suggests a memory leak in your application. To resolve this, ...

reactjsnext.js

Utilize JavaScript to trigger a div pop-up directly beneath the input field

Here is the input box code: <input type='text' size='2' name='action_qty' onmouseup='showHideChangePopUp()'> Along with the pop-up div code: <div id='div_change_qty' name='div_change_qty&ap ...

javascriptjqueryhtmlcss

Iterate through the JSON object and assign the value of the first object as the current state

I've structured my code as shown below: renderDiagnosisCodeValue(){ return _.map(this.state.diagnosisData && this.state.diagnosisData, diagnosisValues => { this.setState({ diagnosisReturnedValue: diagnosisValues[0].di ...

reactjs

Formik-powered button group for decreasing/increasing

Looking to enhance a Formik form framework by integrating a decrementer/incrementer button group. Link to Button Group Demo Button group codebase: import React from "react"; import Button from "@material-ui/core/Button"; import Button ...

reactjsmaterial-uiformik

What is the method for changing the Uint8Array object into a string?

I am encountering a similar issue as the one discussed in this post. I have read the solution provided, but I am having trouble grasping how to implement it. Are there any alternative suggestions? Here is my code snippet: var eccrypto = require("eccrypto ...

javascriptreactjsnpm

What is the reason behind the browser not reusing the authorization headers following an authenticated XMLHttpRequest?

As I work on developing a Single Page Application using Angular, I have encountered an interesting challenge. The backend system exposes REST services that require Basic authentication. Surprisingly, while obtaining index.html or any of the scripts does no ...

javascripthtmlangularjsbasic-authenticationsingle-page-application

An unexpected 'undefined' occasionally tacked onto 1% of the URLs visitors requested on my website starting from June 12, 2012

Ever since June 12, 2012 at 11:20 TU, I have been noticing strange errors in my varnish/apache logs. At times, after a user has requested a page, I observe a similar request moments later but with the URL string after the last "/" being replaced by "undef ...

javascriptbrowser

Transform your data visualization with Highcharts enhanced with the stylish appearance of DHTML

I am currently using a dhtmlx menu with my charts, specifically the legendItemClick event. It worked perfectly when I was using highcharts 3.0.1. However, after upgrading to version 4.1.7, the function legendMenu_<?=$id?>.showContextMenu(x,y) in the ...

javascriptjqueryhighchartsdhtmlx

Custom AG Grid PCF Control - Styling without the need for a separate CSS loader

Struggling to implement AG Grid in a PCF control because CSS loaders are not supported. Are there any alternatives for adding CSS without using CSS loaders? Thanks. Source - "‎06-22-2020 11:38 AM Ah I see - the only supported way of including CSS ...

csswebpackag-gridpowerapps

Implementing Mui version 5's TreeView feature allows for collapsing all child nodes when collapsing the parent

Is there a way to automatically collapse all descendant TreeItems when collapsing a parent TreeItem in a visual flow? Let's break it down: 1.Initial state: TreeItem #1 2.TreeItem #1 Expanded: TreeItem #1 TreeItem #2 3.TreeItem #2 Expanded: TreeIt ...

reactjsmaterial-uitreefrontendtreeview

Trouble with unproductive downtime in ReactJS and JavaScript

I'm looking for a way to detect idle time and display a dialog automatically after a certain period of inactivity. The dialog should prompt the user to click a button to keep their session active. Currently, when the user clicks the button it doesn&a ...

javascriptreactjsreact-hooks

Is it possible to dynamically add plotLines to the xAxis using datetime in HighCharts?

Hey there! I've been playing around with adding plotlines in Highcharts and I'm loving it. It's really easy to define a date time on the xAxis for a plotline, like this: xAxis: { plotLines: [{ color: '#dadada', ...

javascriptjquerydatetimehighcharts

What is the process for making local dynamoDB queries with dynamoose?

In order to avoid constantly connecting to Amazon Web Services as a developer, I decided to install DynamoDB on my local computer following the guidelines provided in the AWS Docs. My backend is built using node.js. For modeling Amazon's DynamoDB in ...

javascriptnode.jsamazon-dynamodbdynamoose

inconsistencies observed in flex layout between webkit browsers (Chrome and Safari) compared to moz (Firefox)

I am experiencing unexpected behavior with flex on Mozilla (-moz-) and Chrome/Safari (-webkit-) Referenced the Mozilla tutorial to understand flex layout /** { border: solid; border-width: 0 1px; }*/ html, body { width: 100%; height: 1 ...

htmlcsswebkitflexboxmozilla

What is the proper way to hide my Modal when using the react-modal module?

Welcome everyone, I'm facing an issue and would deeply appreciate any help to solve it. I am struggling to figure out why my modal is not closing even when using shouldCloseOnOverlayClick = {true} or without using it at all. Below is the code snippet ...

reactjsnext.jsreact-modal

Sorting and Filtering JSON Data by Value in JavaScript: A Comprehensive Guide

After successfully integrating the Star Wars API to show character names from the "people" object in this JSON array retrieved from , I now need to filter the results based on a specific value which corresponds to . The current code displays all species of ...

javascriptarraysjsonsorting

Implementing a feature to add selected checkboxes and remove unselected checkboxes with PHP and MySQL

I am currently working with 3 tables in my database: product, category, and product_category. I am in the process of creating a form that allows users to edit (insert/delete) categories for a specific product. My challenge lies in inserting an array of che ...

phphtml

Accessing getUserMedia within Internet Explorer 11 or utilizing MediaStream on IE 11

I am attempting to utilize the getUserMedia function in IE 11 with the help of the temasys plugin. However, IE does not support the MediaStream instance returned by getUserMedia. Below is a snippet of my code: import React from 'react' import { ...

javascripthtmlreactjsinternet-explorer-11temasys

Can the selected week be highlighted along with the corresponding week number in a row?

Can we display the number of the week in a row along with the selected week, either in the toolbar or somewhere else? I attempted to utilize ToolbarComponent, but it overrides the entire header. However, I would like to keep it as is and just add informat ...

javascriptreactjsmaterial-ui

Leveraging Vue.js's computed properties to access and manipulate elements within an

I have a simple template that displays text from a wysiwyg editor using two-way data binding, as shown below: <template> <div> <quill-editor v-model="debounceText" :options="editorOptionProTemplate" > </qu ...

javascriptvue.js