Equal height Flex rows not working in <ion-content>

spanhawk · December 29, 2014, 6:33am

Hello,

I am tring to have two rows inside my content box
Lets say that both of the rows should split the height of the view port equally ( 50: 50). My requirement is I want them to split the height (40:60), but I am a begineer in flex boxes so Initially I am tring with 50:50.

The first row will have a img tag that should span entire width and height. But there is also a maximum width and height on that image.
The second row will have 3 list items, with left thumbnail

Here is codepen: http://codepen.io/spanhawk/pen/Ggjwye

Eventhough the image height and width is 600x500 I want it to take full width of cantainer and heigth should be 50 50 divided between two rows

**

Can anyone explain to me why it is not working and what to do to make it working ?

**

I am doing everything that is described in tutorial

I am banging my head on wall for past 6 hours, trying to figure out why it is not working.
One bad thing about css and html is that, there is no exception, errors etc.

spanhawk · December 29, 2014, 11:55am

So far no response ??

spanhawk · December 29, 2014, 4:34pm

This is second time, I am posting remainder.
It’s been more than 10 hours since I post this question and still no help.

mhartington · December 30, 2014, 12:05am

This is very simplified, but it should get you in the right direction.

Shinji89 · March 16, 2015, 12:50am

Unfortunally your example doesen’t work on android <= 4.3 :\

mhartington · March 16, 2015, 12:25pm

Try including the additional prefixes.

.container {
  background: #000;  
  top: 0;
  bottom: 0 !important;
  position: absolute !important;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-item{
  width: 100% !important;

  -webkit-box-ordinal-group: 1;

  -webkit-order: 0;

      -ms-flex-order: 0;

          order: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-align-self: auto;
      -ms-flex-item-align: auto;
          align-self: auto;
  border:thin solid black
}

.flex-6{
    -webkit-box-flex: 6;
    -webkit-flex: 6 1 auto;
        -ms-flex: 6 1 auto;
            flex: 6 1 auto;
}

.flex-4{
    -webkit-box-flex: 4;
    -webkit-flex: 4 1 auto;
        -ms-flex: 4 1 auto;
            flex: 4 1 auto;
}

Shinji89 · March 16, 2015, 3:30pm

doesen’t work:

Code:

    <ion-view view-title=' Home'>
    <ion-content>
        <style type="text/css">
        .scroll {
            min-height: 100% !important;
        }
        .container {
            top: 0;
            bottom: 0 !important;
            position: absolute !important;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-align-content: stretch;
            -ms-flex-line-pack: stretch;
            align-content: stretch;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
        }
        .flex-item {
            width: 100% !important;
            -webkit-box-ordinal-group: 1;
            -webkit-order: 0;
            -ms-flex-order: 0;
            order: 0;
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            -webkit-align-self: auto;
            -ms-flex-item-align: auto;
            align-self: auto;
        }
        .flex-4 {
            -webkit-box-flex: 4;
            -webkit-flex: 4 1 auto;
            -ms-flex: 4 1 auto;
            flex: 4 1 auto;
        }
        </style>
        <div class="container">
            <img class="flex-item flex-4" src="img/mindfulness.jpg" ng-click="go('content/mindfulness')">
            <img class="flex-item flex-4" src="img/apertura.jpg" ng-click="go('content/acceptance')">
            <img class="flex-item flex-4" src="img/azione.jpg" ng-click="go('content/action')">
        </div>
    </ion-content>
</ion-view>

mhartington · March 16, 2015, 4:11pm

Hmm, try this.

        .scroll {
            min-height: 100% !important;
        }
        .container {
            top: 0;
            bottom: 0 !important;
           width: 100%;
            position: absolute !important;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-align-content: stretch;
            -ms-flex-line-pack: stretch;
            align-content: stretch;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
        }
        .flex-item {
            width: 100% !important;
            -webkit-box-ordinal-group: 1;
            -webkit-order: 0;
            -ms-flex-order: 0;
            order: 0;
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            -webkit-align-self: auto;
            -ms-flex-item-align: auto;
            align-self: auto;
        }
        .flex-4 {
            height: 33%;
        }

It may be a case where the flex properties on the child elements aren’t supported, so we can use height instead

Shinji89 · March 16, 2015, 7:32pm

Result:

If i click on a section and then go back, the images width is fixed, so seems a problem related with the launch of the app and the flex property.

rohan2934 · March 19, 2016, 10:18am

How can i divide the html page into two equal parts horizontally???

Dave-1 · August 17, 2016, 4:36pm

I am working on below code it doesnt seem to work on ios , safari browser. how can i make it work.

<ion-content>

    <style type="text/css">
  .my-container {
       display: flex;
       flex-direction: column;
       height: 100%;

  }
 .first-row {
       flex: 1;
             background-image:url("img/davegame.jpg");
      background-size:100%;
 }

 .second-row {
       flex: 1;
             background-image:url("img//dave.jpg");
      background-size:100%;
 }

 .third-row {
       flex: 1;
        background-image:url("img/davehome.jpg");
        background-size:100%;
 }
    </style>
    <div class="my-container">

        <div class="row first-row">…</div>

        <div class="row second-row">…</div>

        <div class="row third-row">…</div>

    </div>
</ion-content>

Topic		Replies	Views
Trouble with Flexbox ionic-v1	1	942	February 20, 2015
Flexbox equal vertical split stopped working ionic-v3	1	701	August 16, 2016
Flexbox Grid / full screen view Css flex containers ionic-v1	1	2934	July 11, 2015
Set height of col / row ionic-v1	4	14736	July 31, 2015
Image Button Height Issue ionic-v1	9	8350	August 24, 2016

Equal height Flex rows not working in <ion-content>

Can anyone explain to me why it is not working and what to do to make it working ?

Related topics