What is the best way to set unique heights for various ion-grid components?

Situation: I am facing an issue with my Ionic/Angular app. The screen layout, as shown in the image provided and on Stackblitz, includes two ion-grids with different background colors - green and red.

Goal: My goal is to assign a percentage height to each grid - for example, 70% to the green one and 30% to the red one. The content in the red grid should be scrollable to view all text without a global scrollbar appearing. Only the red area should have its own scrollbar.

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

What I have tried: I have experimented with various configurations of ion-row and ion-col, attempting to use properties such as position:fixed or position:sticky on the red grid. However, I am struggling to position the green grid below (vertically adjacent to) the red grid without overlapping it.

Stackblitz: https://stackblitz.com/edit/ionic-t8maqc

Any assistance on this matter would be greatly appreciated!

htmlcssionic3

Answer №1

You have the flexibility to create unique styles for each grid.

Consider this example, where in your html file you can structure it like so:

<ion-grid class="blueGrid">
    *your code here*
</ion-grid> 
<ion-grid class="yellowGrid">
    *your code here*
</ion-grid>

Subsequently, in the corresponding css file for this html snippet, include the following code:

.blueGrid {
    background: blue;
    height: 70%; 
}

.yellowGrid {
    background: yellow;
    height: 30%; 
}

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

issue with jQuery not properly selecting options based on text

I have three select elements in my code, each containing 3 or 4 options. An "Apply All" button is placed on the first file row. When a user selects a sheet name on the first file and clicks the Apply All button, it should automatically select the same she ...

javascriptjqueryhtml

Issues arise when the condition fails to function correctly during the process of form

I am currently working on a question from my elder brother's question paper, but I am struggling to solve it. The task is to create a form with two text fields, a radio button, and a submit button. The text fields should be named "account number" and ...

javascriptjqueryhtmlformsvalidation

Dynamic grid arrangement showcasing cells of varying heights

I am dealing with a grid layout where cells are dynamically generated using the following code: <style> .calWrapper{ width:200px; float:left; } </style> <div class="container"> <?php for($i=1; $i<=12; $i++){ echo ...

htmlcssgrid-layout

The column is not properly aligned

I am facing a challenge in aligning 3 elements using bootstrap while working with Angular 8. To include only the necessary CSS from Bootstrap (such as col-md and col classes), I have added the following to my styles array: "styles": [ "src/ ...

cssangularsassbootstrap-4

Implementing Fullpage.js with persistent elements throughout slides

Can I keep certain elements fixed between slides? I found that the only way to accomplish this was by placing the text element outside of the slide div. <div class="section" id="section1"> <div class="intro"> <h1> ...

javascriptjqueryhtmlfullpage.js

Maintaining photo proportions in HTML when using width and height as percentages

Is it possible to specify width and height as percentages in the <img> attributes? It seems that when I attempt to do so, the image resizes but the quality appears skewed. Here is an example of my markup with fixed attributes: <img src="#" widt ...

htmlimageimage-size

Phase 2 "Loading" visual backdrop

I'm attempting to include a loading animation GIF in my Cycle 2 plugin. Is there a way to ensure that the GIF loads before the images? Right now, I have set my loading.gif as a background image. The issue is that the loading.gif isn't displaying ...

javascripthtmlcssjquery-cycle2

Utilizing Node.js modules in a frontend HTML file with the help of browserify

I am encountering difficulty using a node.js module on my website with browserify. The example provided only demonstrates how to run a separate JavaScript file, not how to incorporate the node.js module within the .html file itself. This seemingly simple i ...

javascriptjqueryhtmlnode.jsbrowserify

Position 2 identical classes side by side on the horizontal axis

Currently enrolled in the MIMO HTML course and facing a challenge where I am unable to align both elements with the class="column" attribute horizontally using display: inline-block; I have attempted using float:right and other CSS properties to achieve a ...

htmlcssclass

Expanding and collapsing multiple rows within a Bootstrap grid

Seeking advice on Bootstrap and its implementation of columns and rows. Currently facing a cascading effect where I have managers, followed by employees, and then employee family members. The challenge lies in my limited understanding of how Bootstrap uti ...

htmlcsstwitter-bootstraprows

What is the best way to prevent the child elements from inheriting the hover effect of the main container?

Looking to spice up the appearance of the div element that holds the product's image, SKU, and price. Adding a hover effect to the main container causes the child divs to inherit it, resulting in separate hover effects on each child div. Sample HTML ...

htmlcss

Make sure to save the HTML content after we make an AJAX call to retrieve it

Is there a way to call an HTML file using Ajax and then save the response as an HTML file in a specific location? I have been trying to make an Ajax call using jQuery, like shown below: $.ajax({ type: "POST", url: "../../../project/html/T ...

javascriptjqueryhtmlajaxjsp

What is the best way to adjust the width of a table td element using CSS in Spiceworks?

I'm attempting to modify a CSS code snippet for Spiceworks. Here is the specific line that I need to adjust: <td class="body-id cell-id" style="width: 12%; "></td> The following code: SPICEWORKS.utils.addStyle('body{background-col ...

cssspiceworks

The CSS div mysteriously vanishes right before I can trigger the click event

My CSS code looks like this: #searchbar-wrapper input#header-searchbar:focus + #search-dropdown-wrapper { display: block; } The purpose of this code is to make a dropdown visible when a user focuses on a textbox. The default behavior should be th ...

css

Using the method window.open() will launch a new window instead of opening a new tab

When the page loads, I am using JavaScript to call window.open. window.open(url, "Test Page"); Initially, it opens a new Chrome window and displays the page. However, when I use the same JavaScript code after the page has loaded, it opens the page in a n ...

javascripthtml

Incorporating an HTML file into a DIV container while also displaying menu links

I am facing a major challenge with what I recognize as a relatively simple issue for experts. As someone who is still learning, I am struggling to create menu links that load an HTML file into a specific DIV. Despite my efforts, the content keeps loading i ...

javascripthtmlloadinghref

Tips for creating a sidebar table of contents with CSS

I'm looking to design a webpage with a side bar table of contents (TOC) similar to the one found here: The current placement of the TOC on the HTML page is as follows: <h2>Table of Contents</h2> <div id="text-table-of-contents&quo ...

htmlcsstableofcontents

How to Retrieve the td value of an element located below an input tag using jQuery

I'm working with this sample HTML code snippet: <tr> <td align="center" headers=" " class="data"><input type="checkbox" name="the-id" value="4222816"></td> <td headers="HDR1" class="data">RED</td> <t ...

jqueryhtml

Conceal a division using CSS based on its data-role attribute

After extensive research, I have yet to find a solution. Let's say there is a div structured like this: div[data-role="form-footer"] What would be the most effective method for hiding it, and can it be done using CSS? I've tried the f ...

htmljquerycss

What causes my code to break completely when I import something?

My chrome extension has a simple function that retrieves a user's selected text using the Chrome Tabs API. I am looking to integrate a Hugging Face API in the future, but I am facing an issue. Whenever I try to import the necessary model, the Chrome T ...

javascripthtml