CODEWITHSUNDEEP
htmlcssionic-frameworksass
KatherineMichelle
KatherineMichelle

Reputation: 453

Div height: 0px not working in ionic.

I'm working on a project in ionic and I'm trying to collapse a div filled with content. I want to give the div a height of zero, and when you click a button the div expands and its auto height with all its content appears. For some reason giving my div a height of 0 isn't working. Can anyone tell me why? .flexFill is the one I want to collapse. And display: none doesn't do anything, because then I'm just left with a big box of white space and not a collapsed div. 

  .grid.shipments {
    border: 2px solid $list-border-color;
    padding: 0;
    .flexStatic .row {
      border-bottom: 2px solid $list-border-color;
    }
    .flexFill {
      overflow-y: scroll;
      padding-top: 10px;
      padding-bottom: 10px;
      height: 0px !important;
    }

    .filter {
      font-size: 20px;
      span {
        display: inline-block;
        padding: 5px 10px;
        color: white;
        border: 1px solid; 
        margin-top: 5px;
      }
      p {
        font-weight: normal;
        font-size: 14px;
      }
    }

Upvotes: 0

Views: 217

Answers (1)

Hanif
Hanif

Reputation: 3797

You should set padding: 0 as well and overflow:hidden; Because although height is zero but padding still taking the place. See below code:

.flexFill {
  overflow-y: scroll;
  height: 0px !important;
  padding:0;
}

Upvotes: 1

Related Questions