Activate search bar expansion when search input is in focus

I'm currently focusing on the frontend development of an app where search functionality is paramount for user interaction. In light of this, I am considering placing the search feature at the bottom of the screen so that it can be easily accessed with just a thumb swipe.

The UI design I have envisioned is visually appealing and meets all my requirements; however, I'm facing a challenge in translating this design into reality using HTML and CSS. Below is a snapshot of how the design looks:

https://i.sstatic.net/aWmj9.png

My goal is to expand the search box located at the bottom of the page when the input field is focused, causing it to take up the entire screen while smoothly moving other elements to the top in an animated manner. How can I achieve this effect using HTML and CSS?

I've created a CodePen showcasing the initial state of the project and a partial implementation of the desired second state. Here's the code snippet:

HTML

<div class="search">
  <h1 class="search__heading">Search</h1>
  <input type="text" placeholder="type name" class="search__input" />
  <ul class="search_recents">
    <li class="search_recent-item">
      <img class="search_recent-image" src="https://placehold.it/60x60" alt="person image" />
    </li>

    <li class="search_recent-item">
      <img class="search_recent-image" src="https://placehold.it/60x60" alt="person image" />
    </li>
  </ul>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  border: none;
}

ul,ol {
  list-style: none;
}

html,body {
  height: 100%;
}

body {
  background: #5B5847;
}

.search {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #7B796B;
  padding: 1.25em;
  margin: 0 1.25em 1.25em 1.25em;
  border-radius: 10px;

  &:focus-within {
   position: static;
   margin: 0;
   border-radius: 0;
   height: 100%;
  }
}

.search__heading {
  font-size: 1.5rem;
  margin: 0 0 1em 0;
  font-family: arial, sans-serif;
}

.search__input {
  width: 100%;
  padding: 1.25em;
  border-radius: 10px;
  font-size: 1rem;
  margin: 0 0 1em 0;
}

.search_recents {
  display: flex;  
}

.search_recent-item {
  margin: 0 1em 0 0;
}

.search_recent-image {
  border-radius: 50%;
}

Is there a way to toggle the visibility of the arrow icon?

htmlcssanimation

Answer №1

If you're looking for a way to create an animation, consider implementing it as shown below. To achieve a smooth animation effect, setting a fixed height could be beneficial (although this may not align with your specific requirements).

 .search {
  position: fixed;
  height: 225px;
  width: calc(100vw - 2.5em);
  bottom: 1.25rem;
  left: 0;
  right: 0;
  background: #7B796B;
  padding: 1.25em;
  margin: 0 auto;
  border-radius: 10px;
  transition: all linear 0.2s;

  &:focus-within {
    height: 100vh;
    width: 100vw;
    bottom: 0;
    border-radius: 0;
  }
}

Answer №2

To make this happen, consider initiating the expansion by hovering over the immediate parent element .search. This won't compromise usability as the cursor remains on the element while the user types. If you favor this method, feel free to adjust the transition according to your preferences.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  border: none;
}

ul,ol {
  list-style: none;
}

html,body {
  height: 100%;
}

body {
  background: #5B5847;
}

.search {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #7B796B;
  padding: 1.25em;
  margin: 0 1.25em 1.25em 1.25em;
  border-radius: 10px;
  transition: all .8s;

  &:focus-within {
   position: static;
   margin: 0;
   border-radius: 0;
   height: 100%;
  }
}

.search__heading {
  font-size: 1.5rem;
  margin: 0 0 1em 0;
  font-family: arial, sans-serif;
}

.search__input {
  width: 100%;
  padding: 1.25em;
  border-radius: 10px;
  font-size: 1rem;
  margin: 0 0 1em 0;
}

.search_recents {
  display: flex;  
}

.search_recent-item {
  margin: 0 1em 0 0;
}

.search_recent-image {
  border-radius: 50%;
}

/* my Code starts here */

.search:hover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -20px;
    border-radius: 0;
    transition: all .8s;
    position: fixed;
}
<div class="search">
  <h1 class="search__heading">Search</h1>
  <input type="text" placeholder="type name" class="search__input" />
  <ul class="search_recents">
    <li class="search_recent-item">
      <img class="search_recent-image" src="https://placehold.it/60x60" alt="person image" />
    </li>

    <li class="search_recent-item">
      <img class="search_recent-image" src="https://placehold.it/60x60" alt="person image" />
    </li>
  </ul>
</div>

*However, there is a downside to this approach. You may encounter difficulties managing the size of the parent element to prevent accidental triggers. Nonetheless, it can be overcome with some effort.

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

Exploring external URLs beyond your Django website

Imagine you have a Django site with numerous buttons and links that all lead to . Instead of manually typing out the URL each time like this: <a href="http://stackoverflow.com" target="_blank" rel="noopener"> Is there a way to simplify this proces ...

pythonhtmlcssdjangodjango-templates

Is there a way to have these slides repeat automatically?

After spend some time working on this, I've hit a roadblock. I managed to create a div slider with navigation arrows where each slide has a minimum width of 80px. The code functions correctly, except that when I reach the last item and try to naviga ...

javascripthtmlcss

Modifying Div Size with Jquery

I am working on populating the div container with square boxes, but I'm having trouble adjusting the size of my #gridSquare div. Despite trying to change its height and width using jQuery, it doesn't seem to work as expected. $('#gridSquare ...

javascriptjqueryhtmlcss

Can someone explain why line-height can affect the width in CSS?

Can you explain how the line-height property functions in CSS? I have noticed that when I set the line-height to be equal or less than the font size, it causes layout width issues. You can view an example of this problem on a jsFiddle here. Currently, my ...

css

Whenever I select a different option such as "desi food", it automatically activates my order button

When I click on any other button like Desi Food, Fast Food, or Drinks, my order button is clicked automatically. I don't know if the buttons are overlapping each other or what the problem is. I am a beginner at this. <form method="post" action="o ...

phphtmlbutton

Syntax error when inserting PHP code snippet into HTML

Seeking some assistance with a PHP/HTML page I'm working on. The code is throwing a syntax error when it reaches the final tag, and I can't figure out what is causing it. Any help would be greatly appreciated! Here is the snippet of my code: < ...

phphtml

Affix Object to Bottom of Stationary Element

I have a header element that I want to remain fixed while scrolling. The scrollable area should be positioned directly after the fixed header, without using position: absolute and removing it from the document flow. To better illustrate the issue, I' ...

htmlcssflexbox

Effortlessly Transition to Full Screen with Div Expansion on Click

I'm currently working on creating a smooth transition for a div to expand fullscreen when clicked. My goal is to achieve a similar effect as the case studies on this website: Although my code can make the div go fullscreen, there's an issue with ...

javascriptjquerycsscss-animations

Issue with initial loading of Nextjs Material UI CSS causing display problems

Utilizing Next.js in conjunction with Material UI, the Material UI CSS does not load correctly upon initial page load, resulting in a display error similar to this image: https://i.sstatic.net/7wpxM.png The correct styling is achieved after a page transit ...

cssreactjsmaterial-uinext.js

Buffering ceases on the video

I am experiencing an issue with 4 videos and a preloader, which should hide once all the videos are fully buffered. <div id="preload"> <h1> Download... </h1> </div> <video preload="auto" class= ...

javascripthtmlhtml5-videobuffering

Looking to change the background color when a table row is selected

Task : Implement a highlighted background color for selected table rows using CSS or other methods Current Table HTML : <table id="ember11999" class="ember-view content-table focus-group ovalview object-table container-view highlighted"> <tbod ...

cssuitableviewcolors

When I apply position: absolute; to my navigation bar, the anchor tags and links do not seem to function properly, especially with a video playing in the background

How can I make my anchor tags/links work properly on a header with a video in the "background" and a menu on top? HTML <nav class="menu"> <a href="#" target="_blank">ABOUT</a> <a href="#" target="_blank">PRICES</a&g ...

htmlcssvideoanchornav

Switching Atom's Markdown preview theme

I'm exploring ways to customize the theme of the Markdown preview in Atom through cascading stylesheet (CSS) files. Currently, I have the markdown-preview-plus package installed. ...

cssmarkdownatom-editor

Utilizing PowerShell to send messages to numerous recipients

Below is the script I use to send emails from a PowerShell script: $smtpServer = "mail.company.com" $smtpFrom = "Check <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adcec5c8cec6edcec2c0ddccc3d483cec2c0">[email pro ...

htmlpowershell

Hide the cursor when the text box is in focus

Is there a way to remove the cursor from a textbox when it is clicked on? I want the cursor to disappear after clicking on the textbox. jQuery(document).ready(function($) { $(function(){ $('#edit-field-date-value-value-datepicker-popup-0&ap ...

jqueryhtml

Shopify revamping the design of the collections

Looking to enhance the layout of a collection page by moving from a single column to having at least three items per row. The current layout can be viewed here Proposed new layout example shown here 1: Below is a snippet of the code I believe needs adj ...

htmlcssshopify

Can we reduce the number of classes and pseudo classes sharing the same style?

How can I condense the following CSS into a more concise LESS code? .push-nav > .active > a, .push-nav > .active > a:hover, .push-nav > .active > a:focus { background:#000; color: #fff; } Here is my attempt: .push-nav > .act ...

cssless

Error: The variable "oppstart" has not been declared

How can I define the function oppstart? Could it be the reason why the calculator isn't working? When I click calculate, no result is displayed even though the rest of the code seems to be functioning correctly. <!DOCTYPE html> <html> &l ...

javascripthtml

What are the steps for enlarging the display containing components with the 'position: absolute' style?

How can I magnify the screen with the following code? .drawing-board { width: 25%; height: 25%; background-color: black; position: relative; /* transform: scale(2, 2); */ } .drawing-board .box-1 { width: 20px; height: 20px; background-c ...

javascripthtmlcss

Using setTime in JavaScript allows for customizing and adjusting the

I'm having trouble getting this code to display the time. I thought it would work, but it's not showing the time. Can someone please help me figure out what's going wrong? function startTime() { var currentTime = new Date(); ...

javascripthtml