Space between flex content and border increases on hover and focus effects

My code can be found at this link: https://jsfiddle.net/walshgiarrusso/dmp4c5f3/5/

Code Snippet in 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 Section

#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;
...

... (The rest of the content remains unchanged)

I encountered some issues while trying to resolve an error in my code which resulted in it being a bit scrambled. My main aim is to achieve seamless hover and focus effects that cover the entire area between the two lower borders.

The anticipated outcome should look like what's described above.

However, despite numerous attempts, I am unable to eliminate the spaces appearing in the fiddle.

Here are the troubleshooting steps I took:

- Adjusting the heights of the elements and linear gradient backgrounds.

- Experimenting with the display property of several elements.

- Tweaking the overflow of the parent div to compress it.

- Exploring pixel-rounded errors as a potential cause for the gaps.

- Since many of my elements scale according to viewport width, the gaps only manifest on specific VW widths, especially on smaller screens.

Answer №1

Get rid of the following:

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

https://i.sstatic.net/43YDb.gif

Furthermore, eliminate this too:

#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;
}

https://i.sstatic.net/q33gZ.gif

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it better to have a single object with all required modules in NodeJS, or follow the "standard" paths in the code?

Being a fan of creating global namespaces in javascript, I often use this approach in my app development. For instance, if my application is named Xyz, I typically create an object called XYZ to organize properties and nested objects like so: XYZ.Resource ...

Angular is unable to eliminate the focus outline from a custom checkbox created with Boostrap

Have you noticed that Angular doesn't blur out the clicked element for some strange reason? Well, I came up with a little 'fix' for it: *:focus { outline: none !important; } It's not a perfect solution because ideally every element sh ...

Learn the best way to populate Google Map popup windows with multiple values and include a button to pass unique ID values

I'm facing an issue with my code. When I click on a marker, it should display "Madivala, 12.914494, 77.560381,car,as12" along with a button to pass ID values. Can someone help me figure out how to move forward? http://jsfiddle.net/cLADs/123/ <ht ...

Adjust the element based on hover over the pseudo element

Looking to modify an element based on the hover state of a pseudo-element. Here's what I've tried so far, but it isn't working as expected: nav .logo { display: none; } nav:before{} nav:hover:before .logo { display: block; } I want th ...

Internet Explorer fails to execute CSS or jQuery commands

Apologies in advance for posing a question that may not be specific or beneficial to the wider community. Currently, my main focus is resolving this issue for my own peace of mind. In the process of designing a website, I implemented a social drawer featu ...

Is there a way to reset useQuery cache from a different component?

I am facing an issue with my parent component attempting to invalidate the query cache of a child component: const Child = () => { const { data } = useQuery('queryKey', () => fetch('something')) return <Text>{data}& ...

Is it possible to update a Rails element using an AJAX request?

I've delved into a plethora of information regarding Rails, AJAX, and 5.1 Unobtrusive Javascript. It provides insight on how to handle AJAX calls in Rails with a .js file, for example. However, my goal isn't to serve up an entire .js file; rathe ...

Having trouble establishing a default route with React Router v5

I am facing an issue with setting the default route to the home page in react router v5. Despite trying several methods, I cannot get it to work as expected. Index.js import React from "react"; import ReactDOM from "react-dom"; import ...

What is the best way to incorporate a Django variable as the width parameter in a style tag within HTML?

I'm attempting to utilize a Django variable as the percentage width value within a style tag in HTML, but it's not functioning correctly. Strangely, I've discovered that using curly braces {} within style tags is prohibited—this contradict ...

Exploring AngularJS and Jasmine: Testing a controller function that interacts with a service via $http

I encountered an issue while testing a controller that relies on a service. The problem arises because the service is currently set to null in order to focus solely on testing the controller. The current test setup is failing due to the BoardService being ...

Creating an HTTP request inside an Export Function in a MEANJS application

Initially, I utilized the Yo MeanJs generator to kickstart my project. As a newcomer in the world of MeanJs, things are starting to look quite complex for me. Currently, my MeanJs application is supposed to retrieve data from an HTTP request but, unfortun ...

Incorporate a JavaScript variable within the src attribute of a script tag

Embedding Google's script allows for displaying a trends Map on our website. <script type="text/javascript" src="//www.google.com.pk/trends/embed.js?hl=en-US&q=iphone&cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=500&a ...

npm causing problems with babel-cli

While working on building a section of my library with Babel, I've encountered some issues when running Babel commands through npm. In my npm script named "build," the following commands are executed: { "prebuild": "rm -rf && mkdir dist", ...

Encountering a node.js issue

Hi there, I keep encountering this error message. Can someone explain what it means? I'm not very skilled in coding, so I would appreciate any assistance :) Best regards logon fail: 65, sessionID: 6343803 events.js:85 throw er; // Unhandled & ...

Expanding the width of horizontal checkboxes to 100% using jQuery Mobile

I'm attempting to expand three horizontal checkboxes across the entire width of the page. <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-s ...

Positioning elements next to each other in jQuery on mouse over - while also addressing scrolling issues in a div

After tinkering with this interesting concept of mouseover combined with absolute positioning divs on a jsFiddle, I encountered some unexpected results. The code was inspired by a stackoverflow thread on positioning one element relative to another using j ...

The ajax request does not support this method (the keydown event is only active during debugging)

I've encountered a strange issue with an AJAX request. The server-side code in app.py: #### app.py from flask import Flask, request, render_template app = Flask(__name__) app.debug = True @app.route("/myajax", methods=['GET', ...

Retrieving the Href attribute from a designated div class with JQuery

I'm currently developing a Google Chrome extension where I need to extract the source code of a webpage using a jQuery get function. Here is how I implemented it: $.get(link,function(data){ // The entire source code of the link will be stored in the ...

Troubles arise when trying to encapsulate a ReactJS embedded application with Material ui, causing issues with the

Currently, I am integrating a ReactJS application using Material UI styled components within a Wordpress page. To achieve this, I am utilizing webpack for transpilation of the JavaScript. After generating the bundle for the embedded version of the applica ...

What is preventing my Express.js from running properly?

My express.js application stops running after reaching this point: node app.js info - socket.io started I'm looking for guidance on why this error occurs and how to resolve it. It seems like the issue lies within my app.js file, which I've inc ...