The input fields are dysfunctional on mobile devices

I have encountered an issue with two forms on my webpage, specifically on mobile devices. While the input fields work perfectly on laptop browsers, I am unable to enter any text into them on mobile screens. It seems that the input fields are visible, so I suspect that this problem may be related to CSS, but I cannot be certain.

You can view the site here.

Below is the code that I have added:

Thank you in advance.

 
        getPrice = function() {
            var b_rabat1 = 166;
            var b_rabat2 = 167;
            var b_rabat3 = 168;
            var b_rabat4 = 170;
            var d_rabat1 = 176;
            var d_rabat2 = 177;
            var d_rabat3 = 179;
            var d_rabat4 = 182;
            var benzinpris = 10;
... (Code continues)
<style>
#calculator p {
 font-size: 0.840rem;
 margin-bottom: 0px;
}
.kategori{
font-weight: bold;
}
.disclaimer{
text-align: center;
padding: 2%;
background-color: #eeeeee!important;
border-radius: 5px;
}
</style>
<!Doctype html>
<html>
<div id="calculator">
... (HTML code continues)

Answer №1

I myself have encountered similar issues, so I recommend testing these input fields in HTML first.

If they are working properly, then the issue might lie within the CSS or JavaScript. Many times, frontend issues can cause bugs that may initially seem like a coding problem. To debug, consider printing relevant data to the console as it can be very helpful. Thank you.

Answer №2

Checking out your site I've identified the issue.

This particular class is only visible on mobile devices You'll need to remove it, or alternatively, you can add a comment within the CSS file for this class

.custom-header-overlay

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

Animation fails to operate on the second ajax request

On my main page and subpage, I have an ajax call that displays the subpage. Everything works fine with the animation when loading the subpage by clicking on the menu: $(document).ready(function(){ $(".transactions").on("click", function (event) { ev ...

Using JavaScript regex to match repeating subgroups

Can a regular expression capture all repeating and matching subgroups in one call? Consider a string like this: {{token id=foo1 class=foo2 attr1=foo3}} Where the number of attributes (e.g. id, class, attr1) are variable and can be any key=value pair. C ...

A system similar to Facebook's ajax like feature without any errors, yet producing no visible

I am currently in the process of developing a system similar to Facebook's ajax-like feature. Below is the code I have put together: Jquery function for ajax call: function addLikes(likeid, action) { $('.likebox #tutorial-'+likeid+' ...

display object issue with object display

I'm encountering a strange issue with my constructor objects in JS - when I try to view them, all I see is [object Object]. Can anyone help me figure out why this is happening? Check out the code snippet on MyCodeFiddle. ...

A guide on sorting MongoDB arrays in JavaScript to arrange them in descending order based on two specific fields

I am attempting to organize MongoDB arrays in a descending order. I have devised some JavaScript code to transform all the documents into JSON arrays, but I also need to arrange them in a descending order. Here is the code I have written: const result = xp ...

Exploring TingoDB: Trouble encountered when passing global variable to insert operation

During my testing and benchmarking of several embedded databases using node.js, I have encountered an interesting issue with TingoDB. Does anyone have insight into why the following code snippet works as expected: var test = { hello:'world' }; f ...

What is the best way to fetch and convert information from an API to display on a website?

I am encountering an issue while trying to retrieve data from an API. Below is my code with a fabricated access code. $(function () { var $data = ('#data'); $.ajax({ type: 'GET', url: 'http://api.openweathe ...

Previewing Printed Forms in JSF

I am working with a JSF form on a view *.jspx page that contains approximately 20 fields. The form includes a print preview button that opens a new browser window and displays the form in read-only mode. To achieve this, I have utilized a workaround invol ...

Issues with Angular 5 components not functioning properly

I am experimenting with a way to show/hide a div based on a boolean value from an observable. After looking at the second answer in this Stack Overflow thread, I implemented the following code snippet that retrieves the document body width and uses it in a ...

Transferring information within React components

Looking for some assistance with the code below. I'm facing an issue where the data is not being submitted along with the form, even though the correct values are displayed in the form. I have included a user query to fetch data from another object an ...

JavaScript has been used to modify a cell's URL in jqGrid

Currently, I am utilizing struts2-jqgrid along with JavaScript. After the jqgrid has finished loading, it retrieves <s:url var="updateurl" action="pagosActualizar"/>. Subsequently, in the HTML view source, jqgrid generates options_gridtable.cellurl = ...

Converting a customer ShaderMaterial to Lambert Material using Three.js

Currently, I am utilizing a cell shading script to shade a Lambert material on a model. However, I am facing challenges when trying to apply the same script to a custom Shader Material. Is there a way to convert the custom material into a Lambert materia ...

Trying to assign a value to the property 'male' of an undefined object - error encountered while setting object value from an array

Why is it that when I add one more testObject, the code doesn't work anymore? The line of code where only one testObject is used works fine (testObject[Object.values(testObject)[0]]=5), but adding another testObject causes issues. const testObject ...

Guide on transferring data from a component to App.vue in Vue 3, even with a router-view in the mix

I have the following layout: src components Footer.vue views Page.vue App.vue I want to access the 'message' vari ...

Exploring nested objects in Javascript through iterating and extracting all properties in a continuous loop (Updated)

In my code, I created an object with two sub-objects structured like this: var testObject = { "page":{ "type": "ePurchase", "title":"Purchase confirmation" }, "user": { "name": ...

How to Use JavaScript Function to Rotate an Entire Webpage

For my final project in a web design class, we were tasked with creating a website that showcases our skills. I've completed the assignment and now I want to add some interesting features to make it stand out. I'm interested in using -webkit-tra ...

Issue with Bootstrap 4 tab.js not updating active states

I am having trouble with 2 out of the 4 tab.js examples in both CodePen and a local HTML file. The "nav" example is causing the items in the dropdown to stay active and inaccessible after clicking. The same issue occurs with all the items in the vertical t ...

The TextInput field is not displaying my placeholder text - what could be causing this issue?

I am facing an issue where the placeholder is not appearing on both <TextInput> elements, and when the user inputs something, it does not show up in those <TextInput> boxes. I need to understand why this behavior is occurring. Below is the con ...

Utilizing Javascript with the Facebook API for Efficient User Data Caching

Is it possible to store user information on the client's system for quick access? For instance, if I have a list of the user's friends obtained via FQL, is there a way to cache this data so that I don't need to request it every time the app ...

Issue encountered while attempting to include a background image in React JS

I encountered an issue when attempting to include a background image in react js. ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css) Unable to locate module: An attem ...