The value of the HTML input control vanishes once padding is added

I am in need of some assistance with CSS in formatting the text box for BID VALUE (input element) (See in Image 1) Image 1 https://i.sstatic.net/4fQk8.jpg The product link can be found here

When I try to widen the text box using padding, the text value inside the box disappears (seems to get hidden), and I cannot figure out what I am doing wrong.

To help illustrate my issue, I have created duplicates labeled Number 1 & 2, both with the same ID and other properties BUT

BID VALUE Number 1 has the following custom CSS:

input[name="bid_value"]
{
  width:auto;
  padding: 4px 120px 5px 31px;
  margin: 2px 11px;
  box-sizing: border-box;
  text-align: left;
}

BID VALUE Number 2 does not have any custom CSS by default. It does not display the current BID VALUES clearly (all value figures), which is why I want it to be a little larger. However, when I try to do so (like in BID VALUE 1), the value disappears. Any advice on where I might be going wrong?

I would like my BID VALUE text box to look like this format shown in Image 2 https://i.sstatic.net/ScdvN.jpg The link to this format can be found here

Looking forward to your suggestions on what may be causing the issue.

htmlcsswordpress

Answer №1

For those who are adamant about utilizing width: auto, it is advisable to include !important in order to override any preexisting CSS properties (such as width: 4em; within the styling for 

#products .quantity .quantity-box
). Failure to do so may result in the padding encompassing the entire input field.

Answer №2

If the padding on the left and right sides (width) is too wide, it may cause the text to not be visible.

const $ = document.querySelector.bind(document);
let pwid = 10;
$('button').addEventListener('click', () => {
  pwid = pwid += 20;
  $('input').style.paddingLeft = `${pwid}px`;
  $('input').style.paddingRight = `${pwid}px`;
  $('aside').innerHTML = `Control Width: 130px<br>L/R Padding: ${pwid}px`;
});
input{width:130px;padding:10px;box-sizing:border-box;margin-bottom:20px;}
button{padding:7px 10px;background:#ccc;border:1px solid #ccccccCC;border-radius:4px;cursor:pointer;}
<input type="text" value="Merry Christmas" />
<div><button>Add 20px to Padding Width</button></div>
<aside></aside>

Solution: To improve visibility, adjust the font size instead of the padding. If the input field does not expand with the text, consider changing the width and/or max-width values to "auto" or "unset".

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

Effort to update Div element with Ajax fails to function

Looking for some assistance here. I'm attempting to update a database's entries using Ajax after submitting a form. The entries are displayed within a div. I've tried the following code to refresh only that specific div, but it doesn't ...

javascriptphpjqueryhtmlajax

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

Is there a way to hide rows in these tables by clicking on the table head? I'm currently using bootstrap 5 so JQuery is not an option. <table class="table table-info table-bordered"> <thead id="tablea"> ...

javascriptcssdom-eventsbootstrap-5

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

Seeking assistance in creating a crossfading image gallery using jQuery and the .animate() function. I'm struggling to solve the issue of smooth fadeIn for the next image while maintaining compatibility with IE8. https://jsfiddle.net/Vimpil/fqhc1e9m/ ...

javascriptjqueryhtmljquery-animatecross-fade

Transferring the chosen dropdown value to the following page

I am attempting to transfer the currently selected value from a dropdown to the next page using an HTTP request, so that the selected value is included in the URL of the subsequent page. The form dropdown element appears as follows: <form name="sortby ...

javascriptphpjqueryhtml

Is it possible for individuals on the local network to view the webpage?

Recently, I developed a login page in HTML that prompts users for their username and password. The information is then sent to ABC.php, and upon successful authentication, they are redirected to another website. To make this work, I set up a xampp server. ...

phphtmlwebserver

Encountered an error when attempting to submit with Node.js and Express.js connected to MySql - "Cannot POST /login

I am currently working on creating a basic login page using node.js with the express.js and mysql packages. The goal is to redirect users to the layout.html page if their username and password exist in the mysql database. For this project, I have set up a ...

javascripthtmlmysqlnode.jsexpress

How come only the individual top, bottom, left and right paddings function correctly while the combined padding does not respond?

Seeking to customize a button using SCSS file that is connected to HTML. This button is part of a flex layout design. The element's size is set at 83.333×16px. The box-sizing property is defined as: box-sizing: border-box; Adding padding with s ...

htmlcsssasspadding

PHP A more organized method for passing button values when the value is specifically 0

Hey there, I've come across a situation where I had to make some tweaks to my code to get it working. I'm curious if there is a cleaner solution out there that I might be missing, or if my workaround is actually the best approach for solving this ...

phphtmlbutton

Utilize LESS Bootstrap as a guide for incorporating content

I have been struggling to properly integrate Bootstrap into my LESS file. Currently, I am adding Bootstrap to my project using NPM. If I simply use the following import statement in my LESS file: @import (reference) 'node_modules/bootstrap/less/boot ...

csstwitter-bootstrapless

When clicking on Wordpress pagination links, they change to an "active" state without redirecting the page

I have spent a lot of time searching for solutions to pagination issues, but I haven't found a fix for the specific problem I'm facing. While pagination seems to be working correctly in terms of generating links and pages, the navigation links d ...

javascripthtmlwordpresspagination

Adjusting text size in iOS7 when converting HTML to NSAttributedString

My UITextView is currently handling an NSAttributedString that was initially entered using the keyboard. I save this attributed string as HTML, and it looks fine. However, when I load it again and convert it back to an attributed string from the HTML, the ...

htmlfontsios7nsattributedstring

Is there a way to position my input at the bottom of its parent element?

Is there a way to position this input element at the bottom and center of its parent div? https://i.sstatic.net/gs1yP.jpg ...

csshtml

Breakpoint for mobile menu in FoundationCSS

When the browser is resized, the mobile menu appears at 568x320, which is the default breakpoint. https://i.sstatic.net/ZSbiq.jpg I would like to create a breakpoint around 900px to address the issue with the menu being too large as shown in the image be ...

jquerycssjquery-mobilezurb-foundation

Styling CSS Based on Input from Child Siblings

Is it possible to customize an adjacent element based on a valid input from a child element? Let's say we have the following HTML structure: <div id="source"> <input type="text"> </div> <div id="target"> </div> Below ...

htmlcsssassless

Determine the variance among time stamps

After creating a registration page, I implemented functionality where when a user clicks the submit button, an activation link is sent to their email and a timestamp is stored in the database. To ensure security, I need to verify if the activation link was ...

phphtmldatabasecodeignitertimestamp

CSS/Bootstrap : troubleshooting overflow problem

Experiencing a problem with the popover control due to a display issue. The overflow property had to be set to 'visible' in order to prevent it from being hidden behind the table. overflow:visible; For a repro, please see jsfiddle: http://js ...

csstwitter-bootstrap-3

Create copies of Div elements for them to revert back to their original state following

It seems like a simple task, but I'm struggling to figure out how to do it. On a single page, I have multiple divs: <div id="playerid-1"><a href="javascript:loadplayer(1);">[LOAD PLAYER]</a></div> <div id="playerid-2">& ...

jqueryhtmlajaxclonereset

Angular 14: Exploring the left datepicker panel navigation in PrimeNG

In my situation, I am trying to adjust the position of the date-picker in relation to a panel displayed within a <p-calendar> element. Due to a splitter on the right side, I need to shift the date-picker towards the left. Here is the HTML code: < ...

cssangulardatepickercalendarprimeng

Guide to showing a form following a button click in Angular 9

I am trying to create a feature on my page where when I click a button, a form will appear directly below it. Additionally, I would like the number of forms displayed to match the number of times the button is clicked. Being a newcomer to Angular 9, I am ...

htmlangularangularjs-directive

Encountering a NaN result while attempting to incorporate a drop-down menu into a newly developed macro calculator

Before the calculator was functioning smoothly, but as soon as I included the activity level selection from the dropdown menu, things took a turn. The expected output is supposed to be the result of multiplying the user's chosen activity level by the ...

javascripthtmldrop-down-menu