The input field is stretching beyond its intended length

My issue arises from having a div containing a listbox (select), textbox (input text), and button (input submit) inside it, with width:250px set for the entire div and width:100% for each element within. Logically, this should fill the space inside the div. However, the textbox ends up longer than the other elements.

Any suggestions on why this is happening and how to resolve it?

Demo: http://jsfiddle.net/xXVHu/15/

Update: I appreciate the duplicate flag, but where is the explanation for why the input text is wider than the input submit?

It's important to note that this needs to be compatible with IE8, for reasons I can't disclose.

All the divs in my code hold specific significance, so even if they may seem unnecessary, they serve a purpose!

htmlasp.netcssinputtextbox

Answer №1

you could include the following code snippet to your CSS:

box-sizing:border-box;

and apply it to #button, #text. This adjustment should resolve any display issues you may be experiencing.

#button, #text
{
    display:inline-block;   
    width: 100%; 
    box-sizing:border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
}

For a live example, you can view the working code on jsFiddle: http://jsfiddle.net/xXVHu/20/

Answer №2

Consider implementing box-sizing in your CSS. This attribute ensures that borders and padding are included in the calculation of an element's size. http://css-tricks.com/box-sizing/

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

Issue arises after injecting HTML element into the DOM due to memory constraints and display inconsistencies

Upon executing the following script in Firefox... var d = $("<div class='test'></div>"); d.hide(); $("body").prepend(d); d.show(); ...and examining the HTML, the inserted element will have the style attribute: style="display: blo ...

javascriptjquerycssdom

Retrieving the value of a <select> element using React.useState in a Nextjs environment

Encountering an issue in Nextjs involving the useState function from React. There is a select element with multiple options. Upon selection, the useState should store the value of the selected option. const [value, setValue] = useState('') ... ...

javascripthtmlreactjsnext.js

Angular Flot Chart Resizing: A Guide to Dynamic Chart S

I have successfully integrated a Flot chart into my HTML using an Angular directive. Here is how it looks: <flot id="placeholder" dataset="dataset" options="options" height="300px" width="100%" style="width:100%;" ng-disabled="graphLoading" ng-class="{ ...

javascriptangularjshtmlangularjs-directive

Is there a way to make the product list view in Magento much more compact and smaller in size?

My issue is pretty straightforward. I find Magento's product display in list view to be too large for my liking. The images are bigger than necessary and each product takes up too much space. I want to resize the listing so that each product only occu ...

htmlcssmagento

The FileReader.result is found to be null

Currently, I am in the process of setting up a page that allows users to upload a txt file (specifically a log file generated by another program) and then modify the text as needed. Initially, my goal is to simply console.log the text, but eventually, I pl ...

javascripthtmlfile

Storing dynamic content on a server and retrieving it for future use

I'm working on a webpage that allows users to create elements dynamically and I want to save those elements to the server. When someone else visits the page, I want them to see those saved elements as well. I'm not too familiar with web programm ...

javascriptjqueryhtmlajaxjson

My div won't stay fixed in the layout no matter what I try

Being fairly new to css, divs, and everything in between, I decided to create a simple layout for my band without unnecessary links like bio or merch store. Instead, I wanted separate spaces for our video, music player, and a Facebook window. I successful ...

csslayouthtml

How do I prevent my image slider from scrolling to the top of the page when I click next or prev?

<script> export default { name: "ImageSlider", data() { return { images: [ "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg", "https://cdn.pixabay.com/photo/2016/02/17/2 ...

javascripthtmlvue.js

Struggling to understand the relationship between SetInterval and closures

Is there a way to continuously update the contents of a div using setInterval I found inspiration from this question on Stack Overflow: How to repeatedly update the contents of a <div> by only using JavaScript? However, I have a couple of questions ...

javascripthtmlclosuressetinterval

Having trouble uploading files to varbinary(max) in SQL Server - Successful on one server but failing on the other

For the past two years, the code I've been using to upload file attachments into a varbinary(max) column in SQL Server from a web browser has worked flawlessly. However, out of nowhere, it has stopped working on the production database server while st ...

c#asp.netsql-server

What is the best way to center-align my list within the designated area?

I need help centering a two column list on my webpage. It's currently justified to the left. How can I adjust it? To see what I'm working with, check out my jsfiddle: http://jsfiddle.net/huskydawgs/c2yqmfzt/5/ <p> A banana is an edible fr ...

htmlcss

Guide on registering/loading a CSS style file in a WordPress child theme

I have a problem with the code I'm using as it's not updating the appearance of the login page... function custom_login_stylesheet() { wp_register_style('custom-login', get_template_directory_uri().'/css/login-style.css' ...

phpcsswordpress

CSS directives are not compatible with Internet Explorer 8

I implemented a registration form with CSS rules that highlight error fields with a red border when users submit incorrect or empty data. However, this functionality is not working in Internet Explorer. The red border appears correctly in Firefox and Safar ...

cssinternet-explorerfirefox

Sub-menu disappears upon resizing the screen

Currently, I am working on creating a unique responsive navigation system that transforms into a 100% width pulldown menu for mobile devices. To achieve this functionality, I have implemented some JavaScript code that hides any open sub-menu items when the ...

javascriptjqueryhtmlcssresponsive-design

Background positioning in IE8 does not display as intended

I'm experiencing an issue with the image background not displaying in IE8. You can view the page here, and the arrows on the accordion are not visible. Here is the CSS: .closed h2.accordion_h3 { background: url(mysource_files/down.png) no-rep ...

cssinternet-explorerbackgroundinternet-explorer-8

What crucial element am I overlooking in the React Transition Group Component while implementing it for a carousel design?

I'm trying to add a feature to my Carousel where the opacity changes between images. When clicking on the icons, the images should transition smoothly. I've been using React Transition Group, but for some reason, it's not working as expected ...

javascriptcssreactjsreact-transition-group

Initialization of the database upon system startup

My current goal is to set up the database during the initial startup to ensure that the necessary database tables for identity.net are created. This will allow FluentMigrator to execute smoothly without encountering errors about missing tables. Up to this ...

c#asp.net.netidentity

Effortless pagination across various pages, utilizing diverse CSS selectors

I've integrated simple pagination into my website, but I've encountered a issue. My navigation consists of CSS tabs, each holding a unique pagination component. Here is the jQuery pagination code snippet: $(function(){ var perPage = 8; var open ...

javascriptjqueryhtmlcsspagination

Hide only the table that is being clicked on, not all tables

Essentially, I am using document.querySelectorAll() to retrieve an array of div elements. In my function, handleClick(), each time the button is clicked, I want to hide the table associated with that specific button. This is the current situation: https:/ ...

javascriptcssreactjsecmascript-6react-hooks

The alignment of the label on the Watu Quiz does not match with the Radio Button

I've encountered an issue with a Watu quiz I created where the labels are not aligning with the radio buttons. Any suggestions on how to style this and fix the alignment? You can view the page here. Here is a screenshot for reference: https://i.sst ...

htmlcssradio-button