The final input is the only one that functions

I am currently working on a large form, but I am encountering a major issue with it.

In certain sections of the form, only the last input field seems to be functional.

For example:

[...]
<div class="main_data">
   <span class="info">main data</span><br>
   <input type="text" name="name" placeholder="Name" required>
   <input type="email" name="email" placeholder="Email" required>
   <input type="text" name="website" placeholder="Website" required>
   <input type="text" name="telephone" placeholder="Telephone" required>
   <input type="text" name="address" placeholder="Address" required>
   <input type="text" name="city" placeholder="City" required>
   <input type="text" name="country" placeholder="Country" required>
</div>
[...]

All input fields appear to be unresponsive, and I can only enter text in the "Country" field.

A similar issue is occurring in other parts of the form, such as here:

[...]
<div class="detailed_info">
   <span class="info">detailed info</span>
   <input type="text" name="activity_areas" placeholder="Activity Areas" required>
   <input type="text" name="company_valences" placeholder="Description of Company Valences" required>
   <input type="text" name="where_operates" placeholder="Markets / Countries where it operates" required>
   <input type="text" name="where_operates" placeholder="Annual Turnover (Value EUR)" required>
[...]

I am only able to input text in the "Annual Turnover" field.

I have attempted adjusting z-index values to troubleshoot, but have not identified any issues.

Below is the CSS for the first section; resolving the issue in this section may help address the problem in the second section.

.main_data{
    width: 100%;
    padding: 30px 0;
    background: rgba(238, 238, 238, 0.9);
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    text-align: center;
}
.main_data .info{
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
    font-size: 20px;
    font-family: 'Futura-Light-Italic', sans-serif;
}
.main_data input{
    border: 0;
    padding: 5px 0;
    margin: 0;
    width: 80%;
    background: #FFF;
    color: #000;
    text-align: center;
    font-family: 'Futura', sans-serif;
}
.main_data input:focus{
    border: 0;
}

If you would like to inspect elements on the page, you can access the form by clicking "Join the City as One of Us" here: link

Your assistance is greatly appreciated as this form needs to be operational today.

Please do not hesitate to ask if anything is unclear. I will do my best to assist you in helping me.

EDIT: I am using Google Chrome.

Answer №1

Adjust the line-height of the element with class .oneofus.

.oneofus {
  width: 88%;
  position: absolute;
  z-index: 12;
  top: 0;
  line-height: 1px; /* here lies the issue - either remove this line or increase it to 74px or more */
}

Answer №2

To adjust the position of the input elements, make sure to set the positioning property to relative.

.main_data input {
  position: relative;
}

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

transforming a text input into unadorned plain text

Currently, I am in the process of creating a small HTML form that consists of a single textbox input. Once the user enters text into this textbox and clicks on a button located at the end of the page, I would like the textbox to transform into normal plain ...

Unable to adjust the width of a table column within a horizontally scrollable container

I am struggling to resize the columns of a large table with 20 headers. Despite trying to place the table inside a div with overflow:auto, I still cannot achieve horizontal scrolling or make the div expand when resizing the columns. A sample code snippet ...

Creating responsive modal windows in Vue and Laravel to dynamically adjust to the screen size

I am currently working with a modal window code snippet. <transition name="modal" @close="showModal = false"> <div class="modal-mask" style=" width: 90% !important;"> <div class="modal-wrapper"> < ...

What causes the entire page to disappear when the screen is adjusted to mobile width?

I'm facing an issue with my ReactJS screen. Everything works perfectly until I resize the screen to mobile width (sm of Material UI) and then everything turns into a WhiteScreen. I've been trying to debug this but can't seem to find the root ...

Ways to improve the cleanliness of the code

I've created a simple life simulation game and I'm looking for ways to optimize the code. Any suggestions on how to make the code cleaner? jsfiddle: https://jsfiddle.net/04vazdrb/ /* JavaScript Implementation of Conway's Game Of Li ...

Tips for updating multiple divs after submitting content with jQuery

My screen contains various widgets, each enclosed with different divs. Currently, I have a form that updates using AJAX when posted through jQuery. However, I am looking to refresh two additional divs located outside the form upon a single jQuery AJAX pos ...

When running the command `npx create-react-app client`, an error is thrown stating "Reading properties of undefined is not possible (reading 'isServer')."

Installing packages. Please wait while the necessary packages are being installed. Currently installing react, react-dom, and react-scripts with cra-template... Encountered an error: Unable to read properties of undefined (reading 'isSer ...

Is it possible to dynamically utilize document.getElementById()?

I am attempting to print an HTML page using window.print after each REST API call updates the content. Is it possible to print continuously for each REST API call? var myPrintContent = document.getElementById("data-box"); var myPrintWindow = wind ...

Browser extension for customizing the information on a webpage

I have a vision of developing a unique Chrome extension that has the ability to modify specific content on designated webpages. My aim is to transform something like the following: <td class="Data">Phone:</td> into something more interactive ...

At times, Vue.js may encounter difficulties when attempting to load a component

Recently, a strange issue has been occurring in my production code. Although nothing has been changed, I am now receiving reports that occasionally a template fails to load causing the page to crash. I am currently using vue 2.16. The error messages being ...

Sorting of array in AngularJS ngRepeat may result in changing the length of the array

Link to JSFiddle: http://jsfiddle.net/WdVDh/101/. When updating the sorting option for an ng-repeat list, I noticed that the array length changes and in my local version, all items disappear. My code involves filtering and sorting, with the ability to fi ...

Checking boxes on Android for compatibility with Firefox, Chrome, and Internet Explorer 8

Could anyone assist me with finding Android checkboxes styled with CSS and/or jQuery for my project? I haven't been able to find any resources or plugins that could help. Any links you can provide would be greatly appreciated as I've come up empt ...

The property of undefined map cannot be read

import React from 'react'; import { Card, Text } from "react-native-paper"; import { SafeAreaView, } from "react-native"; class HackerNewsClone extends React.Component { constructor(props) { super(props); this.sta ...

Unsupported geometry detected by ThreeBSP: Unable to process

note: Utilizing Three-CSG for the purpose of merging geometries in Three.js. An error is being thrown stating Uncaught ThreeBSP: Given geometry is unsupported when an instance of THREE.Mesh is passed into the ThreeBSP method of the library. Any insights ...

Import the complete JSON file into a variable as an array

I am struggling with loading an external json file (locations.json) into a variable and then using the information found here: http://www.json.org/js.html Despite trying various methods, I have not been successful in populating the variable. Even after fo ...

Exploring the Power of Ajax with JQuery on the Django Development Server

I am currently setting up an Ajax request using JQuery (version 1.5) on a Django website running version 1.2.5. I am testing this on the Development Server as I intend to demonstrate it before deploying to production. Below is the javascript code snippet ...

Understanding how the context of an Angular2 component interacts within a jQuery timepicker method

Scenario: I am developing a time picker component for Angular 2. I need to pass values from Angular 2 Components to the jQuery timepicker in order to set parameters like minTime and maxTime. Below is the code snippet: export class TimePicker{ @Input() ...

Angular 1 and Javascript offer a different approach than using lodash omit and the delete operator

I am facing an issue with a child component where I need to remove properties from an object. Normally, using Lodash, it should work with the following code snippet: this.current.obj = omit(this.current.obj, ['sellerSupportWeb', 'sellerSup ...

Is it possible to align a BootstrapVue b-form-checkbox&radio in a vertical center within Vuetify

I'm currently utilizing Vuetify as our primary framework and incorporating some Bootstrap-Vue components such as b-form-checkbox and radio. I am facing a challenge in trying to vertically center my Bootstrap-Vue checkbox and text. I have attempted se ...

Is it possible to duplicate a response before making changes to its contents?

Imagine we are developing a response interceptor for an Angular 4 application using the HttpClient: export class MyInterceptor implements HttpInterceptor { public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<an ...