What is the best way to arrange 4 resizable divs in a horizontal layout?

I need to create a search feature with a specific layout:

[Search Input (visible when search icon is clicked)] SearchIcon ClearIcon RefreshIcon

All arranged in a horizontal layout.

I have created a directive (called my-search) to combine the search input and icon, but for some undisclosed reasons, clear and refresh are not included in the directive.

Below is the HTML(template) for the directive with the search text and icon:

<div class="my-search">
    <input class="search"
           type="search"
           placeholder="{{placeholder}}"
           ng-model="model"
           ng-change="onSearchTextChange(model)"
           ng-show="click"               
           ng-init="click=false"
            />
    <div class="circle main-icon" ng-click="click=true">
        <div class="fa fa-search internal-icon"></div>
    </div>

</div> 

Here is the accompanying CSS:

.my-search {
    float: left;
    position: relative;
    box-shadow: none;
    height: 0;
}
.my-search .search{
    float: left;
    display: inline-block;
    width: 25rem;
    height: 3rem;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
    background-color:transparent ;
    font-size: 1.8rem;
    border-radius: 0;
    position: relative;
}

.my-search .circle{
    width: 3rem;
    height: 3rem;
}
.my-search .main-icon{
    float: right;
    position: relative;
    background-color:transparent ;
    border: 2px solid #018BD3;
    padding-top:5px !important;
    left: -34px;
    transition-delay: 0.5s;
}

.my-search .main-icon .internal-icon{
    position: absolute;
    color:#018BD3;
    width: 3rem;
    margin-top: 1px;
    margin-left: 7px ;
}

The search input and icon are correctly aligned, but when I include clear and refresh icons along with the directive, they appear to the right of the text input (instead of next to the search icon) when the input is visible.

This is what I have attempted to achieve a horizontal layout with all four elements:

<div class="container">
    <my-search> model="model" placeholder="placeholder" </my-search>
       <div>
            <div class="fa fa-bell"></div>
       </div>
       <div>
            <div class="fa fa-bars"></div>
       </div>
 </div>

The problem arises when the input is displayed on the left, as both the bell (clear) and bar (refresh) divs are positioned to the right of the input instead of alongside the search icon.

.container{
float: right;
  padding-right: 30px;
}

I suspect the issue lies in the resizing of the search div when the input is shown, causing the floating to adjust accordingly, rather than staying aligned with the search icon. Any suggestions on how I can resolve this?

Answer №1

Your search icon is currently being positioned on the right side due to the following CSS code:

.my-search .main-icon{
    float: right;
...}

To revert the search icon back to its original position, you can either remove the float property or apply float: right to the bell and bars as well.

Answer №2

It seems like your layout is quite unique, and I'm unable to reproduce the issue in the provided code snippet. If possible, could you share a screenshot to help us better understand?

Since css for the additional 2 icons was not provided, I am assuming they are floated to the left.

div {
  padding: 2px;
  border: 1px solid;
}
.div1 {
  float: left;
  width: 100px;
}
.div2 {
  position: absolute;
  width: 39px;
  height: 24px;
}
.div2-wrapper {
  float: right;
  position: relative;
  left: -45px;
}
.wrapper {
  float: left;
}
.div3,
.div4 {
  float: left;
}
.container {
  float: left;
  padding-right: 50px;
}
<br>
<br>
<div class="container">
  <div class="wrapper">
    <div class="div1">div 1</div>
    <div class="div2-wrapper">
      <div class="div2">div 2</div>
    </div>
  </div>
  <div class="div3">div 3</div>
  <div class="div4">div 4</div>
</div>

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

An easy guide to animating multiple sections of progress bars individually in Bootstrap

My Bootstrap code successfully animates a section of progress bars when the user views it. However, it currently animates all progress bars on the page rather than just those in the viewed section. This means that when the user moves to another section, th ...

Is it possible to set spacing between the rows of an HTML table without also setting spacing for the columns?

Is there a way to add spacing between the rows of a table without affecting the columns? ...

How can the issue of the navbar color not being able to disappear or turn transparent be resolved, given its connection to the body color?

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap'); :root { --color-body: #b6cbce; --color-heading: #eef3db; --color-base: #033f47; --color-base2: #022a30; --color-brand ...

_my_custom_styles.scss are being overridden by reboot.scss

Hey there, I'm currently facing an issue where my custom CSS is getting overwritten. Even though I have placed my custom CSS beneath the CDN bootstrap reference, it doesn't seem to resolve the problem. For instance, when attempting to change the ...

Running AngularJS controllers should only occur once the initialization process has been fully completed

I am facing a situation where I need to load some essential global data before any controller is triggered in my AngularJS application. This essentially means resolving dependencies on a global level within AngularJS. As an example, let's consider a ...

Angular JS basic API: Displaying only information that starts with the term 'request'

I've been given the task of developing a straightforward AngularJS API. I have managed to set up the basics for displaying data, but I'm facing an issue where the table only retrieves data from the JSON file if it starts with "request". As a resu ...

Is there a way to confirm that a list within my model contains at least one element?

In my code with Angular 1.6, I have a structure like this: <div class="house" ng-repeat="house in $ctrl.houses" ng-form="houseForm"> <div class="room" ng-repeat="room in house.rooms" ng-form="roomForm"> <div class="item" ng-repeat="it ...

Is it possible to integrate Angular8 components into AngularJS(1.x) by importing them as a node module?

Currently, I am in the process of developing an Angular 8 application. In this app, when a user clicks on a button, they should be redirected to a vendor portal that is hosted on a different web application with a different URL. When the user lands on the ...

Learn the process of importing data into an HTML list using Flask

Looking to transfer data from a Python variable to an HTML list? Here's a snippet of HTML code that you can test out: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Panel</title> & ...

Apply a coating of white paint and add color to the border

I was struggling to create a form that has a white background color and a green border at the same time. I am using Bootstrap and it seems like I cannot apply both styles simultaneously. Here is the link to the form design I am trying to achieve: . Below ...

Generate a Vue component that automatically wraps text dynamically

Challenge I am looking for a way to dynamically wrap selected plain text in a Vue component using the mouseUp event. For instance: <div> Hello World! </div> => <div> <Greeting/> World! </div> Potential Solution Approach ...

For Flexbox front end design, the left side should be contained within a container while the right side should seamlessly stretch across the

https://i.sstatic.net/3RYY6.png I'm facing a challenge in designing a website with a unique layout that has left me puzzled. I've created a codepen example to showcase what I'm trying to achieve. Specifically, I need to implement a Hero Ba ...

Issue with Laravel: CKEditor text not loading HTML tags

Could you assist me with this? click here for the image description image description available here ...

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

I am struggling with ensuring that the content in my wrapper does not get cut off by the "view more" div attached to the bottom. The default wrapper cuts off the children, and even when expanded, the issue persists due to CSS problems. In React, the gener ...

Having trouble with document.getElementById.innerHTML not displaying the correct content?

document.getElementById works in getting the element, but for some reason, the content disappears as soon as it is written in it. There are no errors on the console to indicate what's causing this behavior. I have been unable to identify the reason b ...

The alignment of an image within a bootstrap table cell may not appear centered

I am struggling to center an image in a table cell that is wider than the image itself. I have tried using the text-center and align-middle classes in Bootstrap, but the image remains on the left side of the cell. Since I am new to Bootstrap, I am not fa ...

I must modify the initial statement to appear in bold from the paragraph with the use of JavaScript and CSS

Mr. XYZ and Mrs. ABC are known for their integrity. They own a stylish car. In the next paragraph, I would like to emphasize the first sentence by making it bold, We admire our exceptional leader J.K.L. He shows great potential. In this section, I wan ...

Is it possible to adjust the default zoom level of my website by utilizing HTML or CSS?

After creating my website with a 50% zoom setting, I've encountered an issue where it appears too zoomed in for users whose browser default is set at 100%. How can I fix this problem? I attempted to use *{zoom:50%} in CSS to set the default zoom leve ...

Creating a multi-level mobile navigation menu in WordPress can greatly enhance user experience and make

Hey there, I am currently in the process of developing a custom WordPress theme and working on creating a mobile navigation system. Although I have managed to come up with a solution that I am quite pleased with after multiple attempts, I have encountered ...

Unexpected results from CSS nth-child selector

Creating a dynamic table and updating its cell values accordingly while handling asynchronous returns brings about some challenges. The number of columns can vary, but the rows remain constant within this section of the table (7 rows). When trying to upda ...