Reputation: 6615

HTML - Scroll bar cuts off text

I am trying to get an element to fit the remaining space (which will change) and then scroll if needed. unfortunately it does not fit the remaining space correctly.

Here is the code:

*{
	border: 1px dotted blue;
	vertical-align: top;
	overflow:hidden;
}

<table>
	<tr>
		<td style="height:80vh; max-height:80vh;">

			<details open>
				<summary>Contents here will change in height</summary>
			<br><br><br>
		</details>

			<details id="FillMe" style="height:100%;overflow:auto;max-height:100%;margin:auto;" open>
				<summary>	Last element does not show</summary>
					<script>
						var html = [];
						for(var i = 0;i < 100; i++) html.push("<br> data "+ i);
						document.getElementById("FillMe").innerHTML += html.join('');
					</script>
					<br>
					Last line of data
			</details>

		</td>
	</tr>

</table>

Here is the fiddle showing the problem. https://jsfiddle.net/daxdax/anfvuLjw/1/ If you run it and scroll down you will not see the last element.

I have looked on stackoverflow but cannot find the answer. Elements outside of scroll area does not help.

Setting height to 100% should fill the remaining space. Why doesn't it?

Upvotes: 2

Answers (3)

Gustavo Costa De Oliveira

Reputation: 7494

This style doesnt work in td, I suggest you change to div

<div style="min-height: 100%;height: 100%;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;flex-direction: column;box-sizing: border-box;display: flex;">
    <details open="">
        <summary>Contents here will change in height</summary>
        <br><br><br>
    </details>
    <details id="FillMe" style="overflow:auto;box-sizing: border-box;flex: 1;-webkit-box-flex: 1;" open="">
        <summary>   Last element does not show</summary>
        <br> data 0<br> data 1<br> data 2<br> data 3<br> data 4<br> data 5<br> data 6<br> data 7<br> data 8<br> data 9<br> data 10<br> data 11<br> data 12<br> data 13<br> data 14<br> data 15<br> data 16<br> data 17<br> data 18<br> data 19<br> data 20<br> data 21<br> data 22<br> data 23<br> data 24<br> data 25<br> data 26<br> data 27<br> data 28<br> data 29<br> data 30<br> data 31<br> data 32<br> data 33<br> data 34<br> data 35<br> data 36<br> data 37<br> data 38<br> data 39<br> data 40<br> data 41<br> data 42<br> data 43<br> data 44<br> data 45<br> data 46<br> data 47<br> data 48<br> data 49<br> data 50<br> data 51<br> data 52<br> data 53<br> data 54<br> data 55<br> data 56<br> data 57<br> data 58<br> data 59<br> data 60<br> data 61<br> data 62<br> data 63<br> data 64<br> data 65<br> data 66<br> data 67<br> data 68<br> data 69<br> data 70<br> data 71<br> data 72<br> data 73<br> data 74<br> data 75<br> data 76<br> data 77<br> data 78<br> data 79<br> data 80<br> data 81<br> data 82<br> data 83<br> data 84<br> data 85<br> data 86<br> data 87<br> data 88<br> data 89<br> data 90<br> data 91<br> data 92<br> data 93<br> data 94<br> data 95<br> data 96<br> data 97<br> data 98<br> data 99<br> Last line of data
    </details>
</div>

Upvotes: 0

Dmitriy

Reputation: 91

Here is why:

The problem is that there are two block type elements inside <td>. So the second <details> block, which height is set to 100%, will occupy 100% of the <td> height, but there is the first <details> block which takes the overflow height.

Here it is fixed: using flexbox

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        border: 1px dotted blue;
        vertical-align: top;
    }
    .infopanel{
        height: 80vh;
        max-height: 80vh;
        width: 20vw;
        display: flex; 
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start; /*this will keep details at the top*/
        /*justify-content:flex-end;*/ /*this will close details to the bottom*/
    }
    .infopanel>details{
        width:100%;
    }

    .infopanel>.top-detail{
        overflow:visible;
        max-height: 100%;

    }
    .infopanel>.bot-detail{
        overflow:auto;
    }


</style>
</head>
<body>

    <div class="infopanel">
        <details open class="top-detail">
            <summary>Contents here will change in height</summary>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



        </details>

        <details id="FillMe" class="bot-detail" open>
            <summary>   Last element does not show</summary>
                <script>
                    var html = [];
                    for(var i = 0;i < 100; i++) html.push("<br> data "+ i);
                    document.getElementById("FillMe").innerHTML += html.join('');
                </script>
                <br>
                Last line of data

        </details>

    </div>    
</body>
</html>

Upvotes: 1

Gustavo Costa De Oliveira

Reputation: 7494

Specify a height for the first detail element, in this case 76px.

Change height of second details element (fillMe) from 100% to calc(100% - 76px)

For me it worked

Upvotes: 0

HTML - Scroll bar cuts off text

Answers (3)

Related Questions