Search code examples
htmlcssoverflowcss-position

Centering absolute child in relation to parent while also hiding vertical overflow but showing horizontal

I have a CSS mockup I am working on but I am having trouble centering the search-bar element in relation to the phone element. Hence it is only centered when the phone element is in the middle of the screen (when the viewport is mobile) but not when it's large.

How can I center the absolute child element (search) in relation to the parent (phone)?

It should look like this regardless of where the parent element is on the screen:

enter image description here

EDIT: If I add the display: relative to the phone element the search-bar cuts off due to the overflow-v: hidden - for some reason overflow-h: visible isn't respected as touched on here: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

.phone {
        display: block;
        height: 649px;
        width: 300px;
        overflow-y: hidden;
        background-color: #ffffff;
        border-radius: 35px;
        box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.20);
        border:10px solid;
        border-color: #ffffff;
    }

    .glogo {
        margin: 15px auto 10px;
        width: 175px;
    }

    .search-bar {
        margin: auto;
        inset: auto 0;


        position: absolute;
        
        background-color:  #ffffff;
        height: 60px;
        width: 425px;
        box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.15);
        border-radius: 6px;

        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
    }

    .search-bar span {
        font-family: Arial, Helvetica, sans-serif;
        color:  #3c4043;
        font-size: 18px;
        margin: auto 65px auto;
    }

    .search {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 15px auto;
        height: 35px;
        width: 35px;
    }

    .search-result-wrapper {
        margin-top: 85px;
    }

    .search-result {
        margin: 0 auto 7px;
        padding: 22px 26px 22px 22px;
        width: 250px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 7%);
    }

    .result-line {
        height: 10px;
        margin: 0 0 10px;
        border-radius: 2px;
    }

    .result-line:nth-child(1) {
        background-color: #000;
        width: 92%;
    }
    .result-line:nth-child(2) {
        background-color: #000;
        width: 75%;
    }

    .result-line:nth-child(n+3) {
        background-color: #000;
    }

    .result-line:nth-child(3) {
        width: 100%;
    }

    .result-line:nth-child(4) {
        width: 95%;
        margin: 0;
    }
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12 py-36">
    <div class="flex flex-wrap lg:items-center min-h-screen">
        <div class="flex flex-col w-full lg:w-1/2 justify-center content-center items-center">
            
            <div class="phone">
                <img src="https://via.placeholder.com/1125x132" class="status-bar">
                <img src="https://via.placeholder.com/175x57" class="glogo">
                <div class="search-bar">
                    <img src="https://via.placeholder.com/24x24" class="search"> <span>lipsum text</span>
                </div>
                <div class="search-result-wrapper">
                    <div class="search-result">
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                    </div>
                    <div class="search-result">
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                    </div>
                    <div class="search-result">
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                    </div>
                    <div class="search-result">
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                    </div>
                </div>
            </div>


        </div>
        <div class="flex flex-wrap w-full lg:w-1/2 justify-center">
            <h3 class="text-3xl">Content here</h3>
    </div>

Solution

  • So here is my solution to you:

    • add position: relative to .phone
    • add left: calc(-25vw + 50px); and right: calc(-25vw + 50px); (tweak as you prefer these values)
    • add padding-top to handle border-radius
    • remove inset and overflow-y: hidden
    • remove height from phone

    Toggle Full Page in the snippet to see result in larger screen

    console.clear()
    .phone {
  display: block;
  width: 300px;
  background-color: #ffffff;
  box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.20);
  border: 10px solid;
  border-color: #ffffff;
  border-radius: 35px;
  padding-top: 10px;
  position: relative;
}

.glogo {
  margin: 15px auto 10px;
  width: 175px;
}

.search-bar {
  margin: auto;
  position: absolute;
  background-color: #ffffff;
  height: 60px;
  width: 425px;
  box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  left: calc(-25vw + 50px);
  right: calc(-25vw + 50px);
}

.search-bar span {
  font-family: Arial, Helvetica, sans-serif;
  color: #3c4043;
  font-size: 18px;
  margin: auto 65px auto;
}

.search {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 15px auto;
  height: 35px;
  width: 35px;
}

.search-result-wrapper {
  margin-top: 85px;
}

.search-result {
  margin: 0 auto 7px;
  padding: 22px 26px 22px 22px;
  width: 250px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 7%);
}

.result-line {
  height: 10px;
  margin: 0 0 10px;
  border-radius: 2px;
}

.result-line:nth-child(1) {
  background-color: #000;
  width: 92%;
}

.result-line:nth-child(2) {
  background-color: #000;
  width: 75%;
}

.result-line:nth-child(n+3) {
  background-color: #000;
}

.result-line:nth-child(3) {
  width: 100%;
}

.result-line:nth-child(4) {
  width: 95%;
  margin: 0;
}
    <script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12 py-36">
  <div class="flex flex-wrap lg:items-center min-h-screen">
    <div class="flex flex-col w-full lg:w-1/2 justify-center content-center items-center">

      <div class="phone">
        <img src="https://via.placeholder.com/1125x132" class="status-bar">
        <img src="https://via.placeholder.com/175x57" class="glogo">
        <div class="search-bar">
          <img src="https://via.placeholder.com/24x24" class="search"> <span>lipsum text</span>
        </div>
        <div class="search-result-wrapper">
          <div class="search-result">
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
          </div>
          <div class="search-result">
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
          </div>
          <div class="search-result">
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
          </div>
          <div class="search-result">
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap w-full lg:w-1/2 justify-center">
      <h3 class="text-3xl">Content here</h3>
    </div>