Angular's responsiveness is enhanced by CSS Grid technology

I am attempting to integrate a CSS grid template that should function in the following manner:

  1. Columns with equal width

  2. 1st and 3rd rows - 2 columns

    2nd row - 3 columns

Order = [{      
    details:[
      {
        key: '1',
        label: 'Name',
        checked: true
      },
      {
        key: '2',
        label: 'Age',
        checked: false
      },
      {
        key: '3',
        label: 'Valid From'
      },
      {
        key: '4',
        label: 'Valid To'
      },
      {
        key: '5',
        label: 'Product'
      },
      {
        key: '6',
        label: 'State'
      },
      {
        key: '7',
        label: 'Country'
      }}]

Using the above JSON, I have created the CSS grid

    <div class="order-container">
    <div class="grid-item">
        <div class="grid-header vds-type-copy-strong"   *ngFor="let col of salesOrder1[0].details">
                <div>{{col.label}}</div>
        </div>
    </div>
</div>

CSS

   .order-container {
    .grid-item {
        padding: 5px;
        max-height: 402px;
        overflow-y: auto;
        display: grid;
        grid-gap: 4px;
        grid-template-columns: 1fr 1fr 1fr;
        .grid-header {
            text-align: center;
            div{
                padding: 8px 8px;
                margin-bottom: 4px;
                min-height: 37px;
            }
        }
    }
}

How can I split the content after Age and then again after Product?

cssangulargridviewdatagridviewcolumn

Answer №1

Here's an interesting concept to consider. I'm not entirely sure how you could implement this in Angular, but just as a suggestion, maybe you could try creating a blank box to see if it helps. Let me know what you think!

.wrapper {
  background-color: gray; 
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-evenly;
  grid-gap: 10px;
  padding: 10px;}

.box {
  width: 200px; 
  height: 80px; 
  border: 1px solid black;
  background-color: white;
  }

.hiddenbox {
  background-color: transparent;
  border:0px solid transparent;
  }
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="hiddenbox box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></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

When a cursor hovers over an image, a dark line appears

I wanted to create a hover effect where the image would enlarge when hovered over. I achieved this using a JavaScript function that applies the transform property with a scale of 1.2 to the picture. However, during the animation, a black line appears at th ...

javascriptcss

The TextField component in MUIv5 is showing some frustrating white space in the corners

I've integrated the MaterialUI_v5 library and included a TextField component within a Paper component. The background of the Paper component has been customized to appear in a shade of green. For the Textfield component, I have applied a styling tha ...

cssreactjsmaterial-ui

What is the best way to position this dropdown menu component directly under a specific section of my navbar in a React application?

As I delved into creating a basic navbar and dropdown menu in React, I encountered a puzzling issue. I envisioned a section within the nav that would trigger a dropdown menu right below it upon hovering over it. Attempting to replicate this functionality b ...

htmlcssreactjsnavbar

What is the appropriate conversion for a CSS property name starting with -webkit when working with React?

For example, using `-webkit-text-fill-color` resulted in an error when setting it to `'red'`, stating "Using kebab-case for CSS properties in objects is not supported. Did you mean WebkitTextFillColor?" I have attempted `WebkitTextFillColor`, `w ...

cssreactjswebkitkebab-case

Troubleshooting: Why the TableTools basic usage example is not functioning as

After replicating the code from http://datatables.net/release-datatables/extensions/TableTools/examples/simple.html in my Visual Studio project, I organized the files by saving two css files as style1.css and style2.css, along with three js files named sc ...

javascripthtmlcsstabletools

Utilize CSS to style active buttons with JavaScript

In an HTML document, the dynamic generation of divs and buttons using JavaScript can be seen in the code snippet below. <div style="background: rgb(247, 247, 247);"> <button class ="xyz" disabled="disabled">Button1</button> </div> ...

jquerycssbuttonapply

Angular - Error: Cannot find module 'fs'

I've encountered an issue while trying to incorporate Node's fs module into my Angular application. It seems that the problem lies in the fact that Angular doesn't operate within a node environment. I'm wondering if there's a way ...

node.jsangularangular-services

The scaling feature in CSS does not function properly in Internet Explorer 8

I've tried multiple approaches to transform the IE Matrix, but I'm facing an issue with the transform scale CSS not functioning in IE8. Code: .fture_box ul li.fture_img img{ width: 451px; height: 284px; display: block; margin: 0 0px 0 11px; pad ...

htmlcssinternet-explorerinternet-explorer-8

Looking to execute a service method within an authguard service?

I am a beginner with Angular and I am looking to invoke a service method within the authguard service. The specific service function that I need is as follows. Please note that I do not want to make any changes to this service function. loadOrganizations() ...

angulartypescriptangular-servicesauth-guard

Mastering Instagram Automation: Techniques for Navigating the Lightbox with Selenium

I am in the process of developing a Python script that assists users in Instagram engagement groups by efficiently liking everyone's photo during each round. I am facing an issue where Selenium is unable to click on the first photo when I reach a user ...

pythoncssselenium-webdriverinstagram

`How to Merge Angular Route Parameters?`

In the Angular Material Docs application, path parameters are combined in the following manner: // Combine params from all of the path into a single object. this.params = combineLatest( this._route.pathFromRoot.map(route => route.params) ...

javascriptangulartypescriptrxjs

I am disappointed with the lack of functionality in Angular's HTML type inference

When working inside an Angular component, I want to select a div element by id or class. This method works menuDisplayDiv = document.getElementsByClassName("some_class")[0] as HTMLDivElement; menuDisplayDiv = document.getElementById("some ...

htmlangulartypescript

Error: The AppModule encountered a NullInjectorError with resolve in a R3InjectorError

I encountered a strange error in my Angular project that seems to be related to the App Module. The error message does not provide a specific location in the code where it occurred. The exact error is as follows: ERROR Error: Uncaught (in promise): NullInj ...

angulartypescript

Creating dynamic transformations and animations for characters and words within a paragraph in 3D

Looking to add animation effects to specific parts of a paragraph, but transforming the entire box instead. Remembering seeing a solution on StackOverflow before, now regretting not saving it. Spent over an hour searching for a similar answer without succ ...

javascripthtmlcss

Is the Kendo Spreadsheet supported in Angular 2?

We are interested in knowing if future releases of Angular2 will include Kendo Spreadsheet or the ability to export data to Excel for the grid. We currently use the Angular1 version and would like to upgrade, so having these features available in Angular2 ...

angularkendo-uitelerikspreadsheet

Styling div elements to match the dimensions of table rows in CSS

When it comes to CSS, I wouldn't call myself an expert; My question is: is there a way for a div tag to inherit dimensions from specific table rows based on their class or id? For instance: Imagine we have a table with multiple rows, but we don&apos ...

javascriptjqueryhtmlcsshtml-table

Trouble concealing tab using slideUp function in Jquery

Whenever I click on the 'a' tag, it displays additional HTML content (list) that is controlled by generic JS code for tabs. However, I want to hide the list when I click on the "Title" link again. What can I do to achieve this? You can view a de ...

javascriptjqueryhtmlcss

CSS - Adding a Distinctive "Line" to a Navigation Bar

I am attempting to design a unique navbar layout with two "lines". The first line should consist of several links, while the second line would include an HTML select field with a submit button. The following code will generate the desired navbar visual ou ...

css

Activate the overflow feature within native-base cards

I have a unique design element on a website that showcases an image overflowing off a card. The image has a negative margin-top of -50, creating this effect. Now I'm trying to replicate this design in react-native using native-base components. Here i ...

cssreact-nativenative-base

Chrome Devtool reported an error, but the majority of them are in a null file

Currently grappling with an irksome problem in Vue.js. No matter how hard I try, I just can't seem to pinpoint the error. Even when setting a debugger, all it shows is an empty file. Please take a look at the image provided. Any assistance on identify ...

javascriptreactjsangularvue.jsfrontend