Overflowing is caused by excessive padding within the text field container

When trying to apply padding to a text field, I am facing an issue where the right side overlaps with the main content. How can I resolve this?

<div class='container_section'>
  <input type='text' placeholder='name' class='style_input_text'>
</div>

.container_section{
  padding: 20px;
  background: red;
}

.style_input_text {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-style: italic;
  color: #999999 !important;
}

Visit this link for more information.

htmlcss

Answer №1

To reverse the effect of the padding you added, or consider using border-box. The calc function is quite useful and widely supported; make use of it!

.contenedor_section{
  padding: 20px;
  background:red;
}
.estilo_input_text {
    display: block;
    width: calc(100% - 24px);/* compensate for the 12px padding on each side */
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-style: italic;
  color: #999999 !important;
}
  <div class='contenedor_section'>
    <input type='text' placeholder='name' class='estilo_input_text'>
  </div>

Answer №2

For the element with the class .style_input_text, make sure to apply the CSS rule box-sizing: border-box;. By doing this, padding and borders will be included in the width and height calculations.

Click here for a live example on jsFiddle!

Answer №3

Here's a solution for you: simply add width: calc(100% - 24px); to your .estilo_input_text:

.estilo_input_text {
    width: calc(100% - 24px);
}

Check out the live example here: https://jsfiddle.net/dalinhuang/LLyhwr64/

.contenedor_section{
  padding: 20px;
  background:red;
}
.estilo_input_text {
    display: block;
    width: calc(100% - 24px);
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-style: italic;
  color: #999999 !important;
}
  <div class='contenedor_section'>
    <input type='text' placeholder='name' class='estilo_input_text'>
  </div>

Answer №4

box-sizing: border-box; /Included this/

.contenedor_section{
  padding: 20px;
  background:red;
}
.estilo_input_text {
   box-sizing: border-box;/**Included this**/
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-style: italic;
  color: #999999 !important;
 
}
<div class='contenedor_section'>
    <input type='text' placeholder='name' class='estilo_input_text'>
  </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

The SVG image does not display in browsers other than Internet Explorer (IE)

I am encountering an issue with adding a menu toggle image in SVG format to my HTML. Unfortunately, the image is not displaying as expected. Here are screenshots for comparison between Explorer and Chrome: https://i.stack.imgur.com/74sqh.png https://i. ...

javascripthtmlcsssvg

Do I need to utilize a Form element?

<p>text 1<span>additional information 1</span><span>more details</span></p> <p>text 2</p> <a> hyperlink </a> <button>submit</button> <p>yet another paragraph</p> Greeting ...

html

Having trouble showing images in Angular 9?

Currently, I am working on Angular and facing an issue with displaying the avatar of an article that was posted during registration. The image is not appearing correctly. In the HTML code: <ng-container *ngIf="blogpost$ | async as bp; else loading"> ...

htmlangulartypescript

What could be the reason for my AngularJS animation failing to work as expected?

I've been facing an issue with the animations in my Angular app. Whenever an admin deletes a user, the changes are made asynchronously in the database and the corresponding user index is removed from the model $scope.users. Below is the relevant snipp ...

javascriptcssangularjs

"Exploring the New Features of Bootstrap 5: Button Collapse and

I am struggling to get two buttons working with Bootstrap 5. The first button is supposed to trigger two JavaScript functions to open a bootstrap carousel. The second button is a simple collapse button designed to reveal a long text string. Unfortunately, ...

javascripthtmlbootstrap-5

Create an animation where an element glides smoothly over the others, extending to a specific width

How can I make a table of headings stretch to the width of the table and then slide down over the others when one of the headings is clicked? I want the heading to return to its original state when clicked again or when another heading is clicked. Here&ap ...

javascriptjqueryhtmljquery-animate

Issue with HTML CSS: There is a gap between the words "Get" and "started", causing "get" to appear on

Greetings, it appears I am encountering an issue with my website. When I refer to "Get Started," it displays as "GetStarted." However, when I insert a space between "Get" and "started," it separates onto two lines as "Get" on the first line and "started" o ...

htmlcssweb

Showing a confirmation message to the user upon clicking outside of a specific section

On my webpage, I have a section for creating content, as well as a top bar and sidebar with internal links (both controlled by ng controllers). I am looking to implement a confirmation message that will appear if the user tries to leave the page while in t ...

javascriptjqueryhtmlangularjs

AngularJS offers the ability to drag and drop HTML elements with ease

I am currently working on developing a real-time HTML editor using AngularJS. The goal is to allow users to drag and drop DOM elements into a container, which will then render the final HTML page. For example, a user could drag a button labeled "Drag me to ...

javascriptjqueryhtmlangularjs

Stretch out single column content vertically in bootstrap for a uniform look

I've been struggling to make multiple buttons vertically stretch to fit the container, but I can't seem to remember how I achieved this in the past. I have experimented with various options outlined on https://getbootstrap.com/docs/4.0/utilities/ ...

javascripthtmlbootstrap-4

Sending form input values to JavaScript

Struggling to design a webpage featuring one text box and a button that, when clicked, sends the value to Javascript for further processing? After spending significant time troubleshooting, I'm unsure of what's causing the issue. Below are both t ...

javascripthtml

I am struggling to retrieve the value of my angular variable

I am working on an ajax request that builds an angular repeater, and I have an event html: <md-button ng-if="item[2].enderecoGlgMaps !== null" class="md-icon-button" ng-click="GeraMapa('{{item[2].nomeSlug}}');" aria-label="Localizacao-Butto ...

javascripthtmlangularjs

What is the best way to alter the font size in an SVG?

I have incorporated an SVG icon into my website and obtained the following code from Adobe Illustrator: <svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9, ...

htmlcsssvgicons

Spring load without CSS

Upon successful login, I am redirected to my main site using the following controller: //Login Success @GetMapping("/login-success") public ModelAndView loginSuccess() { return new ModelAndView("/cont/home.html"); } The URL for this redirection i ...

javahtmlcssspring

Ebook document featuring a dual-column layout

Seeking recommendations for EPUB files that contain two columns. I'm struggling to implement two columns in my CSS file. ...

htmlcssepubibooks

The drop-down menu malfunctions when the overflow: hidden property is added

Here is how my current dropdown menu looks like: https://i.sstatic.net/evv1I.png The "Home" option is not positioned correctly at the top left as I would prefer. How can I adjust this? Thank you for any assistance. * { margin: 0; padding: 0; } nav ...

htmlcssbootstrap-4

Support the Cause with Paypal Contributions on Angular/Bootstrap Website!

I'm currently in the process of developing a website using Angular and Bootstrap for a non-profit organization that will facilitate donations through Paypal. On the platform, users will have the option to select their donation frequency (Weekly, Mont ...

htmlangularjspaypal

Menu bar link is unresponsive despite being active

I'm struggling to add "a:hover" to my home button in the menu bar and can't seem to remove the text-decoration. When I attempted to use media queries, things got confusing for me. **To post a question on Stack Overflow, it seems that I need to p ...

htmlcssmedia-queries

Adding CSS styles to a React JS application

I am encountering an issue with importing a .css stylesheet in a basic react app. I have the following components: AvatarHeader.js: import styles from './AvatarHeader.css'; export default function AvatarHeader({ style, children }) { return ( ...

javascriptcssreactjs

Divs functioning properly on Internet Explorer, but experiencing issues on Chrome

It seems that the styling of my website in Google Chrome is not displaying as expected (link). However, it works fine on Internet Explorer 8. Here is the CSS style sheet: @charset "utf-8"; /* Stylesheet for Northview Game Tickets */ #mainwrapper { w ...

htmlcssinternet-explorergoogle-chromedoctype