Tips for resizing and positioning an image within an input field

Is it possible to have a button overlapped on an input field in a responsive website like this: https://i.sstatic.net/tnVmF.png

I tried using an input group addons, but the result is not quite what I expected: https://i.sstatic.net/xpMgr.png

This seems to be due to the size of the image. Is there a way to center the input field within the button and reduce its size to match the desired output shown in the first image?

Here is the code snippet:

<div class="input-group ">
            <span class="input-group-addon">
                <img src="./images/record.png">
            </span>
            <input type="text" size="1" class="form-control" placeholder="REC" />
        </div>
cssbootstrap-4responsive-designhtml5-canvas

Answer №1

To vertically center an image using the position:absolute property, you can use top: 50% and transform: translateY(-50%).

 .input-group-image {
    z-index: 4
}

.input-group-image img {
    position: absolute;
    z-index: 1;
    height: 60px;
    top: 50%; /* moves 50% from top */
    transform: translateY(-50%); /* to vertically center the image */
}

.input-group .input-group-control {
    padding-left: 70px; /* to add space between image and input box  */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="input-group ">
   <span class="input-group-prepend input-group-image">
     <img src="https://i.sstatic.net/3TS5W.png">
   </span>
   <input type="text" size="1" class="form-control input-group-control" placeholder="REC" />
 </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

What is the best way to customize the style of a react.js component upon its creation?

Is there a way to set the style of a react.js component during its creation? Here is a snippet of my code (which I inherited and simplified for clarity) I want to be able to use my LogComponent to display different pages of a Log. However, in certain ins ...

javascriptcssreactjsmaterial-uireact-with-styles

Issues arising from utilizing Twitter Bootstrap 3.1.x, the box-sizing property, and Revolution Slider

I'm currently working on a PyroCMS theme that is built with Twitter Bootstrap 3.1.x and includes Revolution Slider. However, I've encountered an issue where the property box-sizing: border-box; creates an unwanted grey border as shown in the imag ...

javascriptjqueryhtmlcsstwitter-bootstrap

What's the best way to ensure that a select and button have consistent heights in Bootstrap 5?

Can I make a button and select element in the same row with Bootstrap 5 have the same height? https://i.sstatic.net/3S13Q.png <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

csstwitter-bootstrapbootstrap-5

Encountering a jQuery error while trying to utilize the $window.load

I have a code snippet that is functioning well when wrapped within a document ready event: jQuery(document).ready(function($) { $('tr[data-name="background_colour"] input.wp-color-picker').each(function() { //this section works fin ...

javascriptjqueryhtmlcssiframe

Guide on adjusting canvas height to match Full Document height (covering entire page)

Hello everyone, I'm getting in the holiday spirit by adding some snow falling effects using Canvas and it looks pretty awesome. The only issue is that it's filling up the entire screen due to: c.width = innerWidth; c.height = innerHeight; If a ...

jqueryhtmlcsscanvas

Why does my Node.js server-hosted site get downloaded as a file by IE9, Opera, and older versions of Safari?

I'm feeling completely stuck. This whole situation just doesn't make any sense to me. Even though I'm new to HTML5, CSS, and Javascript, I've put together what I think is a decent (albeit unfinished) website design and a simple (also u ...

htmlcssnode.js

Has any of my predecessors been hidden from view?

How can we detect if one of an element's ancestors has the display:none property set without having to traverse up the DOM Tree? ...

csshtmldom

Is there a way to change TTF files into OTF format?

I am looking to utilize the @font-face feature and have my fonts stored in TrueType (TTF) format. Can anyone advise on how to convert TTF to OpenType (OTF) format? ...

cssbrowserfont-face

When I view the website on a tablet in landscape mode, the navigation bar vanishes

I just finished creating a responsive menu for a website. Here's how it works: when viewing the site on a regular browser with a width less than 768px, the navigation menu items are stacked and hidden. To reveal them, the user needs to click on a tog ...

jqueryhtmlcsstwitter-bootstrapresponsive-design

Distinguishing CSS Variances on ASP.Net Site with Android 4+

I am encountering an issue with my current ASP.Net Mobile Website design. It is rendering correctly on android phones pre 4, iPhones, and Blackberries. This problem requires a bit of setup to explain... CSS tr { color: #00ff00; } #MasterBackButton { ...

asp.nethtmlcssandroid-4.0-ice-cream-sandwich

Drawing intersecting lines on a javascript canvas and clearing them using the lineto method

I am working with a canvas where lines are drawn based on mouse movement. I am trying to achieve the effect of the line only lasting for a few seconds before disappearing, similar to swirling a ribbon with a set length. I have been using lineTo to draw the ...

javascripthtmlcanvashtml5-canvas

What is the best way to center a heading element within a section on a webpage?

I need assistance aligning the h1 element with the specific class wish to the center of its section, both horizontally and vertically. Unfortunately, I have been unable to achieve this thus far. Any guidance would be greatly appreciated. Below you will fi ...

javascripthtmlcss

The mdb navigation bar seems to constantly change its height

Having an issue with the height of my mdb navbar in my Angular app. It randomly flips to a larger size when reloading the page, but returns to normal when I open the developer console in Chrome. Two screenshots show the correct display and the incorrect i ...

cssangularmdbootstrap

Troubleshooting a unique CSS bug in jQuery mouseover functionality

Check out this pen: https://codepen.io/anon/pen/eKzEVX?editors=1111 I recently created a Form Select in Laravel: {!! Form::select('status_id', $statuses, $post->status_id, ['class' => 'form-control post-sub-items-label &apo ...

javascriptjqueryhtmlcssmouseover

The pagination feature is not functioning correctly - experiencing issues with will_paginate and bootstrap4

Just starting out with Rails and I've successfully added will_paginate to my project by following the instructions and configuring everything. It's now showing the page numbers, but there seems to be a problem - there is no space between the page ...

ruby-on-railstwitter-bootstrapbootstrap-4will-paginate

Incorporating text into the border without increasing the spacing

I managed to create a unique CSS shape using clip paths as the border of a div. However, I am now facing an issue where I cannot add text to this border without it getting cut off due to the way the shape was created (possibly because of overflow: hidden). ...

htmlcss

Tips for placing a div within a flex item

Struggling to get it right, here's my query: This is how my DOM looks: <div id="content"> <div class="listitem"> <img class="thumbnail"/> <div class="option_icon"></div> ...

htmlcssflexboxcss-position

Conceal an element within the initial row of the table

Below is the table structure: <table id="mytable"> <tr> <td>name</td> <td> <a id="button1" class="button">link</a> </td> </tr> <tr> <td>name2</td> ...

jqueryhtmlcss

Create a full bottom shadow for a circular shape using CSS 3

Hey there, I'm having an issue with creating a separation effect for a circle. I've been using the box-shadow property like this: box-shadow: 0 1px 0 rgba(0,0,0,.2);. However, as you can see in the image, the shadow on the left and right sides is ...

css

How to style text in CSS with a numbered underline beneath

Is there a way to apply underlining to text and include a small number underneath the underline in a similar style shown in this image, by utilizing css, html, or javascript? ...

javascripthtmlcssunderline