React Input increases the total width by 22 pixels

My React input has a CSS setting of 'width: 300px'. However, when displayed on the screen, the width appears to be '322px'. Below is the CSS code for the input:

input {
  width: 300px;
  padding: 15px 10px;
  border: 1px #818181 solid;
  border-radius: 12px;
  box-shadow: 0px 0px 3px #818181;
}

Here is how the input appears on the screen:

https://i.sstatic.net/nUzuT.png

The 'Submit' button displays correctly with a width of '300px', but the input field seems to extend beyond that. Upon inspection in Chrome, it shows the width set at '300px', yet hovering over the input reveals an actual width of '322px'.

How can I ensure that the input maintains a consistent width of 300px?

cssreactjs

Answer №1

The issue with the input's width was caused by the padding extending beyond the designated area. To fix this problem, I included the following line in the input's CSS:

box-sizing: border-box;

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

Tips for removing a checkbox and customizing a label's style when the label wraps around the checkbox input

Hello, I'm an advanced beginner so I appreciate your patience:) I've had success removing checkboxes and styling their labels when the for="" attribute is present. However, I'm facing a challenge with a form where the labels wrap the input ...

javascriptjqueryhtmlcsscheckbox

Pictures will only appear on the screen after a one second delay before triggering a state change

Could someone help me with a problem I'm facing? I am trying to load images asynchronously and render them, but there seems to be a delay in setting the state for rendering. When I set a 100ms delay, it works fine for a small number of images, but whe ...

reactjsreduxreact-redux

Cube area to be filled

I am struggling to fill a cube with colors as it is only getting half of the figure filled. I suspect there might be an issue with the cubeIndices, but I'm having trouble figuring out how to make it fill everything. While I know I could use a cylinder ...

javascriptcssthree.js

Error occurs with Cross-Origin Resource Sharing (CORS) when attempting to set

Example with ReactJS import axios from 'axios'; import {useEffect, useState} from 'react'; import ReactDOM from "react-dom/client"; import React from "react"; const App = () => { const [res, setRes] = useStat ...

node.jsreactjs

Top-notch java tool for caching and minifying dojo, jquery JavaScript, and CSS files

In our project, we have downloaded the Dojo and jQuery libraries from Google CDNs. I am currently seeking a Java tool that can both cache and minify these libraries. The caching process should take place within the ROOT project of Tomcat. While I am awar ...

javajavascriptcsscachingminify

Older versions of Android, specifically Android 7 or lower, seem to encounter issues with Apis in React Native when utilizing axios. Fortunately, this problem doesn

For fetching the data, I utilized the 'axios' library. Surprisingly, it works flawlessly on newer Android devices (specifically Android 9 and 10). However, when it comes to older devices like Android 7 or earlier, a persistent Network Error occur ...

javascriptandroidreactjsreact-nativeaxios

Is it possible to dispatch an async action when a route changes in React Router and Redux?

I am working on a universal react app with redux and react-router integration. My app has multiple routes such as: /2016 /2015 /2014 /2013 and so on. Each route requires fetching data from an API. Currently, I am using <Link> elements in the Navi ...

javascriptreactjsreact-routerredux

"Identifying elements in CSS that do not have any adjacent text elements

I need help identifying a CSS selector that can differentiate between the <var> tags in these two distinct situations: <p><var>Foo</var></p> And <p>Some text <var>Foo</var> and more text</p> Specifi ...

csscss-selectors

Steps for transforming draft.js output into standard html using the draft-js-html tool

I have a requirement to enable users to edit text in six different fields by adding bold, italic, underline, and images. The data needs to be stored as plain HTML in the database and retrieved in the same format. I am currently using react-draft-wysiwyg fo ...

reactjsdraftjsreact-draft-wysiwyg

Mixin for conditional input styles in Sass

I am interested in developing a conditional sass class that can be customized based on an argument provided. I am unsure about the terminology for this feature. For instance: <img class="width-200" .../> I would like to create a sass mixin that tak ...

csssass

What is the best way to ensure that the draggable element remains visible on top of all other elements on the screen while being dragged?

Currently, I am working on implementing the drag and drop feature in SAPUI5 Table and Tree Table. In my project, there is a table containing names that need to be draggable, and a Tree Table where these names should be droppable. To achieve this function ...

jquerycssjquery-uisapui5

What's the best way to ensure that your item list automatically updates the rendered list when an item is deleted

I've developed a web cart using Redux. The cart functions as expected, except for one issue - when I delete an item from the cart, the changes are only displayed after refreshing or navigating to another page. How can I update the view dynamically as ...

javascripthtmlreactjsredux

navigate to a different page upon submitting a form in React

I currently have this code snippet in my contact.js file: axios .post('http://localhost:3000/create', book) .then(() => console.log('Created')) .then(() => this.props.history.push({Home})) .catch(err => ...

node.jsreactjsaxios

Issue encountered while integrating NextAuth credentials using a specific custom login process and backend configuration

I recently integrated NextAuth into my NextJS(GraphQL) app and encountered the following error: Unhandled Runtime Error TypeError: Cannot use 'in' operator to search for 'credentials' in null Additionally, I received network errors ind ...

reactjsauthenticationnext.jsnext-auth

Learn the process of filtering an array using another array

I have a collection of items set up in the following format. items = [ { id: 1, status : "Active" // Other fields tags : [{val: 'IGM', color: 'light-success' }, {val: 'Gated Out', colo ...

javascriptreactjsarrays

Customizing Bullet Points in CSS Styling

In an attempt to replicate a specific style in my <ul>, I have utilized the CSS property list-style-image. However, I am facing difficulties aligning the text after the image. How can I achieve this desired alignment? You can view the current output ...

htmlcsstwitter-bootstrapbootstrap-4sass

I attempted to implement dialog functionality using material-ui code from the documentation, but for some reason it's not functioning correctly. Can anyone point out what I might

I tried implementing a material-ui dialog feature for React, but I'm facing issues with it. When clicking on the contact button, the handleClickOpen method is not being triggered at all. The contact button is supposed to open the dialog box, and all ...

javascriptreactjsdialogmaterial-ui

Customizing the Paper Component Theme in Material-UI React

My React app is designed using the latest Material-UI component library. Throughout my application, I make use of multiple instances of the Paper component. Instead of manually adding margins and padding to each instance separately, I want to apply these s ...

reactjsmaterial-ui

My custom Material UI table is being hindered by unnecessary div tags that are interfering with my CSS styling

View the generated code The rendered table demonstrates that when scrolling past the maximum width, the data does not appear <div> <table (not going to display all the markup for this. this table contains the headers of each column and appear ...

htmlcssreactjsmaterial-ui

Unable to modify the name of an element's class due to restrictions in JavaScript

I am trying to switch the class of an element from score -box1 to score -box1.-active. I defined a constant $target in order to access the class score -box1, however it is not functioning as expected. const $target = document.getElementByClassname('sc ...

javascriptreactjsclasstoggle