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

Error TS2304: The identifier 'Map' cannot be found in version 5.1.0 of Node.js, TypeScript version 1.6.2, and WebStorm 11

While utilizing the filewatchers in my WebStorm 11, I encountered a TS2304 error related to ts-compiler 1.62. The error message reads: TS2304: Cannot find name 'Map' By deactivating the filewatcher and running the command tsc --target es6 app ...

node.jstypescriptecmascript-6webstorm

Embed a video within an image while ensuring it remains responsive on all devices

I have a picture that resembles something like this one My goal is to embed a video into it while maintaining its aspect ratio when the screen size is reduced. The responsive design should only affect the width since the image will be displayed in portrai ...

htmlcssimagevideoresponsive-design

An iteration in Javascript/NodeJS using the forEach loop

I am working with a forEach Loop in my code: <% users.forEach(function(user) { %> <tr> <td><%= user.studio %></td> <td><%= user.name %></td> <td><%= user.email %></td> ...

javascriptnode.js

Placing an element in a fixed position behind a non-fixed element

I am facing a challenge with an element that has two children, one of them is absolutely positioned. My goal is to position this absolutely placed element behind its sibling. Unfortunately, the z-index property doesn't seem to be working as expected. ...

htmlcssz-indexabsolute

Why is my RxJS timer not waiting for the specified time?

I'm diving into the world of RxJS and trying to grasp its concepts. During some testing, I encountered a puzzling issue that has me stumped. Below is the snippet in question : let item = { id: 1, name: 'chair' }; const asyncItem = timer(20 ...

angulartypescriptrxjs

The mobile navigation panel fails to open

I have a menu that I would like to toggle hide/show by adjusting its top position. Before logging in, the menu is structured as follows: <div class="lc"> <h1><a href="./"><img src="logo.png" /></a></h1> <a h ...

jqueryhtmlcss

How to retrieve the correct instance of "this" from a callback function within an array of functions nested inside an object

Trying to access the "helperFunction" from within a function in the "steps" array has been quite challenging. It seems that using "this" does not point to the correct object, and I have been struggling to find the right solution. const bannerAnimation = { ...

javascript

How can I show the HTML text "<ahref>" in a UITextView on iOS?

Is there a way to show HTML tags like <a> in a textview? As an example, here is some code: Hello good morning <a href=\"1\">USER1</a> and <a href=\"13\">USER2</a> ...

htmliosattributestextview

What is the process for implementing a decorator pattern using typescript?

I'm on a quest to dynamically create instances of various classes without the need to explicitly define each one. My ultimate goal is to implement the decorator pattern, but I've hit a roadblock in TypeScript due to compilation limitations. Desp ...

javascripttypescriptproxydecorator

Using Jest to mock React components with dot notation

I am facing a challenge with a component that dynamically renders either a main component or a loading component based on the data being loaded: // components/example import Component from 'components/component'; const Example = ({loaded}) =&g ...

javascriptreactjsunit-testingjestjs

Prevent the href from navigating to the next page when a doubleclick event listener is triggered

In my project, I am using an anchor tag that redirects to another page. However, if the user double clicks on it, I want to prevent the default behavior and stop the redirection. <a href="{location}">My Link</a> element.addEventListen ...

javascripthtmlhrefanchorevent-listener

Ensure that you accurately maintain object ids following the creation of elements using ng-repeat

I have a set of items listed with unique objects within my controller $scope.itemsList = [ {"id": 0, "item": "sw", "category": 'A' }, {"id": 1, "item": "mlr", "category": 'B'}, {"id": 2, "item": "lvm", "category": 'C&a ...

javascriptangularjsangularjs-directiveevent-handling

implementing geolocation using jquery and javascript

I am currently learning JavaScript and experimenting with the geolocation function in my HTML and PHP code, following a tutorial like this one. Here is the code snippet I added to my custom.js file: $(document).ready(function() { 'use strict&apos ...

javascriptjquery

What methods can I use to accomplish the transformation of superimposed images?

Struggling with transforming a content box on my webpage. I have a div containing three overlapping images positioned using Grid, and I want to scale one of them to fill the entire div when scrolled over. While I managed to achieve this effect, I'm un ...

javascripthtmlcssvue.js

What is the best approach for determining the most effective method for invoking a handler function in React?

As a newcomer to React, I am navigating through the various ways to define callback functions. // Approach 1 private handleInputChange = (event) => { this.setState({name: event.target.value}); } // Approach 2 private handleInputChange(event){ t ...

javascriptreactjstypescript

Issue with React-Toastify not displaying on the screen

After updating from React-Toastify version 7.0.3 to 9.0.3, I encountered an issue where notifications are not rendering at all. Here are the steps I followed: yarn add [email protected] Modified Notification file import React from "react" ...

javascriptreactjstypescriptreact-toastify

The Vue.JS application encountered an error while making an API request, resulting in an uncaught TypeError: Cannot read properties of undefined related to the 'quote'

<template> <article class="message is-warning"> <div class="message-header"> <span>Code Examples</span> </div> <div class="message-body"> ...

javascriptvue.jsvuejs3

Launch a popup modal box from within an iframe and display it in the parent window

I'm facing a challenge with opening a modal dialog in the parent page from an iframe. The button to open the modal dialog resides in the iframe, but the modal div is located on the parent page. Here's a snippet of my parent page: <html xmlns ...

jqueryhtmliframepopupmodal-dialog

The href link on Android and iPhone devices is not activating, instead showing a focus rectangle

I've encountered an issue with the responsive layout of my HTML5 site on Android and iPhone versions. The links on the site are behaving strangely - they only work if I hold them down for a full second. Otherwise, they act as if a hover event is trig ...

androidiphonehtmlresponsive-design

Integrate these scripts for seamless functionality: JavaScript/AJAX and PHP

Currently, I am in the process of learning all the languages involved here and facing a challenge while trying to merge two scripts to perform a single task. The goal is to select a branch from a form option list, transmit that value from the option to a ...

javascriptphpjqueryajax