Пиксельный разрыв между флексическим контентом и границей: hover и: эффекты фокуса - PullRequest
Новая
       0

Пиксельный разрыв между флексическим контентом и границей: hover и: эффекты фокуса

0 голосов
/ 30 марта 2020

Вот мой код: https://jsfiddle.net/walshgiarrusso/dmp4c5f3/5/

HTML

<body onload="resize(); resizeEnd();">
<div style="margin: 0% 13.85%; width 72.3%; border-bottom:1px solid gray;"><spanstyle="visibility:hidden"></span></div>
<div id="sifterWrapper">
        <div id="sortTools">
            <div id="searchBar">
                <input type="text" id="searchBarInput"  onkeyup="searchFunction()" placeholder="Search by Title" /></div>
            <div id="typeSelector">
                <button id="typeSelectorButton" onclick="dropdownFunction()">
                    Select Type ▾
                </button>
            </div>

            <div id="dateSelector">

                <p>From:<span style="width:0.25vw; visibility:hidden;">.</span></p>
                <input type="text" required maxlength="2"  placeholder="Month" class="dateSelectorInput" onclick="fakeFocusWithin()" oninput="resize()"       />
                <p>/</p>
                <input type="text" required maxlength="2"   placeholder="Day" class="dateSelectorInput" onclick="fakeFocusWithin()"    oninput="resize()"         />
                <p>/</p>
                <input type="text" required maxlength="4"   placeholder="Year" class="dateSelectorInput" onclick="fakeFocusWithin()"    oninput="resize()"        />
                <p><span style="width:0.5vw; visibility:hidden;">.</span>To:<span style="width:0.25vw; visibility:hidden;">.</span></p>
                <input type="text" required maxlength="2"  placeholder="Month" class="dateSelectorInput" onclick="fakeFocusWithin()"     oninput="resize()"      />
                <p>/</p>
                <input type="text" required maxlength="2"   placeholder="Day" class="dateSelectorInput" onclick="fakeFocusWithin()"       oninput="resize()"      />
                <p>/</p>
                <input type="text" required maxlength="4"  placeholder="Year" class="dateSelectorInputEnd" onclick="fakeFocusWithin()"     oninput="resizeEnd()"    />
            </div>


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

CSS

    #sifterWrapper {
    /*SETUP*/
    display:flex;
    align-items:center;

    margin: 0% 13.85%;
    width: 72.3%;
    border-bottom: 1px solid gray;
    overflow: hidden;
    /*VISUAL*/
    font-size:1.4vw;
    /*ANIMATION*/
    transition:0.3s;
}
#sifterWrapper div{
    /*SETUP*/
    padding-bottom:.2%;

}
#sortTools {
    /*SETUP*/
    margin: 0 1vw;
    display: flex;
    align-items: baseline;
    width:100%;

    flex-flow: row nowrap;
    justify-content: space-around;
    /*VISUAL*/
    font-family: inherit;
    font-size: inherit;
}

#searchBar {
    /*SETUP*/

    margin: 0;
    height: 3vw;




}

#searchBarInput {
    /*SETUP*/
    height: 3vw;
    padding: 0;
    border: 0;
    outline: 0;
    /*VISUAL*/
    font-family: inherit;
    font-size: inherit;
    background: linear-gradient(to right, #cccccc, #cccccc 33.333333%, #f2f2f2 33.333334%, #f2f2f2 66.66666%, white 66.666667%);
    background-size: 300% 200%;
    background-position: right bottom;
    border-left: 0 solid gray;
    /*ANIMATION*/
    transition: 0.3s;
}
    #searchBarInput:hover {
        /*VISUAL*/
        padding-left:.5vw;
        background-position: 50% bottom;
        border-left: .4vw solid gray;
        margin-right: -.9vw;
    }
    #searchBarInput:focus {
        /*VISUAL*/
        padding-left: .5vw;
        background-position: left bottom;
        border-left: .4vw solid gray;
        margin-right: -.9vw;
    }
#typeSelector {
    /*SETUP*/

    margin: 0;
    padding:0;
    height: 3vw;
    /*VISUAL*/

    font-family: inherit;
    font-size: inherit;
}
#typeSelectorButton {
    /*SETUP*/
    height: 3vw;
    padding: 0;
    border: 0;
    outline: 0;
    /*VISUAL*/
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    background: linear-gradient(to right, #f2f2f2 25%, white 50%);
    background-size: 400% 200%;
    background-position: right bottom;
    border-left: 0 solid gray;
    /*ANIMATION*/
    transition: all 0.3s, width 0.1s;
}
#typeSelectorButton:hover {
    /*VISUAL*/
    padding-left:.5vw;
    background-position: left bottom;
    border-left: .4vw solid gray;
    margin-right: -.9vw;
}
#dateSelector {
    /*SETUP*/
    margin: 0;
    height: 3vw;
    /*VISUAL*/
    font-family: inherit;
    font-size: 0;
    background: linear-gradient(to right, #f2f2f2 25%, white 50%);
    background-size: 400% 200%;
    background-position: right bottom;
    border-left: 0 solid gray;
    background-clip: padding-box;
    overflow:hidden;
    /*ANIMATION*/
    transition: 0.5s;
}
#dateSelector:hover{
    /*SETUP*/
     margin-right: -0.4vw;
     padding-left:0.25vw;
    /*VISUAL*/
    background-position: left bottom;
    border-left: .4vw solid gray;


}
#dateSelectorJS {
    /*SETUP*/
    margin: 0;
    margin-right: -0.4vw;
    padding-left:0.25vw;
    height: 3vw;
    /*VISUAL*/
    font-family: inherit;
    font-size: 0;
    background: linear-gradient(to right, #f2f2f2 25%, white 50%);
    background-size: 400% 200%;

    background-position: left bottom;
    border-left: .4vw solid gray;

    /*ANIMATION*/
    transition: 0.3s;
}
#dateSelector p, #dateSelectorJS p{
    /*SETUP*/
    display:inline;
    padding:0;
    margin:0;
    /*VISUAL*/
    font-family: inherit;
    font-size: 1.4vw;
}



.dateSelectorInput {
    /*SETUP*/
    padding: 0;
    padding-left: -.75vw;
    border: 0;
    outline: 0;
    height: 3vw;
    margin: 0vw -0.3vw;
    /*VISUAL*/
    font-family: inherit;
    font-size: 1.4vw;
    background: linear-gradient(to right, #cccccc 25%, transparent 50%);
    background-size: 400% 200%;
    background-position: right bottom;
    border-left: 0 solid gray;
    /*ANIMATION*/
    transition: all 0.3s, border-width 0s;
}
.dateSelectorInput:focus {
    /*VISUAL*/

    background-position: left bottom;
    border-left: .2vw solid gray;
    margin: 0vw .5vw 0vw .3vw;


}
.dateSelectorInputEnd {
    /*SETUP*/
    padding: 0;
    border: 0;
    outline: 0;
    height: 3vw;
    margin: 0vw -0.3vw;
    /*VISUAL*/
    font-family: inherit;
    font-size: 1.4vw;
    background: linear-gradient(to right, #cccccc 25%, transparent 50%);
    background-size: 400% 100%;
    background-position: right bottom;
    border-left: 0 solid gray;
    /*ANIMATION*/
    transition: 0.3s;
}
.dateSelectorInputEnd:focus{
    /*VISUAL*/
    background-position: left bottom;
    border-left: .2vw solid gray;
    padding-right:0.5vw;
    margin-left:0.5vw;
}

javascript

function fakeFocusWithin() {
            var ds = document.getElementById("dateSelector");
            if (!(ds == null)) {
                ds.id = "dateSelectorJS";
                }


            setInterval(checkActiveObjects, 1000);
            checkActiveObjects();



    }


    function checkActiveObjects() {

        var ds = document.getElementById("dateSelectorJS");


            if (!document.hasFocus()) {
                if (!(ds == null)) {
                ds.id = "dateSelector";
                }

            }


    }




    window.onclick = function (e) {
        if (((!e.target.matches('.dateSelectorInput')) && (!e.target.matches('.dateSelectorInputEnd')))) {


            var ds = document.getElementById("dateSelectorJS");
            if (!(ds == null)) {
                ds.id = "dateSelector";
            }

        var inp = document.getElementsByClassName("dateSelectorInput");
        var i;
            for (i = 0; i < inp.length; i++) {
                if ((inp[i].value.length > 0) && !(inp[i] === document.activeElement)) {

                inp[i].style.width = ( inp[i].value.length + 'ch');


            } 

        }

            var inpe = document.getElementsByClassName("dateSelectorInputEnd");
        var i;
            for (i = 0; i < inpe.length; i++) {
                if ((inpe[i].value.length > 0) && !(inpe[i] === document.activeElement)) {

                inpe[i].style.width = ( inpe[i].value.length + 'ch');


            } 

        }

        }
    }

    function resize() {
        var inp = document.getElementsByClassName("dateSelectorInput");
        var i;
        for (i = 0; i < inp.length; i++) {
            if (inp[i].value.length > 0) {
                inp[i].style.width = (1 + inp[i].value.length + 'ch');
                inp[i].style.paddingRight = "0.30vw";
                inp[i].style.paddingLeft = "0.30vw";
            } else {
                inp[i].style.width = (.75 + inp[i].getAttribute('placeholder').length + 'ch');
                inp[i].style.paddingRight = "0.50vw";
                inp[i].style.paddingLeft = "0.50vw";
            }

        }


    }


    function resizeEnd() {
        var inp = document.getElementsByClassName("dateSelectorInputEnd");
        var i;
        for (i = 0; i < inp.length; i++) {
            if (inp[i].value.length > 0) {
                inp[i].style.width = (1 + inp[i].value.length + 'ch');
                inp[i].style.paddingRight = "0.30vw";
                inp[i].style.paddingLeft = "0.30vw";
            } else {
                inp[i].style.width = (.25 + inp[i].getAttribute('placeholder').length + 'ch');
                inp[i].style.paddingRight = "0.50vw";
                inp[i].style.paddingLeft = "0.50vw";

            }

        }
    }

Извинения, так как многие из них были довольно изуродованы, пытаясь решить эту проблему самостоятельно.

Цель: получить: hover и: focus фоновые эффекты / преобразования для покрытия высоты между двумя нижними границами.

Ожидаемый результат: см. выше.

Фактический результат: после тонны проб и ошибок я не могу избавиться от пробелов, которые появляются в скрипке.

То, что я пробовал:

- с высотой как самих элементов, так и с эффектами линейного градиента.

- с отображением: свойство многих элементов

- с переполнением родительского элемента div и попыткой 'squi sh' его в

- где-то прочитать, что разрывы в пикселях являются результатом ошибки округления пикселей .

- большинство моих элементов масштабируются с шириной области просмотра, поэтому разрыв будет отображаться только на некоторых VW, большинство замечаний Вероятно, на меньших.

1 Ответ

0 голосов
/ 30 марта 2020

Удалить это: 

#sifterWrapper div {
    /* padding-bottom: .2%; */
}

gif

Также это: 

#buttonWrapper {
    display: inline-block;
    margin-left: 13.85%;
    margin-right: 13.85%;
    width: 72.3%;
    /* height: 6.8vw; */
    text-align: center;
    border-bottom: solid 1px gray;
    transition: 0.3s;
}

gap2

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...