How do you style my modal so form questions go ontop of another?

Shaun Smerling 0
Viewed 31

I built a form modal pop up with ReactJS and Tailwindcss and then I migrated my ReactApp to NextJS and the whole form styling got destroyed. It now displays the inputs sideways instead of ontop of each other and there is no overflow scroll attribute. This was all fixed before I switched to NextJS

It seems to me that TailWind is still working (i've gone through the steps to sync it up with NextJS) but I can't seem to figure out why my form styling changed

I want to style it so it looks like a proper form where the questions go ontop of one another and you are able to scroll through the form.

The image attached is what it looks like now:

modal form

Global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.bold {
  color: #0061ff !important;
}


.bannerText {
  margin-bottom: 50px;
}

#catfilter {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}


.modal {
  font-size: 12px;
  background-color: rgb(88, 101, 122);
  color: black;
  margin-left: 10px;
  margin-right: 10px;
  max-width: 100%;
  overflow: auto;
  height: 850px;

  
}

#jobpost_form{
  position: relative;
}

.modalbox {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */

}

.close {
  cursor: pointer;
  position: absolute;
  display: block;
  padding: 2px 5px;
  line-height: 20px;
  right: -10px;
  margin: 30px;
  top: -10px;
  font-size: 24px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #cfcece;
}

#submit {
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }


.modal > .header {
  width: 100%;
  font-size: 24px;
  text-align: center;
  padding: 5px;
}


.bannerHead {
  margin-top: 50px;
}

.App {
  text-align: center;
}

h1 {
  font-size: 60px !important;
  font-weight: bold;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Navbar.js

import React from 'react'
import Popup from 'reactjs-popup'
import {checkout} from "../checkout.js"

const Modal = () => (

  <Popup
  trigger={<button type="button"class="font-mono text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-12 py-2 text-center mr-2 content-center ">Post A Job </button>}
  modal
  nested
>
  {close => (
    <div className="modal h-3/4 rounded-md">
      <button className="close" onClick={close}>
        &times;
      </button>
      <div className="header font-mono"> <h2 className="mt-2 -mb-16 text-white">Interested In Posting A Job? </h2></div>
      <div className="content">
      <form id="jobpost_form" className=" p-20 m-10" action="https://formsubmit.co/ed7d1a28fb95ab97e3a857f1530072ae" method="POST">

      <label for="fname" className="font-mono m-10 text-white">Name:</label>
      <input type="text" required id="modalbox" name="contact_name" placeholder="Your name.." />

      <label for="lname" className="font-mono m-10 text-white" >Email:</label>
      <input type="email"  id="modalbox" required name="contact_email" placeholder="Your email address.."/>

      <label for="companyurl" className="font-mono m-10 text-white" >Company URL:</label>
      <input type="text" required id="modalbox" name="contact_company" placeholder="Your company URL.."/>


      <label for="postitle" className="font-mono m-10 text-white" >Position Title:</label>
      <input type="text" required id="modalbox" name="contact_postitle" placeholder="Head of Marketing...Account Manager...PPC Specialist..."/>


      <label for="loc" className="font-mono m-10 text-white" >Location:</label>
      <input type="text" required id="modalbox" name="contact_loc" placeholder="(Remote) USA.... Sydney, Australia.... (Hybrid) New York, USA...."/>

      <label for="compdetails" className="font-mono m-10 text-white">Company Description </label>
      <textarea id="modalbox" name="comp_details" required placeholder="eComjobs is a job board specifically for the eCommerce industry... Our mission to provide a niche experience to hiring eCom talent amongst the top D2C companies....Built in 2022 by.... " className="h-60"></textarea>

      <label for="jobdetails" className="font-mono m-10 text-white">Job Description: </label>
      <textarea id="modalbox" name="job_details" required placeholder="The Head of Marketing will be in charge of all marketing campaigns & oversee the whole marketing division.... Their mission is to champion growing our user base through our 4 main marketing channels...." className="h-60"></textarea>

      <label for="jobreqs" className="font-mono m-10 text-white">Job Requirements: </label>
      <textarea id="modalbox" name="job_reqs" required placeholder="4+ years in a leadership marketing role at a D2C company.... Experience with digital marketing platforms such as Facebook, Pinterest, Tiktok, Instagram... Excellent interpersonal communication skills " className="h-60"></textarea>

      <label for="skto" className="font-mono  m-10 text-white" >Skills/Tools:</label>
      <input type="text" required id="modalbox" name="job_skto" placeholder="Facebook Ads, Instagram Ads, Management, Google Analytics, Shopify Plus"/>

      <label for="applink" className="font-mono m-10 text-white" >Application Link:</label>
      <input type="text" required id="modalbox" name="job_applink" placeholder="https://www.yourcompanyurl.com/applynow"/>


      <button onClick={(() => {
      checkout({
        lineItems: [
          {
            price: "price_1LeELMJ3L3qVyujT9mZxXdxG",
            quantity: 1
          }
        ]
      })
      })} className="font-mono text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-12 py-2 text-center mr-2 content-center" 
      type="submit" value="Submit">Checkout </button>
      
  
      </form>
      </div>
      
    </div>
  )}
</Popup>
)


const NavBar = () => {

    return (<nav class="p-3 bg-gray-50 rounded border-gray-200 dark:bg-gray-800 dark:border-gray-700">
    <div class="container flex flex-wrap justify-between items-center mx-auto">
      <a href="#" class="flex items-center">
          <img src="/logo.png" class="mr-2 h-10"  />
      </a>
      <div class="flex align-center" id="navbar-solid-bg">
        <ul class="flex flex-col  bg-gray-50 rounded-lg md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-transparent dark:bg-gray-800 md:dark:bg-transparent dark:border-gray-700">
          <li>
          <Modal />
          </li>
        </ul>
      </div>
    </div>
  </nav>


)}

export default NavBar;
next.js tailwind-css reactjs css html
0 Answers
Related