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

There seems to be an issue with displaying the meta information in a Nuxtjs project using this.$

I am facing an issue with meta information in a Vue page. When I try to access "this.$route.meta", it does not display any meta information. However, when I inspect the Vue page element, I can see that there is indeed meta information present. How can I ...

javascriptvue.jsnuxt.js

The interaction between jQuery and Rails through ajax calls

Attempting to work with basic functionality, Sending a request with data and receiving a response with data, then displaying it using jQuery and Rails This piece of code pertains to the frontend. $("#internal_btn").click(function() { //windo ...

javascriptjqueryruby-on-railsajax

Here is the code I have written to implement a date-picker event that retrieves specific records based on the selected date

I'm struggling with inserting a question here. Can someone provide assistance? $query = ("SELECT orders.customer_id, customer.name, customer.email, customer.address, customer.phone_number, orders.product_id, orders.total_units, orders.total_price, or ...

javascriptphpjquerymysqlajax

Is there a way to send a prop from a component to getServerSideProps() in NextJS?

I am trying to pass a props from my component to getServerSideProps(). Both of them are located on the same page. In the code snippet below, I aim to pass the URL from my component to getServerSideProps() so that I can utilize the same URL to fetch data ...

reactjsnext.jsfetch-apigetserversideprops

Prevent outside clicks from closing the React Ant Design drawer by disabling the functionality

Does anyone know how to disable the outside click option in the ant design drawer component for my react project? Here is a link to a working example on StackBlitz Below is the code snippet: import React from 'react'; import ReactDOM from &apo ...

reactjsantd

Angular text input with customizable placeholder text and embedded icon

Hey there, I'm looking to create a unique custom textbox that includes a text placeholder and a help icon that will display useful information in a popover. https://i.sstatic.net/Zh0IK.png When typing into the input, the textbox should have a specif ...

htmlcssangularbootstrap-4

Is there a distinction in invoking a service through reference or directly in Dependency Injection?

QUERY: Are there any discernible differences between the two instances of utilizing a factory service? Instance 1: angular.module('ramenBattleNetworkApp') .controller('MainCtrl', function ($scope, Helpers) { var testArray = [1 ...

javascriptangularjsdependency-injectionfactorycontrollers

Guide to merging two endpoints in express.js to create a single endpoint

I currently have 2 existing endpoints named /balance and /transactions. What is the most effective approach to create a new endpoint called /balance-and-transactions without having to refactor the existing code? For example: a('/balance', () =&g ...

javascriptnode.jsexpress

Create an onClick function that can direct you to a specific hyperlink without triggering a new browser window to open

Material UI is being used and a home icon has been imported into the navbar as shown below <Home edge="start" color="inherit" aria-label="home" onClick={event => window.location.href='/ <Home fontSize="lar ...

javascriptreactjsrxjsonclickmaterial-ui

Getting the most out of fonts with Webpack sass-loader

I recently set up a custom font in my project like this: $font-path: '~@/assets/fonts/'; @font-face { font-family: 'mainFont'; font-weight: 300; font-style: normal; src: url('#{$font-path}mainFont/mainFont.eot&apos ...

cssfontswebpackvue.jssass-loader

Javascript - Could anyone provide a detailed explanation of the functionality of this code snippet?

Ever since joining a new company 9 months ago, I've been encountering this line of code in JavaScript. It seems to work fine and I've been incorporating it into my coding style to align with the previous developers. However, I'm not entirely ...

javascriptconditional-statements

Updating JSON objects in jQuery with string keys

I have an array variable containing JSON data and I need to update specific values within the array using string keys. Here is a snippet of what my array looks like: { "all": [ { "image":{ "URL":"img/img1.jpeg", ...

javascriptarraysjsonstring

Using Google Apps Script to input data into the next available row

Utilizing Google Apps Script, I am retrieving data from another spreadsheet and storing it daily in a sheet named "DATABASE". Although my current solution is basic, it keeps overwriting existing data. I wish to enhance the script to copy data from the imp ...

javascriptjavagoogle-apps-scriptgoogle-sheets

Issue with state change in Component (React with Redux)

I am another person facing a similar issue. I have been unable to identify the error in my code yet. I suspect it has something to do with mutation, but despite trying almost everything, I am at a loss. My component does not update when I add new items to ...

javascriptreactjsredux

Checking for an existing alert in JavaScript

In my development of a Blackberry Webworks (HTML5) app, I am running multiple methods simultaneously in the background. If any of these methods happen to fail, an alert is triggered using the alert() method in JavaScript. However, if both methods fail, two ...

javascripthtmlblackberryalertblackberry-webworks

Can you guide me on implementing a transition animation through class toggling?

I am facing an issue where certain elements need to be highlighted or unhighlighted conditionally. To achieve this, I have assigned a class called highlight to the elements that require highlighting with a transition animation. The challenge arises when t ...

htmlcsscss-transitions

Fill out a Form in a separate Tab multiple times

I'm currently developing a straightforward form for distributing a newsletter: <form method="post" id="newsletter_form" action=""> <label for="subject">Newsletter Subject:</label><br/> <input type="text" nam ...

javascriptjqueryformssubmit

Retrieve the Content-Type header response from the XHR request

My intention is to check the header content type and see if it is text/html or text/xml. If it is text/html, then it indicates an error that I need to address before moving forward. ...

javascriptjqueryajaxcontent-typexmlhttprequest

Switch up the Angular base URL using ngx-translate

I successfully integrated ngx-translate into my Angular project. Now, I want to dynamically change the base href based on the language selected from the header menu. Currently, the URL appears as: "localhost:4200". However, upon launching the project, it ...

javascriptangulartypescript

How to change the background color in Nextjs

Can anyone help me figure out why my button to change the background in Nextjs is not working? _app.js import '../styles/global.css' import { AppProps } from 'next/app' import { useState } from 'react' export default functi ...

reactjsnext.js