Ionic: Ensuring the ion-grid fits perfectly with the content

I've been facing a challenge with this recently, so I've made the decision to reach out here for some assistance.

The illustration below displays my current situation. There is an ion-card (in red), containing an ion-grid (blue) with 6 ion-rows, the last two of which have 3 ion-cols each (in green).

No specific width has been set for any of the elements (apart from the ion-cols with a col-4 attribute). The final two rows are currently spanning the entire width of the ion-grid... Two things I am aiming to achieve:

I want the last two rows to adjust their width according to the content (so all cols will match the widest cell); and then, I wish to center that grid - which will now be slightly narrower than the ion-card's width - horizontally within the card. Any guidance on how to accomplish this? Thank you!

Screenshot

Below is the resulting HTML code:

<ion-card class="card card-md">

  <ion-card-content class="card-content card-content-md">
    <ion-grid class="grid">

        <ion-row class="row">orci ut</ion-row>

        <ion-row class="row">lorem ipsum dolor</ion-row>

        <ion-row class="row">consectetur adipiscing </ion-row>

        <ion-row class="row">tristique</ion-row>

        <ion-row class="row">
      <ion-col class="col" col-4="">netus</ion-col>
      <ion-col class="col" col-4="">dui sollicitudin lacinia </ion-col>
      <ion-col class="col" col-4="">accumsan</ion-col>
    </ion-row>
    <ion-row class="row">
      <ion-col class="col" col-4="">Phasellus porta</ion-col>
      <ion-col class="col" col-4="">bibendum</ion-col>
      <ion-col class="col" col-4="">tempor eget</ion-col>
    </ion-row>

    </ion-grid>
  </ion-card-content>
</ion-card>
cssionic-frameworkionic3

Answer №1

Ensuring your columns adjust to their content width is simple: just remove the col-4 class. Check out the documentation for more details:

Normally, columns will automatically have equal width within a row across all devices and screen sizes.

To horizontally center the columns, you can use the CSS property text-align. Learn more about this on developer.mozilla.org:

The text-align CSS property specifies the horizontal alignment of an inline or table-cell box. It's similar to vertical-align but for horizontal alignment.

Your layout may resemble the following (inline styles are utilized here, but consider incorporating them into your CSS if suitable):

<ion-card class="card card-md">
    <ion-card-content class="card-content card-content-md">
        <ion-grid class="grid">

            <ion-row class="row">orci ut</ion-row>
            <ion-row class="row">lorem ipsum dolor</ion-row>
            <ion-row class="row">consectetur adipiscing </ion-row>
            <ion-row class="row">tristique</ion-row>

            <ion-row class="row" style="text-align: center">
                <ion-col class="col">netus</ion-col>
                <ion-col class="col">dui sollicitudin lacinia </ion-col>
                <ion-col class="col">accumsan</ion-col>
            </ion-row>
            <ion-row class="row" style="text-align: center">
                <ion-col class="col">Phasellus porta</ion-col>
                <ion-col class="col">bibendum</ion-col>
                <ion-col class="col">tempor eget</ion-col>
            </ion-row>

        </ion-grid>
    </ion-card-content>
</ion-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

Tips for adding a random element to your quiz

I've been attempting to randomize these quiz questions using the math random function, but my lack of experience is hindering my progress. How can I effectively randomize these questions for the quiz? Is there a straightforward method to convert the ...

javascripthtmlcssarraysrandom

How can you make a drop-down menu in React/Bootstrap appear above all other elements?

My current goal is to implement a Bootstrap dropdown menu that appears when a button is clicked. Within my component structure, the code looks like this: <> <div className='1'> <navbar/> <div> < ...

javascriptcssreactjsbootstrap-4dropdown

Encountering an npm install error during the creation of an ionic app on Windows 10 despite having all required dependencies installed and environment variables properly configured

view error screenshot npm version 5.3.0 node version 8.4.0 cordova version 7.0.1 ionic version 3.9.2 Below are my environment variables: C:\Program Files (x86)\Java\jdk1.7.0_17\bin;C:\Android_SDK_latest\platform-tC:\An ...

androidcordovaionic-frameworknpmnode-modules

Influence the behavior of surrounding elements as we move our cursor over them

I want to create an effect where I have two images, with the first one hidden initially. When we hover over the second image, the first image should become visible. Here are the codes and class names related to the images: <div class="entrycontent"&g ...

javascriptjqueryhtmlcsshover

Getting rid of breakpoints in Bootstrap 3

I recently inherited a web application that utilizes Bootstrap 3 as its framework with some basic customization applied through the recommended _custom-variables.scss method. The official SASS port is included as a dependency and imported into the app.scss ...

csstwitter-bootstraptwitter-bootstrap-3sass

Make sure to consistently show the rating bubble within the md-slider

I am currently exploring the functionality of md-slider in its md-discrete mode. However, I would like to have the slider bubble always visible on the screen, similar to this: I do not want the slider bubble to disappear when clicking elsewhere. Is there ...

angularjscssangular-material

Problem with fixed element on mobile due to viewport width

I am experiencing an issue with the fixed element's width. Here is a code snippet for reference: https://codepen.io/highfield/pen/PKpXGG <body> <nav class="navbar"> <div style="position:absolute; left:20px; top:12px"> & ...

csstouchfixedhorizontal-scrolling

The combination of loading and scrolling JavaScript code is not functioning properly on the website

I created an HTML webpage that includes some JavaScript code to enhance the user experience. However, I encountered an issue when trying to incorporate a load JavaScript function alongside the scroll JavaScript function on my page. The load script is posi ...

javascripthtmlcss

Hierarchy segment for CSS selection

I have a rather unique query. How can I create a selector that targets a specific part of the hierarchy based on classes? For instance, I'd like to select something like: <node class="start-selection"> <node> <n ...

css

Get rid of all the formatting on an HTML button or submit

Is there a method to entirely eliminate the styling of a button in Internet Explorer? I am utilizing a CSS sprite for my button and everything appears fine. However, when I click on the button, it shifts slightly upwards which distorts its appearance. Are ...

htmlcssinternet-explorerbuttonstate

Animation event in CSS3 fails to trigger on Firefox browser

Exploring the potential of CSS3 animation to detect when an input transitions from the enable to disable state, I encountered a challenge specifically in Firefox. Here is the code snippet that showcases the issue: View Demo on jsFiddle HTML: <input t ...

javascriptcssanimationfirefoxdom-events

Unable to remove the white space appearing below and after a div in HTML

I have been working on creating a website. You can find my JSFiddle here. On my JSFiddle, you might notice a white gap above the black image labeled INSURANCE, and another white gap below it. I've tried various solutions but haven't been able to ...

javascriptjqueryhtmlcss

The clear both property in CSS has an impact on the layout flow

Why is the placement of the <h1> tag with "clear both" at the bottom causing issues? Removing "clear both" resolves the problem, but how can I make it work when including "clear both"? <!DOCTYPE html> <html> <head> <meta http- ...

htmlcss

Steps for creating a bold column in an HTML display

Here is my PowerShell script that generates a nicely formatted HTML table. I am struggling to figure out how to make just one column (Full %) bold within the table. I have attempted inserting bold tags in various places and considered using the replace fu ...

htmlcsspowershell

Multi-tier Dropdown with Dynamic Size Adjustment

I am attempting to adjust the size of a div container within a dropdown menu so that it properly accommodates the text inside. <div class='dropdown'> <button class ="dropbtn"><b>Hover!</b></button> <div c ...

htmlcss

Eliminate spaces between divs without any margins or padding

In my HTML code, I have two divs with different classes - mini-date-holder and mini-event-holder. Even though both of these divs are set to have no margin or padding, they are still displaying with a gap between them. I'm struggling to understand why ...

htmlcss

The Vite build tool creates unique CSS module classes for each component

Is it possible to set the CSS module class name in the index.js file generated during the Vite build process? I am developing with multiple themes and a single-entry JS file. Currently, this is the output I get when trying to build the project: Index.js & ...

htmlcssvue.jsvitecss-modules

What is the best way to use CSS to ensure that dynamic, data-driven characters can be properly displayed within a div

I'm in the process of updating a data-centric website that relies on information from an automated database engine. In the HTML, there's a fixed-size button containing text pulled from the database. I'm looking to incorporate some CSS styles ...

javascriptjqueryhtmlcss

When clicking, the fixed header and footer suddenly shift out of place

In my jquery mobile application, I am facing an issue with a fixed header and footer. Whenever I click on the screen, the fixed header and footer get displaced and are no longer fixed. I am unsure how to resolve this bug. Any suggestions on how to fix it w ...

javascriptjquerycssjquery-mobile

Is there a way to store image URLs in a fashionable manner?

Hey there! I've been working on creating a HTML page that showcases multiple images. Everything is running smoothly on my localhost, but when I try to access it online, the images take forever to load. Any suggestions on how I can cache image URLs in ...

javascriptjqueryhtmlcss