/    Sign up×
Community /Pin to ProfileBookmark

I can’t use a number input

I have a number input on a website I was making. It was working completely fine until I changed something (I don’t know what) and now It won’t let me edit it. It’s inside a container, the HTML is below

` <div class=”container” id = “cont1”>
<h1 class=”money”>$</h1><input type=”number” value=”1000″ id=”pricerange”>
</div>`

The CSS for the container is:

`.container{
background-color: var(–bg);
width: 300px;
height: 300px;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
position: absolute;
display: flex;
align-items: center;
justify-content: space-around;
padding: 30px 20px;
border-radius: 50px;
outline: 3px white solid;
}`

Hope someone could help.

Thanks

to post a comment
CSSHTMLJavaScript

19 Comments(s)

Copy linkTweet thisAlerts:
@NogDogAug 12.2022 — I tried just that bit of mark-up in codepen and it seemed fine:

But the problem could be elsewhere -- maybe try running the entire HTML through the w3c validator: https://validator.w3.org/#validate_by_input
Copy linkTweet thisAlerts:
@cootheadAug 12.2022 — Hi there ProductionNerd,

does this help...

[b]HTML[/b]
<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;

&lt;title&gt;Untitled document&lt;/title&gt;

&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
&lt;label&gt;
$&lt;input type="number" value="1000" id="pricerange"&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;


[b]CSS[/b]

<i>
</i>html,body {
height: 100%;
margin: 0;
}
body {
background-color: #000;
font: normal 1em / 1.5em sans-serif;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.container label{
padding: 1.3em 0.83em;
border: 0.13em solid #fff;
border-radius: 2em;
font-size: 1.5em;
font-weight: bold;
color: #fff;
background-color: #b30000;/*var(--bg);*/
}
.container input {
margin-left: 0.6em;
}


[i]coothead[/i]
Copy linkTweet thisAlerts:
@ProductionNerdauthorAug 12.2022 — @coothead#1645869 Hm, doesn't seem to work, I do have JQuery installed, and that might have something to do with it
Copy linkTweet thisAlerts:
@SempervivumAug 12.2022 — @ProductionNerd#1645863

Your HTML and CSS seem to be fine, I suspect that the error is located elsewhere. Maybe another element is covering the input? Can you post the URL of the site in question?
Copy linkTweet thisAlerts:
@ProductionNerdauthorAug 12.2022 — @coothead#1645869 I figured it out, It has something to do with the container when I bring the top to 50% to try and align it in the center
Copy linkTweet thisAlerts:
@ProductionNerdauthorAug 12.2022 — @Sempervivum#1645875 It's not on a website, I'm coding it in VS code
Copy linkTweet thisAlerts:
@SempervivumAug 12.2022 — > I figured it out

Does this mean that the issue is fixed?
Copy linkTweet thisAlerts:
@ProductionNerdauthorAug 12.2022 — @Sempervivum#1645878 No I still don't know how to fix it
Copy linkTweet thisAlerts:
@SempervivumAug 12.2022 — If the number of lines is not too much, please post the complete HTML and CSS.
Copy linkTweet thisAlerts:
@ProductionNerdauthorAug 12.2022 — @Sempervivum#1645880 It won't let me reply with the code, not sure if it's too much
Copy linkTweet thisAlerts:
@ProductionNerdauthorAug 12.2022 — @Sempervivum#1645880 Here I uploaded it to a github repository: https://github.com/productionnerd/Mywebsite-stuff

When you try it the input will work, but I want to align the container in the center with it working.

Also I'm relatively new to coding so things like my JS is a little messy.
Copy linkTweet thisAlerts:
@SempervivumAug 12.2022 — Just as I suspected: The div#project5 is covering the input.

Quick fix:

Apply the CSS `pointer-events: none;` to that div, it will make it transparent for mouse and keyboard actions.

But note: You are using a lot of absolute positioning in your layout and it turns out that this is the reason for trouble very often. I highly recommend to change the CSS completely and go without abs. pos.

Make a rough drawing of the layout you intend to achieve and a description and post it, so that we can help you to develop a proper CSS.
Copy linkTweet thisAlerts:
@ProductionNerdauthorAug 12.2022 — @Sempervivum#1645883 I'll do that. I have to go somewhere, So I'll get it back to you. Which div is covering it? Is it process5?

But thank you so much
Copy linkTweet thisAlerts:
@ProductionNerdauthorAug 13.2022 — @Sempervivum#1645883 Ok So the thing I'm building is sort of like a form. Here would be page 1:

https://ibb.co/qMtr9Cx![https://ibb.co/qMtr9Cx](https://https://ibb.co/qMtr9Cx)

and page 3 but I haven't designed page 2 yet: ![https://ibb.co/dW1Qz7Z](https:// https://ibb.co/dW1Qz7Z)

Desc The top nav would be about 50vw and show about 6 (probably would change) Then there would be a question which you can see the div .ask and on pg 1 there would be a container in the center of the page I haven't styled it in the upload but I can still later. Then there is a $ text in the middle (y-based) and there is a number input in the center complete. This is not in the upload, but there would be an error message that pops up that you can see in the code at div #error1. Then There is a next button at the bottom of the screen.

I wrote some very messy Js code that does some validation, it fades out the elements on page one, and then the function fadein2 fades in the elements on page 3 (it says 2 in the code) On page 2 there would be the same nav, question styling just a different question and the same next btn. There is a form box that you can choose between 2 options in the leftClick and rightClick functions and when you do, a text appears in the product container if you select option 2 a dropdown should appear with a button next to it.

I haven't written this part yet but the code would take products from intel.com (I'm not sure how to do that yet) and it would display them as sort of a list with an img, a name and a select btn but I can figure that out on my own.

I know it's a lot and you don't have to help, but thank you for helping so far.
Copy linkTweet thisAlerts:
@SempervivumAug 13.2022 — @ProductionNerd#1645902

You tried to arrange your items correctly by using a lot of absolute positioning and transforming. This is not necessary, it's the browsers job to position the elements according to the layout you intend to achieve.

Make yourself familiar with flex layout:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

it will enable you to define how the elements should be positioned.

I applied the recommendations above to your CSS:
``<i>
</i> :root {
--bg: rgb(58, 58, 58);
--main-solid: rgb(0, 170, 255);
--dark-solid: rgb(0, 117, 175);
font-family: 'Poppins';
margin: 0;
padding: 0;
}

* {
padding: 0;
margin: 0;
}

html,
body {
width: 100%;
height: 100%;
}

body {
/* background-image: url('PaperCutContour.gif'); */
background-color: lightgray;
display: flex;
flex-direction: column;
align-items: center;
}

.form-box {
opacity: 0%;
}

.button-box {
width: 247.5px;
height: 55px;
margin: 35px auto;
border-radius: 30px;
background: var(--bg);
border: 4px white solid;
opacity: 0%;
}

.toggle-btn {
padding: 10px 40px;
height: 72.7272727%;
cursor: pointer;
background: transparent;
border: 0;
border: none;
text-align: center;
font-family: 'Poppins', sans-serif;
margin-left: 7.5px;
color: white;
opacity: 0%;
}

#btn {
width: 110px;
height: 72.7272727%;
background: var(--main-solid);
border-radius: 30px;
transition: .5s;
top: 12.5%;
margin-left: 7.5px;
opacity: 0%;
}

.Ask {
color: white;
background: var(--main-solid);
padding: 10px 40px;
border-radius: 40px;
border: white solid 4px;
text-align: center;
font-size: 30px;
}

nav.navbar {
display: flex;
justify-content: center;
}

.line {
background-color: white;
width: 100%;
height: 4px;
top: 1.25%;
z-index: 1;
}

.circle {
background-color: rgb(58, 58, 58);
border: 4px solid white;
width: 30px;
height: 30px;
border-radius: 19px;
margin: 0 10px;
}

.circle1 {
background-color: rgb(58, 58, 58);
border: 4px white solid;
width: 30px;
height: 30px;
border-radius: 15px;
}

#circ1 {
background-color: rgb(58, 58, 58);
opacity: 100%;
}

.container {}

.contcont {
display: flex;
}

#next {
width: 150px;
height: 35px;
background-color: var(--main-solid);
border: none;
border-radius: 80px;
left: 21vw;
border: 3px white solid;
cursor: pointer;
transition: .5s;
font-family: 'Poppins';
color: white;
font-size: 15px;
}

#next:hover {
background-color: var(--dark-solid);
}

.loading {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}

#line {
height: 4px;
border-radius: 20px;
background: var(--main-solid);
width: 0%;
z-index: 2;
}

@keyframes loading {
0% {
width: 0%;
}

100% {
width: 19.1%;
}
}

.money {
color: white;
font-family: 'Poppins';
}

#error {
color: red;
font-family: 'Poppins';
font-size: 13px;
font-weight: bold;
background-color: white;
text-align: center;
padding: 10px;
border-radius: 40px;
z-index: 3;
display: none;
}

@keyframes error {
0% {
border: solid 3px var(--main-solid);
}

50% {
border: solid 3px red;
}

100% {
border: solid 3px var(--main-solid);
}
}

@keyframes error2 {
0% {
opacity: 0%;
}

100% {
opacity: 100%;
}
}

@keyframes fadeout {
0% {
opacity: 100%;
}

100% {
opacity: 0%;
}
}

#trierror {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid white;
display: none;
}

.productContainer {
background-color: var(--bg);
width: 600px;
height: 400px;
display: flex;
align-items: center;
justify-content: space-around;
padding: 30px 20px;
border-radius: 50px;
border: 3px white solid;
opacity: 0%;
z-index: 8;
overflow-y: scroll;
overflow-x: hidden;
}

.Processtext {
color: white;
font-size: 20px;
}

::-webkit-scrollbar {
width: .5em;
}

::-webkit-scrollbar-track {
background: transparent;
border-radius: 100vw;
margin-block: 2em;
}

::-webkit-scrollbar-thumb {
background: var(--main-solid);
border-radius: 100vw;
}

.typeofIntel {
color: white;
font-size: 20px;
}

.select1 {
padding: 8px 24px;
color: white;
background-color: var(--bg);
border: 3px solid var(--main-solid);
border-radius: 100vw;
border: none;
cursor: pointer;
font-size: 15px;
font-weight: bold;
}

#search {
width: 100px;
height: 35px;
background-color: var(--bg);
border: none;
border-radius: 80px;
border: 3px var(--main-solid) solid;
cursor: pointer;
transition: .5s;
font-family: 'Poppins';
color: white;
font-size: 15px;
}

#search:hover {
background-color: #434343;
}

.form1 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}<i>
</i>
``
Copy linkTweet thisAlerts:
@SempervivumAug 13.2022 — HTML in body:
``<i>
</i> &lt;nav class="navbar"&gt;
&lt;div id="circ1" class="circle"&gt;&lt;/div&gt;
&lt;div id="circ2" class="circle"&gt;&lt;/div&gt;
&lt;div id="circ3" class="circle"&gt;&lt;/div&gt;
&lt;div id="circ4" class="circle"&gt;&lt;/div&gt;
&lt;div id="circ5" class="circle"&gt;&lt;/div&gt;
&lt;div class="circle1"&gt;&lt;/div&gt;
&lt;!-- &lt;div class="line"&gt;&lt;/div&gt;
&lt;div class="loading"&gt;
&lt;div id="line"&gt;
&lt;/div&gt;
&lt;/div&gt; --&gt;
&lt;/nav&gt;
&lt;div class="form form1"&gt;
&lt;div id="ask1" class="Ask"&gt;What Is Your Budget?&lt;/div&gt;
&lt;div class="container" id="cont1"&gt;
&lt;input type="number" value="1000" id="pricerange"&gt;
&lt;span class="money"&gt;$&lt;/span&gt;
&lt;/div&gt;
&lt;div id="error1"&gt;
&lt;h1 id="error"&gt;Value Must Be Between $500 And $5000&lt;/h1&gt;
&lt;div id="trierror"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- &lt;div class="form form2"&gt;
&lt;label class="Ask" style="opacity: 0%" id="ask2"&gt;Which CPU Company Do You Prefer?&lt;/label&gt;
&lt;div class="form-box" id="process1"&gt;
&lt;button type="radio" class="toggle-btn" onclick="leftClick()" id="process3"&gt;AMD&lt;/button&gt;
&lt;button type="radio" class="toggle-btn" onclick="rightClick()" id="process4"&gt;Intel&lt;/button&gt;
&lt;/div&gt;
&lt;div class="productContainer" id="process5"&gt;
&lt;div class="Processtext" id="AMD"&gt;AMD&lt;/div&gt;
&lt;div class="Processtext" id="Intel"&gt;Intel&lt;/div&gt;
&lt;div id="inteltype"&gt;
&lt;div class="selecttype"&gt;
&lt;select id="select1" class="select1"&gt;
&lt;option disable selected&gt;Core i3&lt;/option&gt;
&lt;option value="corei5"&gt;Core i5&lt;/option&gt;
&lt;option value="corei7"&gt;Core i7&lt;/option&gt;
&lt;option value="corei9"&gt;Core 19&lt;/option&gt;
&lt;option value="Xeon"&gt;Xeon&lt;/option&gt;
&lt;/select&gt;
&lt;button id="search" onclick="f1()"&gt;Search&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;--&gt;
&lt;button id="next" onclick="ani()"&gt;Next&lt;/button&gt;<i>
</i>
``

Not sure if this is exactly what you intend to achieve but should be fine to start with. Try to understand it by reading the article on css-tricks.
Copy linkTweet thisAlerts:
@ProductionNerdauthorAug 13.2022 — @Sempervivum#1645904 great thank you so much I’ll try to impliment it as soon as I can
Copy linkTweet thisAlerts:
@ProductionNerdauthorAug 13.2022 — @Sempervivum#1645904 Quick question, the elements in the div form 2, I've written code that changes the opacity to fade in the other elements when I click the next button. But when I un comment it it messes up the flex. How can I fix this? I might be able to change the display to none and then the display to flex on all the elements before it fades in.
Copy linkTweet thisAlerts:
@SempervivumAug 15.2022 — Hi @ProductionNerd

you deleted your latest posting, is the issue already resolved?
×

Success!

Help @ProductionNerd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...