Increase the number of columns in ion-grid to a maximum of 24 columns by customizing the ion-grid columns

Can anyone assist me in achieving an ion-grid with 24 columns? I was researching the Ionic page (https://ionicframework.com/docs/layout/grid) and came across the property "--ion-grid-columns" under the "Number of columns" section. Unfortunately, there was no example provided on how to implement it. The webpage mentions that customization is possible for the grid based on your desired number of columns.

Has anyone used this property in this manner before?

In HTML:

<ion-grid class="myGrid">
     <ion-row>
      <ion-col>Example</ion-col>
    (repeated 24 times...)
      </ion-row>
    </ion-grid>

In CSS file:

.myGrid{
--ion-grid-columns: 24;
}

However, applying this method doesn't seem to affect my grid. How can I define 24 columns within the ion-grid structure? Thank you.

cssangularionic-frameworkgrid

Answer №1

To make it work, just add size="1" to your ion-col:

<ion-grid>
  <ion-row>
    <ion-col size="1">
      your content
    </ion-col>
  </ion-row>
</ion-grid>

Answer №2

It's important to set a size attribute on the ion-col element.

CSS styling:

ion-grid {
    --ion-grid-columns: 24;
}

HTML markup:

<ion-grid>
  <ion-row>
    <ion-col *ngFor="let column of [].constructor( 24 ); index as i" size="1">
      {{ i }}
    </ion-col>
  </ion-row>
</ion-grid>

https://i.sstatic.net/cMdZV.png

Check out this Stackblitz example for reference:

https://stackblitz.com/edit/ionic-angular-v5-aa5fc5?file=src/app/components/test/test.component.html

Update:

If you're encountering issues, remember that it should work even without specifying the size.

Answer №3

To incorporate ngFor into an ion-col HTML tag, simply add the directive within the tag like this: ngFor="let item of items". Don't forget to declare the variable "items" in your TypeScript file - for example, items = new Array(24);

  • This technique is specifically tailored for Angular framework, but can be adapted for React or Vue as well.

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

Bootstrap CSS: image is overlapping text inside a div

In my layout, I have four inner div containers arranged as follows: small picture - text - small picture - text. <div class="container"> <div class="col-md-12"> <div class="row"> <div class="col-sm-2"> <div c ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing CSS to create dynamic 3D cube transformations

Exploring the realm of CSS 3D transforms to showcase cubes and cuboids featuring cross-sections has been my current venture. In this endeavor, I'm aiming at compatibility with Chrome, Firefox, and MSIE 11. It has come to my attention that in order to ...

htmlcss3d

Tips for evaluating style modifications on mouseover using cypress

Trying to test hover styles on table rows but encountering issues: Here is the code snippet I am testing: it("Table rows should display correct hover styles", () => { cy.get("table>tbody>tr").each(($el, index, $list) =&g ...

htmlcsscypresse2e-testing

How to utilize Bootstrap 4's d-flex to make an element span the entirety of the available space?

Creating this specific design is now achievable with the new bootstrap d-flex feature. Can you guide me on how to craft a section similar to the one depicted in the second image? https://i.sstatic.net/LtTux.png https://i.sstatic.net/RlWvJ.png ...

htmlcssflexboxtwitter-bootstrap-4

Tips for combining a linear-gradient and background-image on a single element:

Is it possible to apply a linear-gradient color along with a background-image on the same div element in HTML? I've been trying to achieve this but haven't been successful so far. Any suggestions would be greatly appreciated. Below is the snippe ...

htmlcssbackground-imagelinear-gradients

Find the nearest iframe relative to a parent element

I am attempting to find the nearest iframe element to a parent element in order to pinpoint the specific iframe that I want to customize using CSS: <div class ="accroche"> <iframe></iframe> <iframe></iframe> &l ...

javascripthtmlcssiframe

Updating a data attribute in Angular 2: A different approach

Currently, I am utilizing ConvertFlow to integrate pre-designed form templates into my project. To specify where the form should appear, I include a div with the unique identifier of the form created within their platform. While this process is straightfor ...

angular

Triggering an automatic pop-up window using JavaScript based on a PHP condition

I have developed a hidden pop-up box that becomes visible when targeted, with its opacity increasing to one. I am aiming for the pop-up to appear if the user is identified as a "firstTimeUser," a status saved in a PHP $_SESSION variable. However, I am stru ...

javascriptphphtmlcss

Using setTimeout() does not work correctly when trying to call nested functions

I've written a timeout function that looks like this: setTimeout(this.logout, 1000); Here's the login method: logout() { this.auth_token = ""; this.loggedIn = false; this.emitLogedInStatusChange(); } isLoggedIn() { return this ...

javascriptjqueryangularsettimeout

Struggling to show labels in the correct position for each button?

I need help with aligning labels under buttons. I have 3 buttons, each with a corresponding label. I want the labels to be displayed in line under the buttons, and if the length of a label exceeds the button width, it should wrap to the next line. I'v ...

htmlcss

It seems that CSS shadows are working perfectly on Firefox and Chrome, but unfortunately, they are not displaying on

I have encountered an issue where CSS shadows appear fine on Firefox and Chrome, but do not display in Internet Explorer. Below is the code I am using: -moz-box-shadow: 0 0 20px #000; Can anyone provide a solution for this compatibility problem? Thank ...

htmlcss

When implementing ReplaySubject in Angular for a PUT request, the issue of data loss arises

I seem to be encountering a problem with the ReplaySubject. I can't quite pinpoint what I've done wrong, but the issue is that whenever I make a change and save it in the backend, the ReplaySubject fetches new data but fails to display it on the ...

javascriptangulartypescriptrxjs

Whole page scrolling instead of just inner div scrolling

Once again, I find myself tinkering with CSS... In the current setup, the map container is scrolling on its own, separate from the rest of the content within the container. How can I enable the entire page to scroll when additional content is added to the ...

htmlcsslayout

methods for transferring javascript variables to modal

<div> <h5> <a href="<?php echo base_url(); ?>/vendor/home/projects" >Return to Projects</a> </h5> <div> <div class="container"> <div class="row"> ...

javascriptphpjqueryhtmlcss

What is preventing my accordion from closing completely?

I'm currently working on creating FAQ questions in an accordion format. However, I've encountered an issue where adding padding around the answer section prevents the accordion from closing completely. Removing the padding solves the problem, but ...

javascripthtmlcss

Customize the filename and Task Bar name for your Electron app when using electron-packager

My application uses electron packager to build the app on Mac. Here is my package.json configuration: { "name": "desktop_v2" "productName": "desktop v2", "version": "1.0.0", "license": "MIT", "scripts": { "build": "node --max_o ...

javascriptangularnpmnpm-scriptselectron-packager

What is the best method for incorporating a variable into an Ionic iframe?

Can anyone help with integrating a variable into an Ionic iframe? <ion-content> <iframe src="http://local/server_api/pr.php?p={{insert-variable-here}}" style="width: 100%; min-height: 100%; height: 100%;" frameborder= ...

angularionic-frameworkionic3ionic4

The modifications made to the input type="time" in View do not get updated in the Model within Angular

I have been attempting to validate the input type "time", but I am encountering an issue where changes in the view are not reflected in the model if any of the input fields are left empty. For example: https://i.sstatic.net/1U0sO.png When a user change ...

javascriptangularhtmltypescript

How to check all checkboxes in Angular using ngFor and ngIf?

Is there a way to select all checkboxes in an Angular form that uses ngFor and ngIf? I want to activate all checkboxes for the months when I click on "Select All". The list of months is stored in an array. Click here to see the HTML representation of the ...

angularcheckboxngforangular-ng-if

Exploring Angular 10: Managing Two Promises in ngOnInit

I am currently working on integrating the Strava API into my Angular app. To summarize briefly: When a user clicks on a button to connect to Strava They are redirected to Strava for authentication (using PKCE) Strava then redirects back to my app with a ...

javascriptangularfirebasepromiseangularfire2