CSS: Achieving Full Container Width Text with Respect to Another Container's Height

Hello, I am facing a very specific issue that I can't seem to resolve:

I have two containers (ion-card) and I want them to always be the same height. I was able to achieve this by following the solution provided here:

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

The problem lies in the fact that the text on the left does not occupy the full height of the card, which is not visually appealing. I tried increasing the font size, but this only made the imbalance between the left and right sides more apparent (the ion-card would increase in height, but not the images).

In addition, the text actually comes from another component (not sure if this contributes to the issue or not).

Here is the Ionic code:

<ion-grid>
<div class="card-height">
  <ion-row>
    <ion-col>
      <ion-card>
        <ion-card-header>
          <ion-card-title class="card-header">Test  </ion-card-title>
        </ion-card-header>
        <ion-card-content>
        <!-- The component that contains the text -->
          <app-results></app-results>
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col>
      <ion-card>
        <ion-card-header>
          <ion-card-title class="card-header">Galerie </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <hr />
          <hr />
          <ion-grid>
            <ion-row>
              <ion-col><img src="assets/profil_image.png"/></ion-col>
              <ion-col><img src="assets/profil_image.png"/></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
            </ion-row>
            <ion-row>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
            </ion-row>
            <ion-row>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
              <ion-col><img src="assets/profil_image.png" /></ion-col>
            </ion-row>
          </ion-grid>
          <div style="text-align: center">
            <ion-button
              style="width: 200px"
              color="medium"
              fill="outline"
              shape="round"
              >Become V.I.P.</ion-button
            >
            </div>
          </div>
          <ion-item lines="none">
            <ion-icon
              slot="end"
              name="pencil-outline"
              class="pointer"
            ></ion-icon>
          </ion-item>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</div></ion-grid>

Here is the SCSS:

.card-height {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  ion-col {
    display: flex;
    justify-content: center;
  }
  ion-card {
    width: 100%;
  }
}

The app-result component:

<div *ngFor="let item of uniqueResults">
    <ion-text
      [ngClass]="{
              'result-100': item?.average >= 75 ||  item?.average >= 100,
              'result-90': item?.average >= 62 ||  item?.average >= 74,
              'result-80': item?.average >= 6 ||  item?.average >= 61,
              'result-70': item?.average >= 0 ||  item?.average >= 5}"
      >{{item?.role}} - {{item?.average }} %
    </ion-text>
    <br />
  </div>
  <div style="text-align: center">
    <ion-button
      style="width: 200px"
      color="medium"
      fill="outline"
      shape="round"
      [routerLink]="['/test']"
    >
      Test
    </ion-button>
  </div>

Answer №1

It seems that the height for ion-card has not been explicitly set, causing it to default to the height of its content.

You can try defining a height: /* my height */;, or even better a min-height: /* my height */;. Adjusting heights for specific devices may require using

@media screen and (max-width:770px) { /* code here */ }

Keep in mind that these changes will only affect the container's height. To ensure text fills the container vertically, you may need to resize the text based on the container's dimensions.

Answer №2

To ensure the grid inside your

<app-results></app-results>
Component takes up 100% of the available space within this card, I recommend structuring it in a similar way to how it is displayed on this page. This will guarantee consistent spacing throughout different device sizes.

Styling the

<app-results></app-results>
component directly may not provide the same results across all devices. However, incorporating a grid layout within the
<app-results></app-results>
component will always occupy the entire available space within the card.

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

Styling list items (li) on hover without using the li:

I have a menu where I am using the :after element. When I hover over a li in the menu, the hover effect also includes the :after element. HTML: <ul class="main-menu"> <li class="active"><a href="">Menu</a></li> <l ...

Ways to retrieve and upload a blob from a file object

After receiving a file object via an HTML input on-change event in my component.html: onFileSelected(event) { this.selectedFile = event.target.files[0]; } Now, I need to send a POST request to upload the image to the database. The database only acc ...

Increase the bottom padding or add some extra space to the Bootstrap form or page

I am currently working on enhancing a Bootstrap Form that includes reset/submit buttons positioned at the bottom. A common issue is when iPhone users attempt to click the Submit button, which initially displays Safari icons before requiring an extra tap to ...

Adding SVG to Component

I am attempting to embed an SVG element (retrieved using http.get()) into a 'icon' component. export class BgIcon { private svgSrc_: string; icon_: Icon; @Input('svg-src') set svgSrc(value: string) { this.svgSrc_ = value; ...

Configuring a Custom Color for the Bootstrap Datetimepicker

Problem I encountered an issue with my projects that are both using the bootstrap-datetimepicker. While one project displays the correct color, as seen here, the other project shows a wrong color, shown here. Below is the HTML code snippet I am working wi ...

Using CSS to create sleek all-black Flaticons

After trying various solutions, I am still unable to fix this issue. I downloaded some icons and in the demo, they all appear as they should, with a more colorful aesthetic. Here is what the icons should look like: However, this is how the icons actually ...

What exactly does the "data-effect" attribute refer to?

After downloading a code, I came across the following line: <button data-effect="st-effect-4">Slide along</button> I noticed that "st-effect-4" is a class name in the code, but I am curious to know what exactly this data-effect attribute is u ...

Experiencing difficulty adjusting the width of a Tumblr post with JavaScript or jQuery?

Calling all coding experts! I've been working on customizing a Tumblr theme, and everything is looking good except for one issue. I'm struggling to adjust the width of photos on a permalink (post) page. Check out this link: You'll notice t ...

Implementing Login using Google in a Nativescript iOS application: A step-by-step guide

I've been working on implementing Google's ID provider login in Nativescript using the nativescript-social-login plugin. While it works smoothly on Android, I've hit a roadblock with iOS. Following the instructions from the plugin creator, ...

What could be causing the horizontal scroll bar to appear on the Web Page, even though it should fit perfectly on

I've designed this website to perfectly fit within the browser window, but for some reason, there's a horizontal scrollbar appearing. When a site fits properly, there shouldn't be a need for a horizontal scroll bar. I double-checked my zoom ...

Navigating back to the previous page with data in Angular 4 after switching from Angular 2

One scenario to consider is when page C features a Go Back button. On Page A, navigate to Page C with data and click the Go Back button to return to Page A with data. Similarly, on Page B, go to Page C with data and press the Go Back button to go back to ...

Similar to AngularJS Component's "require" property, Angular Component also has an equivalent

In the process of updating a sizable Angular 1.6 App, we encounter numerous components that utilize 'require' to access the parent component's controller. The structure of an AngularJS component appears as follows: var tileTextbox = { ...

The primary division containing two inner divisions, one centered and the other positioned to the right

I would like the layout to resemble the image provided. The div header contains two nested divs - the logo div should be centered, and the info div should be positioned to the right with some margin. ...

Overflow of nested item within flex container

I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...

Implementing a sticky header for tables using Bootstrap

I'm experiencing a conflict because the header remains fixed only when I include the table-responsive class in my code. However, I also need the table to have overflow. Can anyone provide assistance with this issue? Using the table-responsive class ...

Two-way data binding in Angular 2 is a powerful feature that allows for

My goal is to construct a parent component called Action, which includes two child components named Infos and Localisation. I want to connect the inputs of the children with the parent model. This is the model: export class Action{ title: string; ...

Difficulties encountered while attempting to modify a class using Javascript

Recently, I've encountered an issue with my JavaScript where I am unable to keep a particular element's class changed. Despite attempting to change the class to "overlist", it only stays that way briefly before switching back to its original stat ...

Encountering problem with npm ERR! peer @angular/common@"^12.0.0" while trying to install @ng-bootstrap/[email protected]

Encountering an issue during the deployment of my Angular application. I added the @ng-bootstrap/ng-bootstrap package, but there seems to be a dependency resolution problem causing the issue. 22-Dec-2022 07:03:47 npm ERR! Could not resolve dependency: 2 ...

Apply a dual-color gradient background vertically

I am trying to figure out how to achieve a two-tone background color in an HTML document. I know this question has been asked before, but I specifically want the colors to be split vertically rather than horizontally. ...

The module 'AppModule' has an unexpected directive 'MatAutoCompleteTrigger', make sure to add a @NgModule annotation to resolve this issue

I am seeking assistance in writing a unit test for the closePanel() method. I have imported MatAutoCompleteTrigger, but encountering an error. Any guidance on resolving this issue would be greatly appreciated. ...