Full width to the ion cards under the ion-content

Question

I need to give a full width to the ion card. This works:

ion-card{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 !important;
      }

But I need to restrict it only to the children of ion-content. So tried this. But it is not working. i.e. It removes the full width of the cards. Any clue?

 ion-content>ion-card{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 !important;
      }

html

<ion-header>
 <ion-card>
      <h2>Notifications Area1</h2>
  </ion-card>
</ion-header>

    <ion-content>
      <ion-card>
        <h2>Notifications Area2</h2>
      </ion-card>
    </ion-content>

Note: I don't need to apply full width to the ion-header card.

Solution 1

This would be your solution: remove the > and change it for a blank space.

Here's some explaination on why to use the blank space,

element element, <div> <p> Selects all <p> elements inside <div> elements,

element>element <div> > <p> Selects all <p> elements where the parent is a <div> element

and in your case, the blankspace works better.

ion-card{
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        background: blue;
        width: 500px;
      }
ion-content{
  background: green;
}
ion-content ion-card{
  background: yellow!important;
  width: 100%;
}

<ion-content>
  <ion-card>
    <h2 text-center margin-top>Notifications Area</h2>
  </ion-card>
</ion-content>

<ion-card>
    <h2 text-center margin-top>Notifications Area</h2>
  </ion-card>

Solution 2

I've amended the formatting on the HTML and the CSS a bit.

HTML

<div class="ion-content">
  <div class="ion-card">
   <h2 class="text-center margin-top">Notifications Area</h2>
  </div>
</div>

CSS

.ion-content {
   display: flex;
   flex-direction: column;
   width: 100%;
   background: grey;
   height: 500px;
}



.ion-card {
    flex-basis: 100%;
}

h2 {
   color: blue;  
}

You can see a working example here. https://codepen.io/Angel-SG/pen/aPpWVM

Comments

[Itay Gal]

The child 100% width is the 100% of the parent, if the parent won't have 100% so does its children.

[Sampath]

Oh.. Sorry, I didn't get what you told. can you give a code example how can I do this? @ItayGal

[Hanif]

What do you mean by "removes the full width of the cards" it not respecting container element width?

[Ramon de Vries]

jsfiddle.net/dew0cLxq you were close, just replace the > with a blankspace and it works

[Sampath]

Please see the update @Hanif

[Sampath]

Please adjust this according to my latest update @RamondeVries

[Sampath]

Yes, your solution works. Can you put that as an answer and any explanation why > is not working? @RamondeVries

[Ramon de Vries]

@Sampath jsfiddle.net/dew0cLxq/1 this is changed abit, i left the width on all cards. my bad

[Sampath]

Please put that as an answer. Then I can accept it @RamondeVries

[ReSedano]

@Sampath But why do I have to remove >? jsfiddle.net/dew0cLxq/2 I don't understand the problem here... sorry :\

[Sampath]

I think maybe you're not using the ionic framework on your example no. With ionic and on the device > is not working. @ReSedano

[ReSedano]

@Sampath ah ok! That's good to know. Thank you :-)