Update the CSS styling of a parent div based on the active state of specific child divs

I have a class with 4 distinct columns.

div class="mainContent">
        <div class="left-Col-1" *ngIf="data-1">
        </div>
        <div class="left-Col-2" *ngIf="!data-1">
        </div>
        <div class="right-Col-1" *ngIf="data-2">
        </div>
        <div class="right-Col-2" *ngIf="!data-2">
        </div>
</div>

Essentially, I have set up a flexbox to display two columns. If there is no data in the first column (data-1), the right-Col-2 div will be shown instead, and vice versa for the second column with data-2 triggering left-Col-2. When both columns contain data, left-Col-1 and right-Col-1 are displayed. My CSS structure is as follows:

.mainContent > *:nth-child(1){
 display: flex;
 flex-direction: column;
 flex-basis: 70%;
 padding: 0;
}
.mainContent > *:nth-child(2){
 display: flex;
 flex-direction: column;
 flex-basis: 30%;
 padding: 0;
}

The issue arises when I want to adjust flex-basis to 50% for both divs if no data is loaded (left-Col-2 and right-Col-2). Can this adjustment be achieved solely through CSS, or would I need to implement a TypeScript function?

Thank you for any assistance provided.

javascripthtmlcssangulartypescript

Answer №1

It seems like you may be complicating things with an odd/even selector that is causing confusion. Your selector divides your divs into odd and even children, with the only distinction being the flex-basis values of 70% for odd ones and 30% for even ones. Since you have 3 different values for 4 different classes, it might be best to avoid using the odd-even approach. Additionally, Angular will remove two divs based on data-1 content anyways.

Instead of relying on odd/even selectors, consider utilizing the four different classes you already have to specify the desired flex-basis for each div. Review the provided CSS code below to gain a better understanding:

.mainContent{
    display: flex;
    flex-direction: column;
    padding: 0;
}

.mainContent .left-Col-1{
    flex-basis: 70%;
}
.mainContent .right-Col-1{
    flex-basis: 30%;
}
.mainContent .left-Col-2, .mainContent .right-Col-2{
    flex-basis: 50%;
}

It's recommended to use more descriptive classes such as full/empty or primary/secondary to enhance code clarity and manageability in your project.

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

Showing the values of selected checkboxes in a select dropdown - here's how!

Link to the jsfiddle : https://jsfiddle.net/a1gsgh11/9/ The JavaScript code seems to not be working on the js fiddle platform. My main concern is that I would like the selected checkbox values to display immediately without needing to submit any buttons. ...

javascriptphpjqueryhtmlcheckbox

Struggling with an error while experimenting with tensorflow/teachable machine on vuejs

After experimenting with vuejs and , I encountered an issue while trying to export the model for my project. As I adjusted the syntax to fit Vue, I hit a roadblock when the code returned an error stating "cannot read properties of undefined...." console.lo ...

javascriptlaravelvue.jstensorflow.js

"Enhance your website's loading speed with the Google Page Speed Up

Hi, I've been using the Google PageSpeed Module and have created a .htaccess file to optimize my website (www.anetoi.com). I tried using combine_css to merge my CSS files but it didn't work as expected. I followed Google's instructions but s ...

cssperformance.htaccessweb

Ionic 2 encountering issue with `ctorParameters.map` not being a function error

Recently, I wanted to incorporate the Network-information plugin into my project but encountered compatibility issues with an older version of Ionic-native. To resolve this, I took the following steps: npm rm --save ionic native npm install --save ionic-n ...

cordovaangulartypescriptnpmionic2

Excessive CPU/GPU usage caused by CSS transition animations

I am currently working on a small element on my website that involves a random size change in one of the DOM elements. const theDiv = document.getElementById("the-div"); function animate(){ const value = Math.floor(Math.random() * 200); theDiv.sty ...

htmlcssperformancecss-transitions

Integrate a character key feature to cycle through options in a customized Vue select component

In my Vue/Nuxt.js project, I have implemented a custom select component with arrow key functionality for scrolling through options and selecting with the enter key. Now, I am trying to add "jump key" functionality where pressing a character key will jump t ...

javascriptarraysvue.jsnuxt.js

What is the best way to filter an array based on the property of its inner array?

I am grappling with the following array of objects: let a = [ { b: [1, 11, 12], c: "a1" }, { b: [2, 56, 1], c: "a2" }, { b: [1, 2, 3], c: "a3" } ] In search of an operation that is b ...

javascriptarraysfiltermap-function

Issue with using async await in map function: async function may not complete before moving on to the next item in the

Currently, I have an array that needs to be mapped. Inside the mapping function, there is an asynchronous function being called, which conducts an asynchronous request and returns a promise using request-promise. My intention was for the first item in the ...

javascriptexpresspromiseasync-awaitrequest-promise

Using CSS to align a <li> element in the center

Do you have a question? I am trying to center a menu using the <li> tag, and I also have two buttons. .subiectele-zilei { width:100%; padding-left: 25px; overflow:hidden; padding-bottom:8px; background-color:#f5f5f5; margin ...

htmlcsshtml-listscenter

There is nothing like Python Bottle when it comes to parsing JSON data from

In my React code, I have the following: const payload = { x : x, y : y } fetch("http://localhost:8080/update_game", { method: "POST", body: JSON.stringify(payload)}) And in Python, I have this implementation: @post(&ap ...

javascriptpythonbottle

The tag that is mandatory is not functioning properly in the Bootstrap form

I am currently working on integrating a Bootstrap form into my Flask website, and I am facing an issue with making certain fields mandatory before submission. I have tried using the "required" attribute in the input tags, but for some reason, it is not wor ...

htmlflaskbootstrap-5

Incorporating Javascript into a <script> tag within PHP - a step-by-step guide

I am trying to integrate the following code into a PHP file: if (contains($current_url, $bad_urls_2)) { echo '<script> $('body :not(script,sup)').contents().filter(function() { return this.nodeType === 3; ...

javascriptphp

Assembly of Components

As someone new to angular, I am currently in the process of building an angular2 application. My goal is to dynamically create a series of DOM components using the data provided below: // Class construct with properties sorted alphabetically export class ...

htmlangulartypescript

Updating a value within destructuring and a loop: A step-by-step guide

My Goal: I aim to modify a value in an object that is part of an array element. Take a look at the code snippet below for a clearer understanding. An issue arises when I update the object's value through reference instead of creating a new copy, cau ...

javascriptreactjsreduxredux-sagaself-destruction

My pathways are clearly mapped out, yet express is returning a frustrating 404 error

After exhausting all the similar posts on StackOverflow without finding a solution... Let's take a look at my app.js, which is the first file that the express library seeks when launching the app right after my server.js file responsible for setting ...

javascriptnode.jsexpress

Combine data from a new observable with the existing data in Angular using RxJS

I have a list stored as an observable[]. To subscribe to it in the template, I am using async. Each time I scroll, this method is called: onScroll() { this.list$ = this.list$?.pipe( tap((list) => { this.notificationService . ...

angularrxjsobservable

Issue with create-react-app and express server not displaying correctly in Internet Explorer

My application functions perfectly with Chrome and Safari. It utilizes React for the front-end and Express for the back-end. However, when I try to open it in Internet Explorer, all I see is a blank white page. Additionally, I encounter this error message: ...

javascriptexpressinternet-explorercreate-react-app

Enhance Angular Material Select with Tooltip on Ellipsis Directive

In the midst of my Angular 9 project journey, I encountered a directive designed to add a matTooltip if an element's text is truncated (ending in ellipsis due to overflow). Everything was running smoothly with this directive until I introduced a mate ...

angularangular-materialangular9

Discovering the clicked element using JavaScript: A complete guide

Let me start by saying that I have come across similar posts about tracking event listeners, but in my specific case, I am struggling to figure it out. While I am familiar with the event.target property, I just can't seem to make it work. Here is a s ...

javascripthtmlcssevent-handling

Modifying the response header in a node.js middleware: A step-by-step guide

I've been researching this question extensively on Google, but unfortunately, none of the solutions seem to work for me. The issue I'm facing is related to adding a specific property to the response header called "isAuth," which needs to be set ...

node.jstypescriptexpressmiddleware