Prevent the input from escaping the container

I am facing an issue with my form where I want the input field to expand only up to the end of the container div, but it seems to extend beyond due to the length of the pre-input text.

.container {
  width: 70%;
}
.input-field {
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
  background: #fff;
  position: relative;
  vertical-align: middle;
  width: 100%;
  min-width: 16px;
  border: 1px solid #ddd;
}
.input-field .addon {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  background: #f0f0f0;
}
.input-field input {
  padding-left: 5px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  resize: none;
  width: auto; /* set width to 'auto' */
}
.input-field:hover {
  border: 1px solid #05c9f0;
}
<div class="container">
  <div class="input-field">
    <span class="addon">some preinput</span>
    <input id="" type="text" name="" value="test text" />
  </div>
</div>

For another example, please check out this link.

If you test the provided code, you will notice that you can click on the input box even outside the desired boundary. Any suggestions for a solution?

htmlcss

Answer №1

Consider utilizing the flexbox format.

.container {
  width: 300px;
}
.input-field {
  background: #fff;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
}
.input-field .addon {
  padding: 2px 8px;
  text-shadow: 0 1px 0 #fff;
  background: #f0f0f0;
}
.input-field input {
  padding: 0 4px;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  resize: none;
  flex: 1;
}
.input-field:hover {
  border: 1px solid #05c9f0;
}
<div class="container">
  <div class="input-field">
    <span class="addon">some preinput</span>
    <input id="" type="text" name="" value="test text" />
  </div>
</div>
<img src="//dummyimage.com/300x50">

Answer №2

To fix the issue, simply reduce the input width from 100% to a slightly lower value like 99.7%. Here's how you can do it:

.container {
  width: 70%;
  border: 1px solid red;
}
.input-field {
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
background: #fff;
position: relative;
vertical-align: middle;
width: 99.7%;  
min-width: 16px;
border: 1px solid #ddd;
}
.input-field .addon {
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
  padding-left: 5px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  resize: none;
  width: 100%;
}
.input-field:hover {border: 1px solid #05c9f0;}
<div class="container">
  <div class="input-field">
    <span class="addon">some preinput</span>
    <input id="" type="text" name="" value="test text" />
  </div>
</div>

Answer №3

To determine the width, try using this method: width: calc(100% - 125px); instead of specifying it as 100%

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 compress @font-face using gzip?

Could you demonstrate how to gzip a webfont kit? The code provided by the generator is as follows...what modifications are necessary? @font-face { font-family: 'DesigersBold'; src: url('desib__-webfont.eot'); src: url(&apos ...

cssgzipfont-face

When using Angular, automatically shift focus to the next input field by pressing the

I am faced with a challenge involving multiple editable inputs on my screen. Alongside these editable inputs, there are buttons and disabled inputs present. The current behavior is such that when I press Tab, the focus shifts to the HTML elements between ...

javascripthtmlangularangular-material

Adding an image to a jQuery class name on the fly

I am attempting to add an image before a div by using its className with jQuery. function insertImage(obj) { var dynamicClass = $(obj).prop("className"); After retrieving the classname, I now encapsulate it in single quotes and add a dot to access t ...

javascriptjqueryhtml

Incorporating a hyperlink within a list item for an image

Currently, I am attempting to create a clickable image within an unordered list. Although the paragraph is clickable, unfortunately, the image itself is not responding as expected. <ul> <a href="/movies/test/"><li> ...

htmlcss

Drop and drag to complete the missing pieces

Here is a drag and drop fill in the blanks code I created. The challenge I'm facing is that I want users to be able to correct their mistakes by moving words to the right place after receiving points. <!DOCTYPE HTML> <html> <head&g ...

javascripthtmldrag-and-drophtml5-draggable

Displaying the servlet response within an iframe

This is the content of Content.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l ...

javascripthtmljspservletsweb-applications

Is there a way to eliminate the space between the content inside a table cell and its borders?

I am struggling with a table setup that includes three columns and multiple rows. The first column contains an image, causing the cells in that row to resize based on the image size. When text is added to the 2nd and 3rd columns, it automatically centers w ...

htmlcss

The Bootstrap form fails to function properly on mobile devices

On my Bootstrap form, everything works fine when entering data on the desktop version. However, I am facing an issue with the mobile version where I cannot input any information into the fields. The fields are unresponsive and not allowing me to enter an ...

htmlformstwitter-bootstrap

What is the best way to create a more effective xpath expression?

My HTML code resembles the following: <tr> <td> <span> <span class = "x28w"></span> </span> <td> <span> <a> <span>3899393</span> </a> < ...

htmlseleniumxpath

What is the best way to activate materialise pop-up menus in a React application?

Looking to enhance my React app by adding a NavBar with dropdown functionality. Here's the code snippet: <ul id="dropdown1" className="dropdown-content"> <li><NavLink to="/create">Create lesson ...

cssreactjsexpressmaterializemern

Implementing the <bgsound> element in HTML

Can you explain the purpose of the <bgsound> element in HTML? ...

html

Implemented sub navigation within off canvas navigation, allowing sub menu headers and menus to remain visible even when the main menu is closed

I've been working on customizing an existing off-canvas design and I've run into a roadblock. I added submenus, but they're displaying even when the menu is closed. I suspect it's a positioning problem, but despite spending several days ...

htmlcsscss-position

Javascript Challenges in Wordpress

Looking to create an element on a Wordpress site where content starts partway down the screen and then sticks to the top while scrolling. I've tried different approaches without success. My latest attempt involves using Javascript to add and remove a ...

javascriptjquerycsswordpress

Create a JavaScript function that generates and prints a JSON object based on user input values

I am seeking a solution that does not rely on jQuery, but rather pure JavaScript. Most of the examples I have come across involve the use of jQuery. Within my HTML file (index.html) I have the following structure: <form id="1"> <input type="tex ...

javascripthtmlarraysjsondynamic

CSS: Stretch the text background to match the width of the container

Is there a way to make the background color of a text cell stretch the width of its container div, rather than just the text itself? https://i.sstatic.net/E3zeL.png Here's the HTML code snippet: <div class='col-md-4'> <span class= ...

htmlcss

The CSS filter "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80)" is not functioning properly in Firefox

Trying to apply a filter effect using CSS but encountering issues in Firefox: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80 ) opacity: 0.5; -moz-opacity: 0.5; Any s ...

cssfirefox

Tips for activating and setting up Bootstrap popovers

I've been trying to add some popovers to my webpage, but I'm facing a hurdle. I added a few button popovers in the footer, but nothing happens when they're clicked. I created a js file for initialization and imported it at the end of my pa ...

javascripthtmlbootstrap-5bootstrap-popover

What is the best way to eliminate spaces when moving to a new line in HTML?

How can I eliminate the gap between the first and second images in HTML when changing lines? <div> <img src='http://lorempixel.com/100/100/abstract/1' /> <img src='http://lorempixel.com/100/100/abstract/2' />< ...

html

Upon submitting, retrieve the input values, evaluate the condition, and perform the necessary calculation

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> </head> <body> <form> <p>query 1</p> <p> <input type="rad ...

javascriptjqueryhtml

What sets apart custom events from postMessage?

If you want to send a message to another document, such as an iframe, there are two functions you can use - postMessage and createEvent. Consider the following: var event = document.createEvent('CustomEvent'); event.initCustomEvent("message", tr ...

javascripthtmlpostmessagecustom-events