Tips for positioning text within an input field above a div element

When a div is placed behind another div, the text in both div elements aligns.

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-size: 24px;
  font-family: Verdana;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  z-index: 2;
  position: relative;
}

.underlayer {
  top: -48px;
  z-index: 1;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
}
<div class="wrapper">
  <div type="text" class="box top">20-123</div>
  <div class="box underlayer">20-123-20</div>
</div>

Replacing the div with class top with an input causes the text to be aligned incorrectly by 1px, even though the border remains aligned properly.

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-family: Verdana;
  font-size: 24px;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  z-index: 2;
  position: relative;
}

.underlayer {
  top: -48px;
  z-index: 1;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
}
<div class="wrapper">
  <input type="text" value="20-123" class="box top">
  <div class="box underlayer">20-123-20</div>
</div>

I'm struggling to understand it. Can someone explain and suggest how to fix this issue?

htmlcssz-index

Answer №1

This issue arises from the way inputs are managed. The textfield within an input-element is expanded to fit the box size, which in this scenario is 34px. Therefore, the solution is to adjust the div's line-height to align with the 34px of the input.

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-family: Verdana!important;
  font-size: 24px;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  z-index: 2;
  position: relative;
}

.underlayer {
  top: -48px;
  line-height: 34px;
  z-index: 1;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
}
<div class="wrapper">
  <input type="text" value="20-123" class="box top">
  <div class="box underlayer">20-123-20</div>
</div>

Answer №2

You are experiencing an issue with the fonts on your page. There seems to be a separate font for the underlayer compared to the others.

To address this, I have included a font-size adjustment and hidden the second box. This allows you to align the top position of the underlayer with the text above it.

While this may not be the most ideal solution, it does get the job done.

.container {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-size: 24px;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  font-family: sans-serif;
  z-index: 2;
  position: relative;
}

.underlayer {
  font-family: sans-serif;
  font-size: 24px; 
  top: -44px;
  left: 1px;
  z-index: 1;
  border: 0px solid #cccccc;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
}
<div class="container">
  <input type="text" value="20-123" class="box top">
  <div class="box underlayer">20-123-20</div>
</div>

Answer №3

Transform the underlayer element from a div to an input. This action alters the font of the second div to match that of input fields. The underlayer has a lower z-index, ensuring it remains unselectable by users and poses no risk. Additionally, adjust the display property of the second input to block.

Regrettably, the root cause of this occurrence eludes me, rendering me unable to provide an explanation for it.

.wrapper {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  padding-right: 20px;
}

.box {
  height: 34px;
  width: 130px;
  padding: 6px 12px;
  font-size: 24px;
  color: #555555;
  background: rgba(255, 255, 255, 0) none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.top {
  z-index: 2;
  position: relative;
}

.underlayer {
  top: -48px;
  z-index: 1;
  position: relative;
    background: rgba(255, 255, 255, 1);
      color: #c8c8c8;
      margin:0;
   display: block;
   tabindex: -1;
}
<div class="wrapper">
  <input type="text" value="20-123" class="box top">
  <input class="box underlayer" value="20-123-20">
</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

The fixed header column doesn't remain sticky

I am working on fixing the first column in my table to remain static on mobile devices so that users can easily identify the data they are viewing when scrolling. While the td elements in the table work perfectly as intended, the column header continues to ...

htmlcsscss-tablesbootstrap-5

Steps for initializing and loading the Ace editor:

I've been attempting to utilize the Ace code editor library (), but I'm encountering some issues. The embedding guide suggests that the required js files should be loaded from Amazon's CDN. <script src="http://d1n0x3qji82z53.cloudfront.n ...

javascripthtmlcdncode-editor

I am experiencing an issue where tapping on the Status Bar in MobileSafari is not functioning correctly on a specific

I am struggling to troubleshoot this problem with no success so far. The HTML5 JavaScript library I'm developing has a test page that can display a large amount of output by piping console.log and exceptions into the DOM for easy inspection on mobile ...

javascriptioshtmlsafarimobile-safari

Toggle between fading in and out by clicking the button using a div

I'm having trouble getting my fade menu div to work properly. I want it to fade in when the menu button is clicked and fade out when the menu button is clicked again. Despite following various tutorials and researching other questions, I can't se ...

javascriptjqueryhtml

Display issue with Django SelectDateWidget

Having some trouble rendering the built-in SelectDateWidget in Django. When I try, it displays as <django.forms.widgets.SelectDateWidget object at 0xb4f6bc6c> Submit As a newcomer to Django, I've gone through the documentation and searched onl ...

pythondjangohtmldjango-formsdjango-widget

Tips for preserving component state during page rerenders or changes

I created a counter with context API in React, and I'm looking for a way to persist the state even when the page is changed. Is there a method to store the Counter value during page transitions, similar to session storage? My app utilizes React Router ...

javascripthtmlreactjsreduxstate

Place the file in the designated area for styling purposes

Within the pluploader, a file drop zone exists with the identifier dropFilesHere; var uploader = new plupload.Uploader({ drop_element : "dropFilesHere", /*...*/ }); If a user hovers a file over the drop zone, I want to customize it* ...

javascriptjquerycsshtmlplupload

What is the process for retrieving the API configuration for my admin website to incorporate into the Signin Page?

My admin website has a configuration set up that dynamically updates changes made, including the API. However, I want to avoid hardcoding the base URL for flexibility. How can I achieve this? Please see my admin page with the config settings: https://i.st ...

htmljsonangulartypescriptapi

Could someone assist me in resolving the issue of receiving empty emails from my online form submission?

Every day, I receive 6 blank emails from my contact form at the same time. Even though the form on the website is filled out correctly and all the information goes through, I still get these mysterious blank emails. I have implemented validation checks in ...

javascriptphphtmlforms

Ways to use jQuery to disable row form elements in the second and third columns

I need a way to deactivate form elements in the second and third columns, starting from the second row until the nth row using a jQuery selector. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> ...

javascriptjqueryhtmlcss

CSS: Rev Slider slideshow incorrectly positioned in Microsoft Edge

Click here to view the Revolution Slider, which appears correctly in Chrome, Firefox, and Safari. However, in Microsoft Edge, the slider is displaced below the sidebar #boxes. https://i.sstatic.net/ynMT4.png Is there a way to reposition this slider to d ...

cssmicrosoft-edge

How to temporarily change CSS color for 5 seconds using JavaScript and incorporate an easing effect?

Regarding this query: JavaScript - Modifying CSS color for 5 seconds Here is a live example of the solution: http://jsfiddle.net/maniator/dG2ks/ I am interested in adding an easing effect to the transition, gradually making the color fully opaque and t ...

javascriptcssjquery-easing

What are the disadvantages of nesting CSS Grids within each other?

I have been exploring component-driven front-end frameworks like Angular and honing my skills in CSS Grid. My query is: Is it considered a bad practice to nest CSS Grids? In my main/root component, I have utilized CSS grid to create two elements: the nav ...

htmlcssangulargridcss-grid

Using the responsive design mode may not accurately reflect the mobile user experience

Recently, I've been working on designing a new cover for my book using HTML and CSS. After completing the design, I previewed it in Responsive Design mode on both Firefox and Google Chrome. However, when I tried to view the website on my phone (a Gala ...

htmlcssresponsive-design

Navigate to a section that has been dynamically loaded through ajax

My page displays a list of products in alphabetical order, with the products dynamically loaded via ajax as the user scrolls. At the top of my page, I have an alphabet list (A-Z) that allows users to click on any letter to jump to the list of products st ...

javascriptjqueryhtmlajax

Tips for incorporating a dynamic CSS style sheet into a standalone xhtml document

I am faced with the task of incorporating two CSS classes into a single xhtml. For instance: Take, for example, display.xhtml, which will be utilized by two different applications, each requiring its own CSS styling. This means that if display.xhtml is ...

htmlcssxhtml

The external Jquery file is being successfully loaded, however, the Jquery functions are failing to execute

I'm having an issue with my HTML partial, main index.html, and external JQuery file. Even though the file is being loaded successfully (verified through an alert function), the JQuery functions are not executing as expected. Upon checking the resourc ...

jqueryhtmlcssangularjstwitter-bootstrap

How can we use JavaScript to add a class to the <html> element?

What is the method to apply a class to the root element <html> in JavaScript? ...

javascripthtml

Is it possible to trigger a JavaScript function without altering its existing value?

I am looking for a way to repeatedly call a JavaScript function without altering its previous values. The challenge I am facing is with an icon JSON object that contains 15 different icons. I am using a switch statement to execute the corresponding functio ...

javascriptjqueryhtmlfunctionswitch-statement

What is the best way to automatically adjust the size of an image to fit its

One of the challenges with the parent container is fitting an image inside it: .parent { position: relative; text-align: center; overflow: hidden; display: flex; align-items: center; align-content: center; justify-content: cente ...

htmlcss