When materialize css is applied without a grid, it results in misalignment of the input placeholder

I'm utilizing materializecss without its grid system and noticing that my input field placeholder text is being styled with left:0.75rem. Is this a bug in materialize or am I overlooking something here? Check out the fiddle here for more info.

<div class="card">
   <div class="card-content">
      <form>
         <div class="input-field">
            <input id="icon_prefix" type="text" class="validate">
            <label for="icon_prefix">First Name</label>
         </div>
         <div class="input-field">
            <input id="icon_telephone" type="tel" class="validate">
            <label for="icon_telephone">Telephone</label>
         </div>
      </form>
   </div>
   <div class="card-action">
      <button class="btn waves-effect waves-light">
         Login
      </button>
   </div>
htmlcssmaterialize

Answer №1

A clever solution for this issue involves utilizing a simple CSS technique.

Take a look at the following HTML snippet:

<div class="input-field placeholded">
    <input id="icon_email" type="email" class="validate" placeholder="example@mail.com">
    <label for="icon_email">Email</label>
</div>

Below is the corresponding CSS code:

.placeholded label {
    font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    transform: translateY(-140%);
}

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

Manipulating SVG on a UIWebview dynamically

Seeking guidance on manipulating SVG files loaded into a UIWebview. Currently, I load an SVG file into an HTML file and then into a UIWebview. Presumably, Javascript is required for this, but unsure about the exact process. Ideally, I aim to dynamically ma ...

iphonehtmliosuiwebviewsvg

The select menu default value is not displaying properly after the update to select2 version 4.0.3

After updating the select2 package from version v4.0.0 to v4.0.4, I noticed that the default value of the select menu was no longer appearing as expected: https://i.sstatic.net/UO3yZ.jpg For those interested, here is a link to my code on JSBin: view jsbi ...

javascripthtmlangularjsjquery-select2jquery-select2-4

Switch the positive/negative signs of submenus when the main menu is toggled open or closed

Check out my custom jQuery menu implementation below, also available on JSfiddle here: $(document).ready(function () { $(".main_menu_01, .main_menu_02").on('click', function () { var $panel = $(this).next('.panel'); i ...

jqueryhtmlcss

Align the dimensions of the table to match with the background image in a proportional

Seeking a contemporary method to match a table with a background image, ensuring all content scales proportionally. Mobile visibility is not a concern for this specific project. Using Wordpress with a starter bootstrap theme. Check out the code on jsfidd ...

htmlcsswordpresstwitter-bootstraphtml-table

Rails Polymer is experiencing a glitch where the CSS and Polymer elements are not displaying correctly until a page refresh is

Whenever I first load a page, my polymer elements (like paper-input) fail to load their CSS properly. Here is an example of how the page looks before and after refreshing: https://i.sstatic.net/vsIpE.pnghttps://i.sstatic.net/YAFjP.png Below is the code sn ...

cssruby-on-railspolymer

Artistic Canvas: Selected Image

I am trying to determine if the user has clicked on an image drawn in a canvas element. Despite clicking on the image, nothing seems to be happening. The alert function is not being triggered and the last condition in the code never evaluates to true. An ...

javascriptcsscanvasposition

Scripts in jQuery Ajax are being loaded as text, with certain portions of the code undergoing processing

I encountered an issue while working on a block of code. The code I wrote is meant to load a URL from an XML file and insert server-side code into the pre tag, which displays the developed code for a class project. It works perfectly fine with Python and M ...

javascriptjqueryhtmlajax

Unable to assign a className to a personalized React component - troubleshooting needed!

I have a component that relies on another component. I am trying to pass CSS positioning from the outer component to the inner one by using the following code: import OptionsMenu from './OptionsMenu' import { withStyles } from 'material-ui/ ...

javascriptcssreactjsmaterial-ui

Javascript animations failing to run sequentially

I am working on a circular design made up of 12 arc segments and would like to create a smooth transition from the start pattern to the end pattern for the user to view. There will be multiple start and end patterns to showcase. Check out my current code ...

javascriptjqueryhtmlcss

Extracting Data using Tags and Classes

Attempting to extract data from a website, I require information on sizes, prices, amenities, specials, and reservation options. I have tried using the code below but encountered numerous errors and could not copy the elements. Can someone assist me with ...

htmlexcelvbaweb-scraping

Ensure that your form's input field only accepts international UK numbers, such as +447655123456, using HTML and Java

Is there a way to make it mandatory for users to input +447 as the first four characters followed by only numbers? For example, if someone tries to type 07655 123456, it would be rejected unless the input starts with +447. I know this can probably be ach ...

javahtmlforms

Transforming a JavaScript timer into a dynamic jQuery countdown with the inclusion of a custom interval

I came across a unique JS-Countdown Script on JSFiddle. UPDATE: Currently, I am utilizing the code created by rafaelcastrocouto, which meets almost all of my requirements. I needed a 10-second JQuery Countdown-Script with a particular interval that reset ...

javascriptjqueryhtml

Avoid using underscore in Web SQL queries to prevent potential syntax errors

As I continue to work on my mobile application, I have encountered a challenge with the search functionality. In order to escape the underscore character "_" when searching records stored in WebSql as a local database, I attempted to implement an approach ...

sqlhtmljquery-mobileweb-sql

Angular 2: Issue with disabled functionality not functioning correctly

In my TypeScript code, I have created a boolean variable called readOnlyMode. When this variable is set to true, all elements should be disabled. To achieve this, I am using [disabled]="readOnlyMode" in the HTML for elements that need to be disabled. Howev ...

htmlangulartypescript

Is all of the CSS stored in one or multiple files?

Will the number of CSS files on my website impact its performance? I understand the necessity of having a separate file for print styles, but I'm wondering about the other CSS files. Is it better to have all my styles in one file or split them into mu ...

cssweb

How can 2 block-level <div> elements be positioned side by side?

After reading through w3schools.com, I discovered that the div element is considered a block-level element in HTML (meaning that the browser will include line breaks before and after it). But then comes the question: how can you have 2 divs positioned nex ...

html

What is the best way to eliminate base tags from jQuery mobile scripts?

In jQuery Mobile, how can I remove the base href tags from the page and disable base href? Code Snippet: // Function to test for dynamic-updating base tag support function baseTagTest() { var fauxBase = location.protocol + "//" + location.host + l ...

javascriptjqueryhtml

Browser unresponsiveness triggered by excessive Ajax setInterval functionality

Here is the test code I am currently using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ajax - one variable test</title> <style> body{ font-size: 12px; font-family: Arial;} </styl ...

jqueryhtmlajax

Why is it not functioning when storing responses in a jQuery variable?

I am working on a survey where each question is displayed one at a time. Users click on their answers, causing the current question to fade out and the next one to fade in. At the end of the survey, I want to show all the answers they selected. Below is t ...

javascriptjqueryhtml

What is the best way to implement CSS chat messages with rounded borders?

I am currently compiling a list of messages sent and received on our chat platform. Here is the current layout: Check out the preview However, I would like to revamp this structure to something like the following: Take a look at the new preview here I ...

htmlcsschat