CODEWITHSUNDEEP
htmlcss
ethereal1m
ethereal1m

Reputation: 301

Flexbox with Picture and Overlapping Object

I try to put an image and overlapping objects side by side. And then when device width is smaller enough, it puts the image on top of overlapping objects. In this case the overlapping objects are search input (with completion capability that we don't want to discuss here).

So far I got this my jsfiddle link

my css code:

#banner-wrapper {
    order: 1;
     height: 70.7833px;
     width:40px;
     margin-left: 5%;
}
img {
    width: 40%;
}

@media all and (min-width: 360px) {
    #banner-wrapper {
        flex: 2 1 auto;
    }
    #peoplefind-sidebar {
        flex: 2 1 auto;
    }
}

@media all and (min-width: 360px) {
    #banner-wrapper, #banner-wrapper>* {
        order: 1;
    }
    #peoplefind-sidebar,#peoplefind-sidebar > *,.people-search   {
        order: 2;
    }
}

#header-wrapper {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    display: -webkit-flex;
    position: relative;
    z-index: 0;
}

#peoplefind-sidebar {
    display: -webkit-flex;
    display: flex;
}

.people-search {
    top: 50%;
    height: 35%;
    width: 22% !important;
    border: 1px solid #666;
    border-radius: 3px;
    padding: 3px;
    position: absolute;
}

#peoplefind-input {
        background: transparent;
        z-index: 1;
}

#peoplefind-input-x {
        color: #CCC; background: transparent; 
}

#side-peoplefind-submit {
    position: absolute; 
    top: 50%;
    height: 30%;
    left: 80%;
}

its html counterpart: 

<div id="header-wrapper">
    <div id="banner-wrapper">
        <img class="nav-logo-image" id="logo-img" src="http://images.freeimages.com/images/previews/ba3/sunflowers-3-1393952.jpg" alt="logo">
    </div>
    <div id="peoplefind-sidebar">
        <form id="peoplefind-form" action="peoplefind/profile" method="post">
            <input autocomplete="off" id="peoplefind-input" class="people-search" placeholder="Find contacts, item_id, and word search here" name="people_search"  type="text">
            <input id="peoplefind-input-x" class="people-search" name="people_search" disabled="disabled"  type="text">
            <button id="side-peoplefind-submit" type="submit">Find</button>
        </form>
    </div>
</div>

This one still doesn't work. As we decrease the size of the window to small size, it doesn't put the image on the top of the overlapping object.

Any ideas?

Upvotes: 0

Views: 2196

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371251

There is a lot going on in your code, and I'm not entirely clear what you're trying to accomplish, but based on your question and comments it seems you're trying to resolve two issues:

  1. Make the #peoplefind-sidebar container wrap under the #banner-wrapper on smaller screens.

    With a few adjustments to your CSS the containers will stack vertically on smaller screens. Demo: http://jsfiddle.net/cwurw36v/3/

  2. Make #peoplefind-input overlay #peoplefind-input-x on smaller screens.

    You want an input to perfectly overlap another input. There are a lot of unknown variables for this request, like when and where do you want them to overlap. Below I've listed several posts with generic solutions.

UPDATE (based on comments)

I try to put an image and overlapping objects side by side. And then when device width is smaller enough, it puts the image on top of overlapping objects.

Okay, I think this does it: http://jsfiddle.net/cwurw36v/4/

Upvotes: 1

Related Questions