Tips for positioning a div next to an input box when it is in focus

I am working on a scenario where I have used CSS to extend the search box when focused. The idea is that when the search box is focused, it should decrease in size and a cancel button should appear next to it.

This is the CSS code I am using:

.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
 }

: content-box;
font-size: 100%;

.clrble .frmcntr:focus {
    width: 70%;
    text-align: left;
    background-color: #fff;
    border-color: #66CC75;
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
    background-color:rgba(247, 247, 247, 1);
    background:url("images/search.png") no-repeat  10px center;
    padding-left:40px;
}

.clrble .frmcntr {
    -webkit-appearance: textfield;
    -webkit-box-sizing

}

For a visual representation, check out my Plunker link here:

https://plnkr.co/edit/Z7mfglWEoDyjbDfFDbLM?p=preview

The expected output should look like this:

https://i.stack.imgur.com/cqfel.png

My question is, can we achieve this functionality with AngularJS or JavaScript?

javascriptangularjscss

Answer №1

To solve this issue, one idea is to position the desired div absolutely. Then, when the input is focused, make the div visible or slide it into view;

To implement this in your project, you can add the following CSS code:

.clrble{
  position: relative;
}
.frmcntr:focus + .btn{
  display: block;
}

.btn{display: none; position: absolute; right: 0;}

Here is an example of how you can structure the HTML:

<div class="clrble">
    <input type="text" placeholder="Search" class="frmcntr">
    <div class="btn">button here</div>               
</div>

This solution may not be flawless, but I believe it will guide you in the right direction.

Answer №2

Utilizing the float property allows you to control the positioning of elements side by side.

To achieve the desired layout, apply float:left; to your textbox class. This will align the textbox as needed, and you can also adjust the placement of the button using CSS.

CSS for the textbox:

.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family: SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color: rgba(247, 247, 247, 1);
float: left;

}

Answer №3

You have the option to toggle the visibility of a span containing the word 'cancel'.

/* Your custom styles should be placed here */

.clrble .frmcntr {
  background: url("images/search.png") no-repeat 110px center;
  text-align: center;
  border-radius: 4px;
  border: medium none;
  cursor: pointer;
  font-size: 20px;
  font-family: SFUIDisplay;
  padding: 6px 10px 6px 10px;
  transition: all 0.5s ease 0s;
  width: 95%;
  background-color: rgba(247, 247, 247, 1);
}

.clrble .frmcntr:focus {
  width: 70%;
  text-align: left;
  background-color: #fff;
  border-color: #66CC75;
  -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  background-color: rgba(247, 247, 247, 1);
  background: url("images/search.png") no-repeat 10px center;
  padding-left: 40px;
}

.clrble .frmcntr {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  font-size: 100%;
}

.clrble {
  position: relative;
}

.frmcntr:focus+.btn {
  display: block;
}

.btn {
  display: none;
  position: absolute;
  right: 0;
}

.cancel {
  visibility: hidden;
  color: blue;
  font-family: sans-serif;
  font-size: 20px;
}

.frmcntr:focus + .cancel {
  visibility: visible;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="clrble">
    <input type="text" placeholder="Search" class="frmcntr">
    <span class="cancel">Cancel</span>
    <span class="btn">button here</span>
  </div>
</body>

</html>

Answer №4

If you want to handle input events effectively, you can utilize the blur event in conjunction with the mousedown event. The mousedown event takes place before the blur event, allowing for seamless interaction.

var mouseDown = false;

$('input').blur(function() {
    if(mouseDown) // prevent the blur event
    {
        $('input').focus();
        mouseDown = false;
    }

});


$('#cancelBtn').mousedown(function(){
  mouseDown = true;
  console.log('Button Clicked');
});

$('input').focus(function(){
  $('#cancelBtn').css('display', 'block');
});

$('input').focusout(function(){
  $('#cancelBtn').css('display', 'none');
});
/* Custom styles */

.clrble .frmcntr {
    background:url("images/search.png") no-repeat 110px center;
    text-align: center;
    border-radius: 4px;
    border: medium none;
    cursor: pointer;
    font-size: 20px;
font-family:SFUIDisplay;
    padding: 6px 10px 6px 10px;
    transition: all 0.5s ease 0s;
    width: 95%;
background-color:rgba(247, 247, 247, 1);
  float:left;
}

.clrble .frmcntr:focus {
    width: 70%;
text-align: left;
    background-color: green;
    border-color: #66CC75;
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat  10px center;
padding-left:40px;
}

.clrble .frmcntr {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-size: 100%;
}

#cancelBtn {
color:blue;
float:left;
font-weight:bold;
display:none;
padding:5px;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
                  <div id="cancelBtn">Cancel</div>           
</div>
  </body>

</html>

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

Invoke a specific URL during an HTML5 upload

So I've got this code that allows for file upload via drag and drop using HTML5 in the browser. $(function(){ var dropbox = $('#dropbox'), message = $('.message', dropbox); dropbox.filedrop({ // Customizing upload settin ...

javascriptphphtmlpost

Having an issue with the pop state function not functioning correctly

I am facing an issue with my images where clicking on a specific image changes the URL to that ID. However, I can only go back once and then the same URL is repeated every time I press the back button. Additionally, the forward button does not work at all. ...

javascriptjquery

Tips for navigating the HTML DOM without using window.scrollBy(x, y) (specifically for scrolling within an element)

Desiring to scroll down along with my selected document, I experimented with the following code. window.scrollTo(x, y); const body = document.getElementsByClassName("body")[0]; body.scrollTo(x, y); However, there are instances where it returns "undefined ...

javascripthtmlcssseleniumdom

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

Upon loading the page, my JavaScript function creates a tree structure from JSON data and generates a list of anchor tags which look like this: <a ng-click="shareParent(4619)">Some data</a> Despite associating the ng-click directive with the ...

javascripthtmlangularjs

What is causing the ajax code to malfunction?

I am new to ASP MVC and trying to create a login form using AJAX. I have written a JsonResult in the controller to check the username and password, but for some reason it is not working. Here is my controller code: public ActionResult login() { ...

javascriptjqueryasp.netajaxasp.net-mvc

Struggling to implement CSS for second div onto selected item in the first div

As a beginner in Angular, I am seeking some guidance and examples. In my code, there are two divs. One is created using ng-repeat with an ng-click function to detect the clicked item. The other div below has CSS properties like style="width:100px; float ...

javascripthtmlangularjscss

Django issue: A Tuple or struct_time argument is necessary

Currently, I am developing a code that deals with 2 variables - showdate and viewtype. Both of these variables are transferred via JavaScript using the POST method. viewtype = send an srt showdate = send a date from javascript Within this code snippet, ...

javascriptpythonjsondjangodjango-views

MUI Autocomplete is failing to update the value when onChange event is triggered

I have successfully fetched autocomplete options from an API and it displays the pre-selected options from the API. However, I am encountering an issue where I am unable to delete or add a value (category) once selected. For an online demo, you can check ...

javascriptreactjsmaterial-uiautocomplete

Is there a way to designate whether the <ul> element is displayed horizontally or vertically?

For example: <ul> <li>a</li> <li>b</li> </ul> The default output is: ab But I am looking for: a b Is there a way to achieve this? ...

htmlcss

Using useCallback with an arrow function as a prop argument

I'm having trouble understanding the code snippet below <Signup onClick={() => {}} /> Upon inspecting the Signup component, I noticed the implementation of useCallback as follows const Signup = ({onClick}) => { const handleClick = us ...

javascriptreactjs

THREE.JS: Organizing Objects into Multiple Groups

Currently, I am in the process of learning THREE.js and attempting to create a playable Rubik's cube. My goal is to rotate a face as a whole instead of manipulating each cube individually. I have tried placing the cubes within a THREE.Group, but the ...

javascriptthree.js3d

Show a message of 'no results found' when implementing a jQuery plugin for filtering items in a list

I recently implemented the 'Filtering Blocks' tutorial from CSS-Tricks to filter items by category on an events website I'm developing. While the filtering functionality works perfectly, I realized that there is no mechanism in place to sho ...

javascriptjquery

Exporting Typescript to Javascript files

I have created a sample TypeScript object with the following code: declare const S3 = "https://s3.amazonaws.com/xxx/icons"; declare const SVG = "svg-file-icons"; declare interface MyIcons { "image/jpeg": string; "image/jpg": string; } export const F ...

javascripttypescriptecmascript-6

Using Vue along with bootstrap-vue: Ensuring only one list element is expanded in a list (v-for) at any given time

In my Vue project with bootstrap-vue, I am utilizing the b-collapse feature within a v-for loop for lists. While it is functioning correctly, I am struggling to automatically close expanded list elements when a new one is clicked. Here is my question: Ho ...

javascriptvue.jsvuejs2bootstrap-vue

uib-tabset directive loading based on a condition

I currently have a uib-tabset that looks like this: <uib-tabset active="activeJustified" justified="true"> <uib-tab index="0" heading="Address" > <by-adr></by-adr> </uib-tab> <uib-tab index="1" heading= ...

angularjs

When looking at react/17.0.1/umd/react.development.js, it becomes evident that ReactDOM is not defined

I'm currently immersing myself in learning React with the help of React Quickly, written by Azat Mardan, which is based on React v15.5.4. The examples provided in the book typically include two essential files: react.js and react-dom.js, such as in th ...

javascriptreactjsreact-dom

Can you please tell me the CSS pseudo element that corresponds to the AM/PM field in an <input type="time">

The issue with the am/pm display is dependent on the browser that the app is opened in. I am looking for a universal solution to ensure it does not appear in any popular browsers. Below is the HTML code for my input time field: <input type="time" for ...

javascripthtmlcss

Image Not Displayed on Page

I am facing an issue where I have a div class 'breadcam_bg' with an image url, but the image is not being displayed on the page even though the console detects the div. html <div class="bradcam_area breadcam_bg"> This div! & ...

htmlcsssass

Avoiding the repetition of CSS animations during Gatsby page hydration

I am facing an issue in Gatsby where I have an element with an initial CSS animation. It works perfectly when the static site loads, but after hydration, it keeps repeating. Is there a way to prevent this from happening? Below is my styled components code ...

javascriptcssgatsbystyled-components

Changing focus to 'DIV' element without JQuery using Javascript and Angular's ng-click event

Instructions for using an Angular directive to set focus on a "DIV" element when clicked <a href="#" class="skipToContent" ng-click="showContent()" title="skip-to-main-content">Skip To Main Content</a> <div class="getFocus" role="button" ...

javascripthtmlangularjssetfocus