Remove Height Auto Using CSS

Remove height auto using css

While this answer feels somewhat cheap, I truly believe it's the answer you're looking for...

You can't.

Once you've set a height on the img in CSS, the HTML declaration gets immediately overridden. There is no way further along in the CSS to then ignore that declaration and use the HTML-specified height, because things like initial refer to CSS-defined properties (source), not associated HTML attributes.

See this reference for CSS Height, which lists all Property Values: ^{^{*Experimental/non-supported values ommitted}}

height: auto | length | % | inherit | initial

If you attempt to re-define the height of img using any of the above property values, they will not work - I've just tried each and every one to be sure.

length and % require a defined height, which seems to be the exact thing you're trying to avoid
initial will just grab the initial CSS declaration of height: auto;
inherit doesn't have an ancestor to inherit from, therefore it falls back to the default of auto

Your only real choice is to override the height in CSS, either using in-line styles (as suggested by Carter)...

<img style="height: 150px;" />

Or by applying selectors like ID's or classes...

<img id="my_image" />

#my_image {
    height: 150px;
}

Or, if you need to use JS to auto-generate the overrides, consider something like this jQuery solution:

$("img").each(function() {        //Loop through all images
    var $t = $(this);             //$t is the current iteration
    var ht = $t.attr("height");   //Get the HTML height
    ht = ht ? ht+"px" : "auto";   //If HTML height is defined, add "px" | Else, use "auto"
    $t.css("height", ht);         //Apply the height to the current element
});

This loops through all images on the page and applies a CSS height to match the HTML height. If there is no HTML height, it will use height: auto;.

Remove height of Div with Height: Auto? JS/CSS

In your div btmControl, there is the code

                    <div class="volume" title="Set volume">
                        <span class="volumeBar"></span>
                    </div>

for which I cannot see the use right now.
Try changing the corresponding height value in the css part (.volume and .volumeBar) or consider removing it (if it really is not useful)
Because it is set to

display:block;

it should create a new line and not fill in a row along with the other divs.
So display:inline; will also provide a possible solution

Furthermore, the following divs will also be aligned in a new line. I propose this is the line break you do not want to have...
(For an example of display:block effect click here)

But anyway, a fiddle version for this problem would be of great help!

Override height attribute and disable it

your css code

 .label-bold-pre-wrap {
    font-weight: bold !important;
    white-space: pre-wrap !important;
    height: 20px;
    font-size: 10px;
    border-color: #c2c3c4;
    background: transparent repeat-x;
    background-image: url(../reindeer/table/img/header-bg-light.png);
}
    .other{
        height:auto;
    }

your html code

<div class="label-bold-pre-wrap">hloo</div>
<div class="label-bold-pre-wrap other">hloo</div>

How can I transition height: 0; to height: auto; using CSS?

Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.

See JSFiddle demo provided by Chris Jordan in another answer here.

#menu #list {

    max-height: 0;

    transition: max-height 0.15s ease-out;

    overflow: hidden;

    background: #d5d5d5;

}

#menu:hover #list {

    max-height: 500px;

    transition: max-height 0.25s ease-in;

}

<div id="menu">

    <a>hover me</a>

    <ul id="list">

        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

    </ul>

</div>

Remove height property using @media

Use height: auto in the media query. That's the default setting. It will overwrite the fixed height in your standard CSS.

p {

  overflow-y: hidden;

  height: 150px;

  background: green;

}

@media screen and (min-width: 700px) {

  p {

    height: auto;

    max-height: 150px;

    background: yellow;

  }

}

<p>

  Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello

</p>

<strong>h1</strong>

CSS transition on height auto only working when adding class, not when removing class

It's the height, you are adding transition on max-height but your height changes to 0 instantly when you remove expanded class.

You can set height: auto; on the .information class with transition only on max-height.

.information{
  height: auto;
  max-height: 0;
  width: 100%;
  overflow: hidden;
  z-index: -1;
  background: #434C69;
  transition: max-height 700ms ease-in-out;

  &.expanded{
    max-height: 500px;
    border-bottom: 1px solid $secondary-blue;
  }
 }

Adding and removing height with JS breaks the height of div

The main problem is that you are using filling animation (fill: 'forwards'). Once the animation ended the element's animate style remain the last value and can't be overridden.

The solution is to cancel the animation.

Naive demonstration

const box = document.querySelector('#box');

let animation;

document.querySelector('#cancel').addEventListener('click', () => {
  animation.cancel();
});

document.querySelector('#setHeight').addEventListener('click', () => {
  box.style.marginTop = '100px';
});

document.querySelector('#animate').addEventListener('click', () => {
  animation = box.animate([
    {
      marginTop: '50px'
    },
  ], {
    fill: 'forwards',
    duration: 500
  });
});

#box {
  background: red;
  width: 50px;
  height: 50px;
}

<pre>
1. Click on "Set Box's margin-top 100px"
2. Click on "Animate"
3. Click on "Set Box's margin-top 100px" again Doesn't work
4. Click on "Cancel" Now the element is "free" and back to its place
</pre>

<button id="setHeight">Set Box's margin-top 100px</button>
<button id="animate">Animate</button>
<button id="cancel">Cancel</button>
<hr />
<div id="box"></div>

CSS Transition doesn't work on height property

So the problem is that you try to transition the height to 100% - but CSS can't handle that right away.

Fast but problematic solution:
You could set the height in the :hover to a fixed amount, e.g. 100px.

But if you want to have a new item in there or change the size of the items, you would have to adjust the height manually.

What I would do:
First I would restructure the HTML a bit and move the trigger out of the item list:

<nav>
    <button class="trigger">
        <i class="fas fa-bars"></i>
    </button>
    <ul class="icons fas-container">
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-users"></i></li>
        <li><i class="fas fa-concierge-bell"></i></li>
        <li><i class="fas fa-pen"></i></li>
        <li><i class="fas fa-phone-alt"></i></li>
    </ul>
</nav>

Then I would adjust the CSS of the .icons:

(remove the height, add a max-height and adjust the transition)

nav ul.icons {
    background: #fff;
    width: 60px;
    overflow: hidden;
    border-radius: 60px;

    max-height: 0;
    transition: max-height 0.2s ease-out;
}

In the end I would let JavaScript take care of getting the max-height right.

On hover:

let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onmouseover = function () {
    icons.style.maxHeight = icons.scrollHeight + "px";
}
btn.onmouseout = function () {
    icons.style.maxHeight = null;
}

Or on click (if you would rather do that):

let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');

btn.onclick = function() {
    if (icons.style.maxHeight){
        icons.style.maxHeight = null;
    } else {
        icons.style.maxHeight = icons.scrollHeight + "px";
    }
}

Here are some (maybe) helpfull links:

https://www.w3schools.com/howto/howto_js_collapsible.asp
How can I transition height: 0; to height: auto; using CSS?
https://codepen.io/felipefialho/pen/ICkwe

Snippet:

let btn = document.querySelector('.trigger');
    let icons = document.querySelector('.icons');
    btn.onmouseover = function () {
        icons.style.maxHeight = icons.scrollHeight + "px";
    }
    btn.onmouseout = function () {
        icons.style.maxHeight = null;
    }

body {
        background: #222;
    }

    .trigger {
        cursor: pointer;
    }

    nav {
        position: absolute;
        top: 30px;
        right: 30px;
        color: #222;
    }

    nav ul.icons {
        background: #fff;
        width: 60px;
        overflow: hidden;
        border-radius: 60px;

        max-height: 0;
        transition: max-height 0.2s ease-out;
    }

    nav ul.icons:hover {
        height: 100%;
    }

    nav ul li {
        list-style: none;
    }

<html lang="en">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
<nav>
    <button class="trigger">
        <i class="fas fa-bars"></i>
    </button>
    <ul class="icons fas-container">
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-users"></i></li>
        <li><i class="fas fa-concierge-bell"></i></li>
        <li><i class="fas fa-pen"></i></li>
        <li><i class="fas fa-phone-alt"></i></li>
    </ul>
</nav>
</body>

</html>

Remove Height Auto Using CSS