CODEWITHSUNDEEP
javascripteventsmousemovemousedown
Mikey Muss
Mikey Muss

Reputation: 31

div resizing discrepancy between chrome's viewport & inspector

given the below code:

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
    margin: 0;
    height: 100%;
}
.flX {
    display: flex;
    height: 100%;
}
#wrap {flex-direction: column}
#main {flex-grow: 0}
#preview {
    display: flex;
    flex-grow: 1;
    height: 100%;
    width: calc(100% - 256px);
    background-color: gainsboro;
}
#properties {
    width: 256px;
    background-color: linen;
}
#propDrag {
    width: 8px;
    height: 16px;
    background-color: silver;
    cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap" class="flX">
    <div id="main" class="flX">
        <div id="preview"></div>
        <div id="properties" class="flX">
            <div id="propDrag"></div>
        </div>
    </div>
</div>

<script>
    const qSlc = function(e) {return document.querySelector(e)},
        main = qSlc("#main"),
        properties = qSlc("#properties"),
        propDrag = qSlc("#propDrag");
    let dragProp = false;
    function onMouseMove(e) {
        let w=window.innerWidth,
            x=e.clientX,
            pw=w-x;
        if (dragProp) {
            properties.style.width = pw + 'px'
            console.log(w,x,pw,properties.style.width)
        }
    }
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', () => dragProp = false);
    propDrag.addEventListener('mousedown', () => dragProp = true);
</script>
</body>
</html>

I notice that when I move propDrag there is a difference between the pointer and the element. And it increases as I move left. Also I noticed that there is a discrepancy between properties.width in the chrome>inspector>elements and it's viewport (when I hover over chrome>inspector>elements>properties). I measured with a screen ruler and the width shown below the properties rectangle in the viewport is the correct one. Why is there this dicrepancy and how to solve it?

Upvotes: 0

Views: 21

Answers (1)

Mikey Muss
Mikey Muss

Reputation: 31

I found the reason :) So I added "flex:1" to the css of #preview, and removed: flex-grow & width. I still don't understand why though.

Upvotes: 0

Related Questions