struggling to insert submit button within input field in bootstrap 4.3.1

Currently, I am working with Bootstrap 4.3.1 and I have been attempting to place a submit button inside an input field. I have tried various methods from StackOverflow but haven't found a solution yet.

Since my input has the class rounded-pill, it is necessary for me to position the button inside the input field itself.

Does anyone know how to achieve this?

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");
<div class="input-group col-md-4">
  <input type="text" class="form-control rounded-pill" id="x__p__address__x" size="70" style="font-size:small" />
  <span class="input-group-append">
              <button type='submit' class="btn btn-primary rounded-circle">go</button>
            </span>
</div>

htmlcssbootstrap-4

Answer №1

To position the button inside the input field, use absolute positioning and add the z-index property to ensure it stays on top of the input when you focus on it.

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");
body {
  margin: 20px;
}

.input-group {
  position: relative;
}

.form-control {
  padding-right: 47px;
}

.input-group-append {
  position: absolute;
  right: 15px;
  z-index: 10;
}
<div class="input-group col-md-4">
  <input type="text" class="form-control rounded-pill" id="x__p__address__x" size="70" style="font-size:small" />
  <span class="input-group-append">
      <button type='submit' class="btn btn-primary rounded-circle py-1">go</button>
  </span>
</div>

Answer №2

insert this

.input-group-append {
    position: absolute;
    right: 0;
}
.x__p__address__x {
    padding-right: 40px;
}

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

Implementing the Applet Param Tag using JavaScript or jQuery

<applet id="applet" code="myclass.class"> <param name="Access_ID" value="newaccessid"> <param name="App_ID" value="newappid"> <param name="Current_Url" value="newticketurl"> <param name="Bug_ID" value="newbugid"&g ...

javajavascriptjqueryhtmlapplet

Converting a text area into a file and saving it as a draft in the cloud with the

Can content from a text area be converted into a file of any chosen format and saved in the cloud? Additionally, should every modification made in the text area automatically update the corresponding file stored in the cloud? ...

javascriptphphtmljsoncloud

Unable to locate a resolution for the error message "Warning: Task "uglify" not found"

Below is the content of my Gruntfile.js: module.exports = function(grunt) { require('load-grunt-tasks')(grunt); grunt.initConfig({ uglify: { start: { files: { 'js/script.min.js': ['js/script.js&a ...

htmlcssnode.jsnpmgruntjs

I am having trouble viewing an image on my screen

I am trying to add an icon to the left side of my "Skriv ut" text, but unfortunately it is not displaying correctly. This is how I want it to look: https://i.stack.imgur.com/6jcne.png Here is the code snippet I am using: <div class="col-md-4 col-md-o ...

htmlcss

Troubleshooting CSS problems with positioning 3 fluid div elements

I am in need of 3 dynamic div containers. container for main content image display container that changes size container on the side with changing width The issue I am facing is that the text needs to be below the image container which has a wider width ...

htmlcss

Slide-out left menu using HTML and CSS

Currently, I am in the process of constructing a website that requires a menu to gracefully slide from the left side of the screen (with a width of 0px) to the right side (expanding to a width of 250px), all with the help of jQuery animations. Here is wha ...

jqueryhtmlcss

Is your window.location.hash malfunctioning?

I am facing an issue with changing the background color of a <div id="services> when a specific link (index.html#services) is clicked. I have attempted to use the latest jQuery along with the jQuery Color plugin from jQuery Color. The code snippet I ...

javascriptjqueryhtmlxhtml

The checkbox event listener becomes dysfunctional when the innerHTML of its container is modified

My current challenge involves creating checkboxes with a blank line inserted after each one. I also need these checkboxes to trigger a function when changed. This is my code snippet: var div = document.getElementById("test"); var cb1 = document.createEl ...

javascripthtmlcheckbox

Concealing tooltip when button is clicked using jQuery

I am facing an issue where the tooltip does not hide on button click. Below is the code for the button in question: <button class="btn btn-outline-inverse ajax_addtocart additems ...

javascriptjqueryhtml

Tips for converting JSON information on a website and inserting it into a designated division?

I've recently delved into front-end development, searching for solutions and hints without much success. I'm currently in the process of building my first website, specifically a "find recipes" website. Lacking knowledge of API calls, I created a ...

javascriptjqueryhtmljsonajax

When a custom icon is clicked in the vue-select dropdown, the custom method is not activated

In my current project, I am creating a vue-component based on vue-select. Within this component, I have added a custom info Icon. The issue I am facing is that when the user clicks on the Icon, instead of triggering my custom method getInfo, it opens the s ...

javascriptcssvue.jstailwind-cssvue-select

Limit pasted content in an Angular contenteditable div

Is there a way to limit the input in a contenteditable div? I am developing my own WYSIWYG editor and want to prevent users from pasting content from external websites and copying styles. I want to achieve the same effect as if the content was pasted into ...

javascripthtmlangulartypescriptwysiwyg

How can I eliminate a class when the scrollTop() position matches a specific div element?

I am trying to implement a script that will allow me to scroll to my navigation and then change the class of the navigation, however, it is not working as expected. $(window).scroll(function() { if ($(window).scrollTop == $('.menu_nav').offs ...

jquerycss

Is it possible to use jQuery for drag-and-drop functionality?

Currently, I am working on developing a drag-and-drop widget that consists of 3 questions and corresponding answers. The user should only be able to fill in 2 answers in any order, while the third drop area should be disabled. This third drop area can be l ...

javascriptjqueryhtmljquery-ui

Export Image as Json File

I am currently working on creating a browser extension and I am trying to figure out how to save images locally. My plan is to store the images in a json file, but I'm feeling quite lost on how to accomplish this. Below is the code I have so far, alth ...

jqueryjsonhtml

Extracting HTML elements between tags in Node.js is a common task faced

Imagine a scenario where I have a website with the following structured HTML source code: <html> <head> .... <table id="xxx"> <tr> .. </table> I have managed to remove all the HTML tags using a library. Can you suggest w ...

javascripthtmlnode.js

Take off the wrapping from the package

I need help with my code on how to remove the wrapper span tag without removing the text. <ul> <li> <a href="#"> </a> <ul> <li> <a href="#"> ...

jquerycss

place an image next to a div element

Currently, I have a table-like structure with two columns that I am struggling to make mobile responsive. Take a look at the code snippet below: setTimeout(function() { odometer.innerHTML = '1925' }) .fiftyFiftySection { back ...

javascripthtmlcss

My div remains stationary despite keyframes

I've been attempting to create a div that moves up and down using CSS3, but unfortunately it's not working properly. <div class="globo"></div> @-webkit-keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%; } } @-moz-keyframe ...

htmlcsscss-animations

Combining keyframe properties in a more efficient way using less code

While attempting to develop a LESS mixin for CSS3 keyframes, I encountered the typical way of chaining IDs and classes: #idOne, #idTwo, .classOne, .classTwo { ... } Nothing groundbreaking there. What I'm currently working on is crafting the foll ...

cssanimationlesscss-animations