What's the most effective method for isolating elements in HTML to prevent one element from impacting another?

I recently created a password form in HTML with some nice functions. However, after making a small adjustment, the CSS is causing the elements to shift when clicking on different input boxes. This results in the labels on the form moving slightly up and down.

To visualize the change, here is a JSFiddle link: https://jsfiddle.net/b6hv8wLh/

Below is some of the code:

<div class="container">
  <div class="jumbotron" id="firstform">
    <h1>Sign up page</h1> 
    <form id="myform">

        <label>Username </label> <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br>

        <div class="pwordCheck">
            <label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
            <label>Confirm Password </label>  <input type="password" class="f1input" id="confpword"  onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
            <span id="themessage" class="themessage"></span><br> 
        </div>

        <label>Email </label> <input type="email" class="f1input" id="e-mail"/><br>
        <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
              <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Java Developer</a></li>
                <li><a href="#">SQL Developer</a></li>
                <li><a href="#">Tester</a></li>
              </ul>
        </div>
        <label>Job Role</label> <input type="text" class="f1input"/><br>

        <label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/><br>

        <label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/><br>

      <input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
    </form>  

  </div>

I have attempted various methods, such as wrapping the form in different divs and targeting individual elements, but the issue persists. To clarify, my goal is to prevent any change in the labels when users click on the input boxes.

Thank you for your assistance

javascripthtmlcss

Answer №1

The issue arises when the border:4px solid red; style is applied to the input element, causing it to expand in size and push down the elements below it.

A workaround is to set the input's border color to match the background color, so that it appears invisible until focused, maintaining the original size:

    input {
      background-color: #fff; 
      margin-left: 10px; 
      margin-bottom: 10px; 
      padding-right: 50px;
      border-radius: 15px;
      border:4px solid #D8D8D8;
    }

The key lies in adding the border:4px solid #D8D8D8; declaration to the input styles.

Answer №2

When an input field is focused, the border is visible due to the styling applied. To ensure a consistent look, it is recommended to add a border property to the input field with the same background color as the form.

input {
    border:3px solid #ECECEC; 
}

Answer №3

Quick fix

Your issue can be easily resolved. Keep the border size of the input boxes constant even when they are in focus.

For instance, the focused inputs may have the following style:

border: 4px solid red;

However, when they are not focused, they should have a 4px border with the same color as the background.

Alternative Bootstrap-inspired approach

Consider using a 1px border with a box shadow instead. This approach is similar to how Bootstrap handles it, which seems to be your current framework. In my opinion, this gives a cleaner look, especially compared to the large borders.

Answer №4

Utilize the box-shadow property to eliminate the need for additional CSS.

/* CHANGE BORDER TO BOX SHADOW ON THE FOCUS */
.f1input:focus{
outline: none !important;
    box-shadow: 0 0 0 4px red;
border-radius: 15px;
}

body {
background-color: #080808;
}

/*
.navbar-brand {
background-color: red;
}
*/

.container-fluid{
background-color: #006600;
border: 0;
}

#websiteName a{
color: black;
font-size: 20px;
}

#websiteName a:hover{
color: red;
}

#theLinks ul li a{
color: black;
font-size: 20px;
}

#theLinks ul li a:hover{
color: red;
}

#firstform{
background-color: #D8D8D8;
}

#firstform span{
position: absolute;
}

.glyphicon-search
{
   position:relative !important;
}

#firstform .themessage{
    position: absolute;
}

#firstform {
width: 60%;
margin: auto;
text-align: center;
}

#firstform h1{
text-align: center;
} 

#firstform label{
text-align: left;
} 

#myform {
width: 100%;
}

input {
background-color: #fff; 
margin-left: 10px; 
margin-bottom: 10px; 
padding-right: 50px;
border-radius: 15px;
border: none;
}
<div class="container">
  <div class="jumbotron" id="firstform">
    <h1>Sign up page</h1> 
    <form id="myform">

<label>Username </label> <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br>

<div class="pwordCheck">
<label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
<label>Confirm Password </label>  <input type="password" class="f1input" id="confpword"  onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
<span id="themessage" class="themessage"gt;</span><br> 
</div>

<label>Email </label> <input type="email" class="f1input" id="e-mail"/><br>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
<li><a href="#">Java Developer</a></li>
<li><a href="#">SQL Developer</a></li>
<li><a href="#">Tester</a></li>
  </ul>
</div>
<label>Job Role</label> <input type="text" class="f1input"/><br>

<label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/><br>

<label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/><br>

  <input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
</form>  
    
  </div>

Answer №5

Here is a sample CSS code snippet for styling a sign-up page:

    #myform{
      width: 450px;
      margin: 0 auto;
    }
    .sep{
      padding: 10px;
    }
    body {
      background-color: #080808;
    }
    .container-fluid{
      background-color: #006600;
      border: 0;
    }
    #websiteName a{
      color: black;
      font-size: 20px;
    }
    #websiteName a:hover{
      color: red;
    }
    #theLinks ul li a{
      color: black;
      font-size: 20px;
    }
    #theLinks ul li a:hover{
      color: red;
    }
    #firstform{
      background-color: #D8D8D8;
    }

    #firstform span{
      position: absolute;
    }
    .glyphicon-search
    {
       position:relative !important;
    }
    #firstform .themessage{
        position: absolute;
    }
    #firstform h1{
      text-align: center;
    } 
    .sep label{
      padding: 10px;
    }
    input {
    background-color: #fff; 
    margin-left: 10px; 
    padding-right: 50px;
    border-radius: 15px;
    border: none;
    }
    .f1input:focus{
      outline: none !important;
        border:4px solid red;
      border-radius: 15px;
    }
    input#occupation{
      background-color: #999;
    }
    .mytooltip + .tooltip > .tooltip-inner {
      background-color: #f00;
    }
    label{
        display:inline-block;
        width:150px;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }
    #myCarousel {
      width:50%;
      margin: auto;
      background-color: red;
      text-align: center;
    }
    #myCarousel item {
      text-align: center;
    }

    <div class="container">
      <div class="jumbotron" id="firstform">
        <h1>Sign up page</h1> 
        <form id="myform">
            <div class="sep">
            <label>Username </label> 
            <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip">
            </div>
            <div class="pwordCheck sep">
                <label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
                <label>Confirm Password </label>  <input type="password" class="f1input" id="confpword"  onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
                <span id="themessage" class="themessage"></span><br> 
            </div>
            <div class="sep">
            <label>Email </label> <input type="email" class="f1input" id="e-mail"/>
            </div>
            <div class="dropdown sep">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
                <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Java Developer</a></li>
                    <li><a href="#">SQL Developer</a></li>
                    <li><a href="#">Tester</a></li>
                </ul>
            </div>
            <div class="sep">
            <label>Job Role</label> <input type="text" class="f1input"/>
            </div>
            <div class="sep">
            <label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/>
            </div>
            <div class="sep">
            <label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/>
            </div>
          <input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
        </form>  
      </div>

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

What is the process for configuring a headless implementation of three.js on a node server, similar to the babylon.js-NulEngine setup?

My current project involves the development of a multiplayer three.js fps game, with client-side prediction in the browser. For the server-side implementation, I am utilizing Node.js Express.js and Socket.io for handling authoritative functions such as col ...

javascriptnode.jssocket.iothree.js

Modify request parameters in real-time using JavaScript

i am seeking assistance with a link request: <a href=index.jsp></> also, i have various divs located elsewhere on the page that contain changing values based on user input or specific conditions: <input id="var1" /> <input id="var2" ...

javascriptjqueryhtmljsprequest

Is there a way to redirect the user to a different page without refreshing the page during navigation?

Utilizing javascript, ajax, and jquery to dynamically load content from PHP files without refreshing the page has been a successful venture. However, I am facing a challenge in creating a hyperlink within one of the loaded contents that redirects the user ...

javascriptphpjqueryhtmlajax

The second post request is encountering an issue where Request.body is not defined

After researching for similar symptoms, I couldn't find a case that matches mine. I have body-parser properly installed and app.use(bodyParser.json()) app.use(bodyParser.urlencoded({extended: true})) configured accordingly. However, when handl ...

htmlmysqlnode.jsexpress

VueJS error: 'Property or method is not defined on the instance' message appears despite the method being defined on the instance

Is there a way in Vue.js to dynamically assign the class 'adjust' based on the value of a computed property called "isTrueSet"? I keep encountering the following error message: [Vue warn]: Property or method "itTrueSet" is not defined on the inst ...

javascriptvue.jsvuejs2vue-component

What could be the reason for e.target.value being undefined?

Can someone explain why e.target.value is returning undefined when logged to the console in this simple component? The value should be defined within the element, so I'm confused as to why e.target is not giving the correct value. const NavBar = () = ...

javascriptreactjs

Why is the console log not working on a library that has been imported into a different React component?

Within my 'some-library' project, I added a console.log("message from some library") statement in the 'some-component.js' file. However, when I import 'some-component' from 'some-library' after running uglifyjs with ...

javascriptreactjsreact-native

How can multiple functions be grouped and exported in a separate file in Node.js?

Is there a way to consolidate and export multiple functions in nodejs? I want to gather all my utility functions in utils.js: async function example1 () { return 'example 1' } async function example2 () { return 'example 2' } ...

javascriptnode.jsexpressecmascript-6koa2

Sending Dual Parameters to PHP File Using AJAX

Currently, I am facing an issue where I can successfully pass one value to a Bootstrap modal via AJAX, but my code stops working when I try to pass a second value. JavaScript function claimOrder(str, stre){ if (str=="") { document.getElementById("txtH"). ...

javascriptphpajax

Issue with min-height property in IE8 (and potentially other browser versions)

Trying to design a web page with 3 sections, each occupying 100% of the window height. Managed to make it work on Chrome, Firefox, and Safari, but facing compatibility issues with IE8 and possibly other versions. Test out the page here: Here's the H ...

csscross-browser

Forwarding to another page following an AJAX post request to a Django view

I've been struggling to get this basic piece of code to work properly, despite trying numerous resources. I can't seem to pinpoint where I'm going wrong. Essentially, I have a javascript function submitData() that is supposed to make an ajax ...

javascriptajaxdjango

It is impossible for tailwind to overflow while attempting to adjust the menu to the screen size

Here is the full code snippet: https://jsfiddle.net/3Lapnszc/1/ I am attempting to adjust the left navigation menu on the screen. <main class="flex flex-grow w-full h-screen"> <aside class="w-80 h-screen bg-gray shadow-md w-full hidden sm: ...

htmlcsstailwind-css

Generate a randomly structured 2D array called "Array" using JavaScript

Can anyone help me with extracting a random array from a 2D named array? I've tried several solutions but none of them seem to work. var sites = []; sites['apple'] = [ 'green' , 'red' , 'blue' ]; sites['o ...

javascriptarraysrandom2d

Expanding cards with Material-UI and React seems to be a challenge when using an expander

I've recently integrated a Card component into my project, sourced from material-ui's official website. However, I'm encountering an issue where the CardHeader does not expand upon clicking. This is the structure of my Component : import ...

javascriptreactjswebpackreduxmaterial-ui

Unusual situation observed in ExpressJS: Callback function fails to execute

Currently, I am facing an issue with my web app built using expressjs and node. It seems that the functionality is not working correctly. An unusual situation has occurred where accessing the first link in the browser yields the expected results, while th ...

javascriptnode.jsrestexpressget

Having trouble hiding the message "Not found" with ng-hide and filters in AngularJS

I am currently working on incorporating instant search functionality with filters in AngularJS. My goal is to have the "Not Found!!" message displayed when the filter results in an empty array, indicating that no matches were found. However, I have encou ...

javascriptjqueryangularjssearch

How to resolve the error "TypeError: 'listener' argument must be a function" in Gulpfile.js?

I am in the process of setting up my development environment and encountering some issues when running gulp in the terminal. I am not sure where this error is originating from. Here is the snippet of code from my Gulpfile.js : var gulp = require(&a ...

javascriptnode.jsgulp

Learn the steps for assigning a distribution tag to an npm package within a private registry

Operating with my own exclusive Gemfury repository, I am actively releasing npm packages. Intrigued by the prospect of applying distribution tags to my packages (as per this guide: https://docs.npmjs.com/cli/dist-tag). The configuration of my npm registr ...

javascriptnpmpublishgem-fury

Issue with footer not properly aligning on the page's bottom

In my current project, I am utilizing both angularjs and node js for development. Within my index.html, the views are being called in the following manner: <div ng-include="'views/header/header.view.html'"></div> <div ng-view styl ...

htmlcssangularjsnode.jsng-view

Retrieve coordinates of the clicked location with RichMarker in the Google Maps JavaScript API v3

I followed the solution provided here for richmarker.js After implementing it, when I use my_rich_marker.addListener('click', function(event) { console.log(event); //undefined } What I am trying to achieve is to access event.latLng of the ...

javascriptgoogle-maps-api-3